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

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

このクラスは 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:  WebGLDrawOptions。デベロッパーが関連付けられた Google の基本地図にコンテンツをレンダリングできるようにします。
戻り値: なし
このメソッドを実装して、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])
パラメータ: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral 緯度、経度、高度。
  • rotations:  Float32Array optional XYZ 規則で角度で指定されるオイラー回転角を含む配列。
  • scale:  Float32Array optional カーディナル軸に適用する XYZ スカラー配列を含む配列。
戻り値:  Float64Array WebGL で使用する MVP 行列。
getCameraParams
getCameraParams()
パラメータ: なし
戻り値:  CameraParams カメラ パラメータ

CameraParams インターフェース

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

WebGLOverlayView に使用される GL カメラのパラメータなど、カメラ パラメータの取得に使用されます。

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