WebGL

WebGLOverlayView クラス

google.maps.WebGLOverlayView クラス

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 の各ライフサイクル フックの実装を指定します。

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

このクラスは MVCObject を拡張します。

const {WebGLOverlayView} = await google.maps.importLibrary("maps") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
WebGLOverlayView
WebGLOverlayView()
パラメータ: なし
WebGLOverlayView を作成します。
getMap
getMap()
パラメータ: なし
戻り値:  Map|null|undefined
onAdd
onAdd()
パラメータ: なし
戻り値: なし
このメソッドを実装して、WebGL レンダリング コンテキストにすぐにアクセスする必要がないオーバーレイを描画する前に、中間データ構造を取得または作成します。レンダリングするには、このメソッドを実装する必要があります。
onContextLost
onContextLost()
パラメータ: なし
戻り値: なし
このメソッドは、なんらかの理由でレンダリング コンテキストが失われたときに呼び出されます。既存の GL 状態は不要であるため、ここでクリーンアップする必要があります。
onContextRestored
onContextRestored(options)
パラメータ: 
  • options:  デベロッパーが GL コンテキストを復元できるようにする WebGLStateOptions。
戻り値: なし
このメソッドは、レンダリング コンテキストが利用可能になると呼び出されます。これを使用して、WebGL の状態（シェーダーやバッファ オブジェクトなど）を初期化またはバインドします。
onDraw
onDraw(options)
パラメータ: 
  • options:  デベロッパーがコンテンツを関連する Google の基本地図にレンダリングできる WebGLDrawOptions です。
戻り値: なし
このメソッドを実装して、WebGL コンテンツを地図に直接描画します。オーバーレイに新しいフレームを描画する必要がある場合は、WebGLOverlayView.requestRedraw を呼び出します。
onRemove
onRemove()
パラメータ: なし
戻り値: なし
このメソッドは、WebGLOverlayView.setMap(null) でオーバーレイが地図から削除されたときに呼び出されます。ここで、すべての中間オブジェクトを削除する必要があります。レンダリングするには、このメソッドを実装する必要があります。
onStateUpdate
onStateUpdate(options)
パラメータ: 
  • options:  デベロッパーが GL コンテキストを復元できるようにする WebGLStateOptions。
戻り値: なし
このメソッドを実装して、レンダリング アニメーション フレームの外部で 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 インターフェース

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

カメラ パラメータ（WebGLOverlayView に使用される GL カメラのパラメータなど）を取得するために使用されます。

このインターフェースは CameraOptions を拡張します。
center
タイプ:  LatLng
heading
タイプ:  number
tilt
タイプ:  number
zoom
タイプ:  number