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

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

注: このオブジェクトへの参照は、カプセル化された WebGLOverlayView.onDraw 呼び出しの範囲外に保持しないでください。
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
パラメータ: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral 緯度、経度、高度。
  • rotations:  Float32Array optional XYZ の規則でオイラー回転角（度数）を含む配列。
  • scale:  Float32Array optional カーディナル軸に適用する XYZ スカラー配列を含む配列。
戻り値: WebGL で使用する Float64Array MVP マトリックス。
getCameraParams
getCameraParams()
パラメータ: なし
戻り値:  CameraParams カメラ パラメータ

CameraParams インターフェース

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

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

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