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()
参数:无
返回值:无
实现此方法可在提取叠加层之前提取或创建中间数据结构,无需立即访问 WebGL 渲染上下文。必须实现此方法才能呈现广告。
onContextLost
onContextLost()
参数:无
返回值:无
当渲染上下文因任何原因丢失时,系统会调用此方法,并且您应在此方法中清除所有现有的 GL 状态,因为已不再需要它。
onContextRestored
onContextRestored(options)
参数
返回值:无
渲染上下文可用后,系统会调用此方法。用于初始化或绑定任何 WebGL 状态,例如着色器或缓冲区对象。
onDraw
onDraw(options)
参数
  • options:可让开发者将内容渲染到关联的 Google 基本地图的 WebGLDrawOptions
返回值:无
实现此方法可在地图上直接绘制 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。

CoordinateTransform 接口

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