WebGL

WebGLOverlayView クラス

class google.maps.WebGLOverlayView extends MVCObject
library "maps"

WebGL オーバーレイ表示では、Google Maps Platform がベクター基本地図のレンダリングに使用しているものと同じ WebGL レンダリング コンテキストに直接アクセスできます。共有レンダリング コンテキストを使用すると、建物の 3D 表示による深度オクルージョンや、2D / 3D コンテンツと基本地図のレンダリングの同期などのメリットが得られます。

WebGL オーバーレイ表示を利用すると、WebGL を直接使用したり、Three.js や deck.gl などの一般的なグラフィック ライブラリを使用したりして、地図にコンテンツを追加できます。オーバーレイを使用するには、google.maps.WebGLOverlayView を拡張し、ライフサイクル フック（WebGLOverlayView.onAdd、WebGLOverlayView.onContextRestored、WebGLOverlayView.onDraw、WebGLOverlayView.onContextLost、WebGLOverlayView.onRemove）ごとに実装を提供します。

onAdd() メソッドの呼び出しをトリガーするには、有効な Map オブジェクトを指定して WebGLOverlayView.setMap を呼び出す必要があります。また、onRemove() メソッドをトリガーするには、setMap(null) を呼び出す必要があります。setMap() メソッドは、作成時に呼び出すことも、削除後にオーバーレイを再表示する必要があるときに呼び出すこともできます。onDraw() メソッドは、ズーム、中心、地図タイプなど、要素の位置を変更する可能性のある地図プロパティが変更されるたびに呼び出されます。WebGLOverlayView は、MapOptions.mapId を持つベクターマップにのみ追加できます（RenderingType.VECTOR MapOptions.renderingType に設定され、Map.DEMO_MAP_ID を MapOptions.mapId として使用する地図を含む）。

const {WebGLOverlayView} = await google.maps.importLibrary("maps");
WebGLOverlayView
WebGLOverlayView()
パラメータ: なし
WebGLOverlayView を作成します。
getMap
getMap()
パラメータ: なし
戻り値: Map|null|undefined
onAdd
onAdd()
パラメータ: なし
戻り値: なし
このメソッドを実装して、WebGL レンダリング コンテキストにすぐにアクセスする必要がないオーバーレイを描画する前に、中間データ構造をフェッチまたは作成します。レンダリングするには、このメソッドを実装する必要があります。
onContextLost
onContextLost()
パラメータ: なし
戻り値: なし
このメソッドは、なんらかの理由でレンダリング コンテキストが失われたときに呼び出されます。既存の GL の状態は不要になるため、ここでクリーンアップします。
onContextRestored
onContextRestored(options)
パラメータ:
  • options: WebGLStateOptions。デベロッパーはこれを使用して GL コンテキストを復元できます。
戻り値: なし
このメソッドは、レンダリング コンテキストが利用可能になると呼び出されます。これを使用して、WebGL の状態（シェーダー、バッファ オブジェクトなど）を初期化、バインドします。
onDraw
onDraw(options)
パラメータ:
  • options: WebGLDrawOptions。デベロッパーは、関連付けられた Google 基本地図にコンテンツをレンダリングできます。
戻り値: なし
このメソッドを実装して、WebGL コンテンツを地図上に直接描画します。オーバーレイで新しいフレームを描画する必要がある場合は、WebGLOverlayView.requestRedraw を呼び出します。
onRemove
onRemove()
パラメータ: なし
戻り値: なし
このメソッドは、WebGLOverlayView.setMap(null) でオーバーレイが地図から削除されたときに呼び出されます。中間オブジェクトはここですべて削除します。レンダリングするには、このメソッドを実装する必要があります。
onStateUpdate
onStateUpdate(options)
パラメータ:
  • options: WebGLStateOptions。デベロッパーはこれを使用して GL コンテキストを復元できます。
戻り値: なし
このメソッドを実装して、レンダリング アニメーション フレーム外の GL 状態の更新を処理します。
requestRedraw
requestRedraw()
パラメータ: なし
戻り値: なし
地図をトリガーしてフレームを再描画します。
requestStateUpdate
requestStateUpdate()
パラメータ: なし
戻り値: なし
地図をトリガーして GL 状態を更新します。
setMap
setMap([map])
パラメータ:
  • map: Map optional div、モデル、ビューの状態にアクセスするためのマップ。
戻り値: なし
オーバーレイを地図に追加します。
継承: addListener、 bindTo、 get、 notify、 set、 setValues、 unbind、 unbindAll

WebGLDrawOptions インターフェース

インターフェース google.maps.WebGLDrawOptions

描画オプション。
gl
この WebGLOverlayView をレンダリングする WebGLRenderingContext。
transformer
カメラ空間から緯度経度座標への行列変換。

WebGLStateOptions インターフェース

インターフェース google.maps.WebGLStateOptions

GL 状態のオプション。
gl
この WebGLOverlayView をレンダリングする WebGLRenderingContext。

CoordinateTransformer インターフェース

インターフェース google.maps.CoordinateTransformer

このインターフェースには、Google の基本地図上に WebGL シーンをレンダリングするために使用する行列を生成するための便利なメソッドが用意されています。

注: このオブジェクトへの参照は、カプセル化する WebGLOverlayView.onDraw 呼び出しのスコープ外で保持しないでください。
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
パラメータ:
戻り値: WebGL で使用する Float64Array MVP 行列。
getCameraParams
getCameraParams()
パラメータ: なし
戻り値: CameraParams カメラ パラメータ

CameraParams インターフェース

interface google.maps.CameraParams extends CameraOptions

WebGLOverlayView に使用される GL カメラのパラメータなど、カメラ パラメータを取得するために使用されます。
center
タイプ: LatLng
heading
タイプ: number
tilt
タイプ: number
zoom
タイプ: number