WebGL

WebGLOverlayView 類別

google.maps.WebGLOverlayView 類別

您可以透過 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])
參數: 
傳回值:  Float64Array MVP 矩陣,可與 WebGL 搭配使用。
getCameraParams
getCameraParams()
參數:
傳回值:  CameraParams 相機參數

CameraParams 介面

google.maps.CameraParams 介面

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

這個介面會擴充 CameraOptions

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