WebGL

WebGLOverlayView 類別

class google.maps.WebGLOverlayView extends MVCObject
library "maps"

運用 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。

您必須使用有效的 Map 物件呼叫 WebGLOverlayView.setMap，才能觸發對 onAdd() 方法的呼叫，並呼叫 setMap(null) 觸發 onRemove() 方法。您可以在建構時呼叫 setMap() 方法，也可以在移除疊加層後，於任何需要重新顯示疊加層的時間點呼叫。每當地圖屬性變更，可能導致元素位置改變 (例如縮放、中心點或地圖類型) 時，系統就會呼叫 onDraw() 方法。WebGLOverlayView 只能新增至具有 MapOptions.mapId 的向量地圖 (包括設為 RenderingType.VECTOR MapOptions.renderingType 且使用 Map.DEMO_MAP_ID 做為 MapOptions.mapId 的地圖)。

const {WebGLOverlayView} = await google.maps.importLibrary("maps");

建構函式
WebGLOverlayView	WebGLOverlayView() 參數：無 建立 WebGLOverlayView。

方法
getMap	getMap() 參數：無 傳回值： Map|null|undefined
onAdd	onAdd() 參數：無 傳回值：無 在繪製疊加層前，請實作此方法來擷取或建立中繼資料結構，不需要立即存取 WebGL 算繪環境。必須實作這個方法才能算繪。
onContextLost	onContextLost() 參數：無 傳回值：無 如有任何因素造成算繪環境遺失，系統會呼叫這個方法，其中任何既有的 GL 狀態都不再需要使用，請加以清除。
onContextRestored	onContextRestored(options) 參數： options: WebGLStateOptions，可讓開發人員還原 GL 情境。 傳回值：無 算繪環境可供使用時，系統會呼叫這個方法。可用來初始化或繫結任何 WebGL 狀態，例如著色器或緩衝區物件。
onDraw	onDraw(options) 參數： options: WebGLDrawOptions，可讓開發人員將內容算繪至相關聯的 Google 基本地圖。 傳回值：無 實作這個方法，直接在地圖上繪製 WebGL 內容。請注意，如果疊加層需要繪製新影格，請呼叫 WebGLOverlayView.requestRedraw。
onRemove	onRemove() 參數：無 傳回值：無 使用 WebGLOverlayView.setMap(null) 從地圖中移除疊加層時，系統會呼叫這個方法，請務必移除其中的所有中繼物件。必須實作這個方法才能算繪。
onStateUpdate	onStateUpdate(options) 參數： options: WebGLStateOptions，可讓開發人員還原 GL 情境。 傳回值：無 實作這個方法，即可處理算繪動畫影格外任何 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	類型： WebGLRenderingContext 要用來算繪這個 WebGLOverlayView 的 WebGLRenderingContext。
transformer	類型： CoordinateTransformer 從相機空間到經緯度座標的矩陣轉換。

WebGLStateOptions 介面

介面 google.maps.WebGLStateOptions

GL 狀態選項。

屬性
gl	類型： WebGLRenderingContext 要用來算繪這個 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 介面

interface google.maps.CameraParams extends CameraOptions

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

屬性
center	類型： LatLng
heading	類型： number
tilt	類型： number
zoom	類型： number