WebGL

WebGLOverlayView

google.maps.WebGLOverlayView

通过 WebGL 叠加视图,您可以直接访问 Google Maps Platform 用于渲染矢量基本地图的 WebGL 渲染上下文。使用共享渲染上下文有诸多好处,例如可利用 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 的矢量地图中。

此类扩展了 MVCObject

通过调用 const {WebGLOverlayView} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

WebGLOverlayView
WebGLOverlayView()
参数:无
创建 WebGLOverlayView
getMap
getMap()
参数:无
返回值Map|null|undefined
onAdd
onAdd()
参数:无
返回值:None
实现此方法即可在绘制叠加层之前提取或创建无需立即访问 WebGL 渲染上下文的中间数据结构。必须实现此方法才能呈现内容。
onContextLost
onContextLost()
参数:无
返回值:None
当呈现上下文因任何原因而丢失时,系统就会调用此方法,并且您应在其中清除所有先前存在的 GL 状态,因为已不再需要它们。
onContextRestored
onContextRestored(options)
参数
返回值:None
呈现上下文可用后,系统会调用此方法。可用于初始化或绑定任何 WebGL 状态,例如着色器或缓冲区对象。
onDraw
onDraw(options)
参数
  • optionsWebGLDrawOptions,允许开发者将内容渲染到关联的 Google 基本地图。
返回值:None
实现此方法即可直接在地图上绘制 WebGL 内容。请注意,如果叠加层需要绘制新帧,请调用 WebGLOverlayView.requestRedraw
onRemove
onRemove()
参数:无
返回值:None
使用 WebGLOverlayView.setMap(null) 从地图中移除叠加层时,系统会调用此方法,您应在其中移除所有的中间对象。必须实现此方法才能呈现内容。
onStateUpdate
onStateUpdate(options)
参数
返回值:None
实现此方法即可处理渲染动画帧之外的任何 GL 状态更新。
requestRedraw
requestRedraw()
参数:无
返回值:None
触发地图以重新绘制帧。
requestStateUpdate
requestStateUpdate()
参数:无
返回值:None
触发地图以更新 GL 状态。
setMap
setMap([map])
参数
  • mapMap optional用于访问 div、模型和视图状态的映射。
返回值:None
向地图添加叠加层。
继承的样式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])
参数
返回值:要与 WebGL 结合使用的 Float64Array MVP 矩阵。
getCameraParams
getCameraParams()
参数:无
返回值CameraParams camera 参数

CameraParams 接口

google.maps.CameraParams 接口

用于检索相机参数,例如用于 WebGLOverlayView 的 GL 相机参数。

此接口扩展了 CameraOptions

center
类型LatLng
heading
类型number
tilt
类型number
zoom
类型number