WebGL

Clase WebGLOverlayView

class google.maps.WebGLOverlayView extends MVCObject
library "maps"

La vista superpuesta de WebGL brinda acceso directo al mismo contexto de renderización de WebGL que usa Google Maps Platform para renderizar el mapa base de vectores. Este uso de un contexto de renderización compartido proporciona beneficios, como la oclusión de profundidad con la geometría de edificios 3D y la capacidad de sincronizar el contenido 2D y 3D con la renderización del mapa base.

Con la vista superpuesta de WebGL, puedes agregar contenido a tus mapas directamente con WebGL o con las bibliotecas de gráficos populares, como Three.js o deck.gl. Para usar la superposición, puedes extender google.maps.WebGLOverlayView y proporcionar una implementación para cada uno de los siguientes hooks del ciclo de vida: WebGLOverlayView.onAdd, WebGLOverlayView.onContextRestored, WebGLOverlayView.onDraw, WebGLOverlayView.onContextLost y WebGLOverlayView.onRemove.

Debes llamar a WebGLOverlayView.setMap con un objeto Map válido para activar la llamada al método onAdd() y a setMap(null) para activar el método onRemove(). Se puede llamar al método setMap() en el momento de la construcción o en cualquier momento posterior cuando se deba volver a mostrar la superposición después de quitarla. Luego, se llamará al método onDraw() cada vez que cambie una propiedad del mapa que pueda modificar la posición del elemento, como el zoom, el centro o el tipo de mapa. La WebGLOverlayView solo se puede agregar a un mapa de vectores que tenga un MapOptions.mapId (incluidos los mapas configurados en RenderingType.VECTOR MapOptions.renderingType y que usen Map.DEMO_MAP_ID como MapOptions.mapId).

const {WebGLOverlayView} = await google.maps.importLibrary("maps");
WebGLOverlayView
WebGLOverlayView()
Parámetros: Ninguno
Crea un WebGLOverlayView.
getMap
getMap()
Parámetros: Ninguno
Valor de retorno: Map|null|undefined
onAdd
onAdd()
Parámetros: Ninguno
Valor de retorno: Ninguno
Implementa este método para recuperar o crear estructuras intermedias de datos antes de que se dibuje la superposición que no requieran acceso inmediato al contexto de renderización de WebGL. Este método se debe implementar para renderizar.
onContextLost
onContextLost()
Parámetros: Ninguno
Valor de retorno: Ninguno
Se llama a este método cuando se pierde el contexto de renderización por algún motivo, y es allí donde debes borrar todos los estados de GL preexistentes, porque ya no son necesarios.
onContextRestored
onContextRestored(options)
Parámetros:
  • options: WebGLStateOptions que permiten a los desarrolladores restablecer el contexto de GL.
Valor de retorno: Ninguno
Se llama a este método una vez que el contexto de renderización está disponible. Úsalo para inicializar o vincular cualquier estado de WebGL, como sombreadores u objetos de búfer.
onDraw
onDraw(options)
Parámetros:
  • options: WebGLDrawOptions que permiten a los desarrolladores renderizar contenido en un mapa base de Google asociado.
Valor de retorno: Ninguno
Implementa este método para dibujar contenido de WebGL directamente en el mapa. Ten en cuenta que, si la superposición necesita que se dibuje un fotograma nuevo, debes llamar a WebGLOverlayView.requestRedraw.
onRemove
onRemove()
Parámetros: Ninguno
Valor de retorno: Ninguno
Se llama a este método cuando se quita la superposición del mapa con WebGLOverlayView.setMap(null) y es el lugar de donde debes quitar todos los objetos intermedios. Este método se debe implementar para renderizar.
onStateUpdate
onStateUpdate(options)
Parámetros:
  • options: WebGLStateOptions que permiten a los desarrolladores restablecer el contexto de GL.
Valor de retorno: Ninguno
Implementa este método para controlar cualquier actualización de estado de GL fuera del fotograma de animación de renderización.
requestRedraw
requestRedraw()
Parámetros: Ninguno
Valor de retorno: Ninguno
Activa el mapa para volver a dibujar un fotograma.
requestStateUpdate
requestStateUpdate()
Parámetros: Ninguno
Valor de retorno: Ninguno
Activa el mapa para actualizar el estado de GL.
setMap
setMap([map])
Parámetros:
  • map: Map optional Es el mapa para acceder al div, al modelo y al estado de la vista.
Valor de retorno: Ninguno
Agrega la superposición al mapa.
Heredados: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Interfaz WebGLDrawOptions

interfaz google.maps.WebGLDrawOptions

Opciones de dibujo.
gl
Es el WebGLRenderingContext en el que se renderizará este WebGLOverlayView.
transformer
Es la transformación de la matriz del espacio de la cámara a las coordenadas de latitud y longitud.

Interfaz WebGLStateOptions

interfaz google.maps.WebGLStateOptions

Opciones de estado de GL.
gl
Es el WebGLRenderingContext en el que se renderizará este WebGLOverlayView.

Interfaz CoordinateTransformer

interfaz google.maps.CoordinateTransformer

Esta interfaz proporciona métodos de conveniencia para generar matrices que se usarán en la renderización de escenas de WebGL sobre el mapa base de Google.

Nota: No se debe mantener una referencia a este objeto fuera del alcance de la llamada WebGLOverlayView.onDraw encapsulada.
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
Parámetros:
  • latLngAltitude: LatLngAltitude|LatLngAltitudeLiteral Latitud, longitud y altitud
  • rotations: Float32Array optional: Es un array que contiene un ángulo de rotación de Euler en grados, en la convención XYZ.
  • scale: Float32Array optional: Es un array que contiene un array escalar XYZ para aplicar al eje cardinal.
Valor que se muestra: Matriz de MVP Float64Array para usar con WebGL.
getCameraParams
getCameraParams()
Parámetros: Ninguno
Valor que se devuelve: Parámetros de la cámara CameraParams

Interfaz CameraParams

interface google.maps.CameraParams extends CameraOptions

Se usa para recuperar los parámetros de la cámara, como los de la cámara de GL que se usa para el WebGLOverlayView.
center
Tipo: LatLng
heading
Tipo: number
tilt
Tipo: number
zoom
Tipo: number