WebGL

WebGLOverlayView 類別

google.maps.WebGLOverlayView class

運用 WebGL 疊加層檢視,即可直接存取 Google 地圖平台算繪向量基本地圖的環境。共用算繪環境有許多好處,包括運用 3D 建築物幾何圖形進行深度遮蔽,及同步處理 2D/3D 內容與基本地圖算繪。

您可以透過 WebGL 疊加層檢視,直接使用 WebGL 或常用圖形程式庫 (例如 Three.js 或 deck.gl) 在地圖上新增內容。如要使用疊加層,您可以擴充 google.maps.WebGLOverlayView,並為下列生命週期鉤子提供實作:WebGLOverlayView.onAddWebGLOverlayView.onContextRestoredWebGLOverlayView.onDrawWebGLOverlayView.onContextLostWebGLOverlayView.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)
參數: 
  • 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 的 WebGLRenderingContext。
transformer
從攝影機空間轉換至經緯度座標的矩陣轉換。

WebGLStateOptions 介面

google.maps.WebGLStateOptions 介面

GL 狀態選項。

gl
用於算繪此 WebGLOverlayView 的 WebGLRenderingContext。

CoordinateTransformer 介面

google.maps.CoordinateTransformer 介面

這個介面提供方便的方法,可產生矩陣,用於在 Google 基本地圖上算繪 WebGL 場景。

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

fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
參數: 
  • latLngAltitudeLatLngAltitude|LatLngAltitudeLiteral 緯度、經度和海拔高度。
  • rotationsFloat32Array optional 陣列,其中包含以度為單位的歐拉旋轉角度,採用 XYZ 慣例。
  • scaleFloat32Array optional 陣列,其中包含要套用至基軸的 XYZ 純量陣列。
傳回值:  Float64Array 與 WebGL 搭配使用的 MVP 矩陣。
getCameraParams
getCameraParams()
參數:
傳回值:  CameraParams 相機參數

CameraParams 介面

google.maps.CameraParams 介面

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

這個介面會擴充 CameraOptions

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