WebGL

WebGLOverlayView 类

google.maps.WebGLOverlayView 类

通过 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 的地图）。

此类扩展了 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：WebGLDrawOptions，可让开发者将内容渲染到关联的 Google 底图中。
返回值：无
实现此方法可直接在地图上绘制 WebGL 内容。请注意，如果叠加层需要绘制新帧，请调用 WebGLOverlayView.requestRedraw。
onRemove
onRemove()
参数：无
返回值：无
在使用 WebGLOverlayView.setMap(null) 从地图中移除叠加层时，系统会调用此方法，您应在其中移除所有的中间对象。必须实现此方法才能进行渲染。
onStateUpdate
onStateUpdate(options)
参数： 
返回值：无
实现此方法以处理渲染动画帧之外的任何 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
用于渲染相应 WebGLOverlayView 的 WebGLRenderingContext。
transformer
从相机空间到纬度/经度坐标的矩阵转换。

WebGLStateOptions 接口

google.maps.WebGLStateOptions 接口

GL 状态选项。
gl
用于渲染相应 WebGLOverlayView 的 WebGLRenderingContext。

CoordinateTransformer 接口

google.maps.CoordinateTransformer 接口

此接口提供了一些便捷方法，用于生成矩阵以在 Google 基本地图之上渲染 WebGL 场景。

注意：对该对象的引用不应保留在封装 WebGLOverlayView.onDraw 调用的范围之外。
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
参数： 
  • latLngAltitude：LatLngAltitude|LatLngAltitudeLiteral 纬度、经度和海拔高度。
  • rotations：Float32Array optional 一个数组，包含一个以度为单位的欧拉旋转角（采用 XYZ 惯例）。
  • scale：包含要应用于基轴的 XYZ 标量数组的 Float32Array optional 数组。
返回值：要与 WebGL 搭配使用的 MVP 矩阵。Float64Array
getCameraParams
getCameraParams()
参数：无
返回值：  CameraParams 相机参数

CameraParams 接口

google.maps.CameraParams 接口

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

此接口扩展了 CameraOptions。

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