WebGL

WebGLOverlayView 類別

google.maps.WebGLOverlayView 類別

WebGL 疊加層檢視可讓您直接存取 Google 地圖平台用來轉譯向量基本地圖的 WebGL 轉譯內容。使用共享算繪上下文的設置提供有益,例如具有 3D 建物幾何圖形的深度遮蔽以及以及用 為 2D/3D 內容為基地映射同步的方式。

透過 WebGL 疊加層檢視,你可以使用 WebGL 或熱門的 Graphics 程式庫 (例如 Three.js 或 floor.gl) 在地圖上新增內容。如要使用重疊元素,您可以擴充 google.maps.WebGLOverlayView,並為以下生命週期掛鉤提供實作:WebGLOverlayView.onAddWebGLOverlayView.onContextRestoredWebGLOverlayView.onDrawWebGLOverlayView.onContextLostWebGLOverlayView.onRemove

您必須使用有效的 Map 物件呼叫 WebGLOverlayView.setMap,才能觸發對 onAdd() 方法的呼叫和 setMap(null),以便觸發 onRemove() 方法。可以在建構期間,或在之後移除疊加層時重新顯示時,呼叫 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)
參數: 
傳回值:
算繪結構定義可供使用時,系統會呼叫此方法。可用來初始化或繫結任何 WebGL 狀態,例如著色器或緩衝區物件。
onDraw
onDraw(options)
參數: 
  • optionsWebGLDrawOptions,可讓開發人員將內容轉譯至相關聯的 Google 基本地圖。
傳回值:
實作此方法直接在地圖上繪製 WebGL 內容。請注意,如果疊加層需要繪製新的頁框,請呼叫 WebGLOverlayView.requestRedraw
onRemove
onRemove()
參數:
傳回值:
使用 WebGLOverlayView.setMap(null) 從地圖移除疊加層時,系統會呼叫此方法,且應移除所有所有的中間物件。必須導入這個方法才能算繪。
onStateUpdate
onStateUpdate(options)
參數: 
傳回值:
實作這個方法來處理轉譯動畫影格外的任何 GL 狀態更新。
requestRedraw
requestRedraw()
參數:
傳回值:
觸發地圖重新繪製畫面。
requestStateUpdate
requestStateUpdate()
參數:
傳回值:
觸發地圖以更新 GL 狀態。
setMap
setMap([map])
參數: 
  • mapMap optional存取 div、模型和檢視狀態的地圖。
傳回值:
將疊加層新增至地圖。
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll

WebGLDrawOptions 介面

google.maps.WebGLDrawOptions 介面

繪圖選項。

gl
要顯示這個 WebGLOverlayView 的 WebGLrenderContext。
transformer
從相機空間到經緯度座標的矩陣轉換。

WebGLStateOptions 介面

google.maps.WebGLStateOptions 介面

GL 狀態選項。

gl
要顯示這個 WebGLOverlayView 的 WebGLrenderContext。

CoordinateTransformer 介面

google.maps.CoordinateTransformer 介面

此介面提供便利的方法,可產生矩陣,以在 Google 基本地圖上方顯示 WebGL 場景。

注意:此物件的參照不應保留在封裝的 WebGLOverlayView.onDraw 呼叫範圍之外。

fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
參數: 
傳回值:  Float64Array要搭配 WebGL 使用的 MVP 矩陣。
getCameraParams
getCameraParams()
參數:
傳回值:  CameraParams 相機參數

CameraParams

google.maps.CameraParams 介面

用於擷取相機參數,例如用於 WebGLOverlayView 的 GL 相機參數。

此介面會擴充 CameraOptions

center
類型:  LatLng
heading
類型:  number
tilt
類型:  number
zoom
類型:  number