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()
参数：无
返回值：None
实现此方法可在绘制叠加层之前提取或创建无需立即访问 WebGL 渲染上下文的中间数据结构。必须实现此方法才能进行渲染。
onContextLost
onContextLost()
参数：无
返回值：None
当渲染上下文因任何原因丢失时，系统会调用此方法，您应在其中清除所有先前存在的 GL 状态，因为已不再需要此类状态。
onContextRestored
onContextRestored(options)
参数： 
返回值：None
渲染上下文可用时，系统会调用此方法。可用于初始化或绑定任何 WebGL 状态，例如着色器或缓冲区对象。
onDraw
onDraw(options)
参数： 
  • options：WebGLDrawOptions，可让开发者将内容渲染到关联的 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])
参数： 
  • map：Map optional用于访问 div、模型和视图状态的映射。
返回值：None
向地图添加叠加层。
继承： 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 搭配使用的 Float64Array MVP 矩阵。
getCameraParams
getCameraParams()
参数：无
返回值：  CameraParams 相机参数

CameraParams 接口

google.maps.CameraParams 接口

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

此接口扩展了 CameraOptions。
center
类型：  LatLng
heading
类型：  number
tilt
类型：  number
zoom
类型：  number