WebGLOverlayView class
google.maps.WebGLOverlayView class
運用 WebGL 疊加層檢視，即可直接存取 Google 地圖平台算繪向量基本地圖的環境。共用算繪環境有許多好處，包括運用 3D 建築物幾何圖形進行深度遮蔽，及同步處理 2D/3D 內容與基本地圖算繪。
您可以透過 WebGL 疊加層檢視，直接使用 WebGL 或常用圖形程式庫 (例如 Three.js 或 deck.gl) 在地圖上新增內容。如要使用疊加層，您可以擴充 google.maps.WebGLOverlayView，並為下列每個生命週期掛鉤提供實作項目：WebGLOverlayView.onAdd、WebGLOverlayView.onContextRestored、WebGLOverlayView.onDraw、WebGLOverlayView.onContextLost 和 WebGLOverlayView.onRemove。
您必須使用有效的 Map 物件呼叫 WebGLOverlayView.setMap，才能觸發對 onAdd() 方法和 setMap(null) 的呼叫，進而觸發 onRemove() 方法。您可以在建構時呼叫 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)參數：
傳回值：無 算繪環境可供使用時，系統會呼叫此方法。可用來初始化或繫結任何 WebGL 狀態，例如著色器或緩衝區物件。 |
onDraw | onDraw(options)參數：
傳回值：無 導入這個方法，即可直接在地圖上繪製 WebGL 內容。請注意，如果疊加層需要繪製新影格，請呼叫 WebGLOverlayView.requestRedraw。 |
onRemove | onRemove()參數：無 傳回值：無 使用 WebGLOverlayView.setMap(null) 從地圖中移除疊加層時，系統會呼叫此方法，請務必移除其中的所有中繼物件。必須實作這個方法才能進行算繪。 |
onStateUpdate | onStateUpdate(options)參數：
傳回值：無 實作這個方法，處理算繪動畫影格外的任何 GL 狀態更新。 |
requestRedraw | requestRedraw()參數：無 傳回值：無 觸發地圖重新繪製影格。 |
requestStateUpdate | requestStateUpdate()參數：無 傳回值：無 觸發地圖更新 GL 狀態。 |
setMap | setMap([map])參數：
傳回值：無 將疊加層新增至地圖。 |
已繼承： addListener、 bindTo、 get、 notify、 set、 setValues、 unbind、 unbindAll | |
WebGLDrawOptions 介面
google.maps.WebGLDrawOptions 介面
繪圖選項。
屬性 | |
|---|---|
gl | 要用來算繪這個 WebGLOverlayView 的 WebGLRenderingContext。 |
transformer | 從攝影機空間到經緯度座標的矩陣轉換。 |
WebGLStateOptions interface
google.maps.WebGLStateOptions 介面
GL 狀態選項。
屬性 | |
|---|---|
gl | 要用來算繪這個 WebGLOverlayView 的 WebGLRenderingContext。 |
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 |