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() メソッドの呼び出しをトリガーするには、有効な Map オブジェクトを指定して WebGLOverlayView.setMap を呼び出し、onRemove() メソッドの呼び出しをトリガーするには setMap(null) を呼び出す必要があります。setMap() メソッドは、作成時に呼び出したり、削除後にオーバーレイを再表示する必要がある場合は、その後の任意の時点で呼び出したりできます。onDraw() メソッドは、要素の位置を変更する可能性がある地図プロパティ（ズーム、中心、地図タイプなど）が変更されるたびに呼び出されます。WebGLOverlayView は、MapOptions.mapId を持つベクターマップにのみ追加できます（RenderingType.VECTOR MapOptions.renderingType に設定され、Map.DEMO_MAP_ID を 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。
戻り値: なし
このメソッドは、レンダリング コンテキストが利用可能になると 1 回呼び出されます。これを使用して、シェーダーやバッファ オブジェクトなどの 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])
パラメータ: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral 緯度、経度、高度。
  • rotations:  Float32Array optional XYZ 規則でオイラー回転角を度単位で指定した配列。
  • scale:  カーディナル軸に適用する XYZ スカラー配列を含む Float32Array optional 配列。
戻り値: WebGL で使用する Float64Array MVP 行列。
getCameraParams
getCameraParams()
パラメータ: なし
戻り値:  CameraParams カメラ パラメータ

CameraParams インターフェース

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

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

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