WebGL

Classe WebGLOverlayView

google.maps.WebGLOverlayView classe

La vista sovrapposta WebGL consente di accedere direttamente allo stesso contesto di rendering WebGL utilizzato da Google Maps Platform per eseguire il rendering della mappa base vettoriale. Questo uso di un contesto di rendering condiviso offre vantaggi come l'occlusione della profondità con la geometria di edifici 3D e la possibilità di sincronizzare contenuti 2D/3D con il rendering della mappa base.

Con la visualizzazione sovrapposta WebGL puoi aggiungere contenuti alle tue mappe utilizzando direttamente WebGL o le librerie grafiche più diffuse come Three.js o deck.gl. Per utilizzare l'overlay, puoi estendere google.maps.WebGLOverlayView e fornire un'implementazione per ciascuno dei seguenti hook del ciclo di vita: WebGLOverlayView.onAdd, WebGLOverlayView.onContextRestored, WebGLOverlayView.onDraw, WebGLOverlayView.onContextLost e WebGLOverlayView.onRemove.

Devi chiamare WebGLOverlayView.setMap con un oggetto Map valido per attivare la chiamata al metodo onAdd() e setMap(null) al metodo onRemove(). Il metodo setMap() può essere richiamato al momento della costruzione o in qualsiasi momento successivo, quando l'overlay deve essere visualizzato di nuovo dopo la rimozione. Il metodo onDraw() viene quindi chiamato ogni volta che una proprietà della mappa cambia che potrebbe cambiare la posizione dell'elemento, ad esempio zoom, centro o tipo di mappa. È possibile aggiungere WebGLOverlayView solo a una mappa vettoriale con MapOptions.mapId (incluse le mappe impostate su RenderingType.VECTOR MapOptions.renderingType e utilizzando Map.DEMO_MAP_ID come MapOptions.mapId).

Questa classe estende MVCObject.

Accedi chiamando const {WebGLOverlayView} = await google.maps.importLibrary("maps"). Consulta la sezione Librerie nell'API Maps JavaScript.
WebGLOverlayView
WebGLOverlayView()
Parametri: nessuno
Crea un WebGLOverlayView.
getMap
getMap()
Parametri: nessuno
Valore restituito:  Map|null|undefined
onAdd
onAdd()
Parametri: nessuno
Valore restituito: nessuno
Implementa questo metodo per recuperare o creare strutture di dati intermedie prima di disegnare l'overlay che non richiedono l'accesso immediato al contesto di rendering WebGL. Questo metodo deve essere implementato per il rendering.
onContextLost
onContextLost()
Parametri: nessuno
Valore restituito: nessuno
Questo metodo viene chiamato quando il contesto del rendering viene perso per qualsiasi motivo ed è qui che occorre ripulire qualsiasi stato GL preesistente, poiché non è più necessario.
onContextRestored
onContextRestored(options)
Parametri: 
  • options:  WebGLStateOptions che consentono agli sviluppatori di ripristinare il contesto GL.
Valore restituito: nessuno
Questo metodo viene chiamato una volta che il contesto di rendering è disponibile. Usatelo per inizializzare o associare qualsiasi stato WebGL come gli handle o gli oggetti del buffer.
onDraw
onDraw(options)
Parametri: 
  • options:  WebGLDrawOptions che consentono agli sviluppatori di visualizzare i contenuti in una mappa base di Google associata.
Valore restituito: nessuno
Implementa questo metodo per disegnare contenuti WebGL direttamente sulla mappa. Tieni presente che se è necessario disegnare un nuovo fotogramma dell'overlay, chiama WebGLOverlayView.requestRedraw.
onRemove
onRemove()
Parametri: nessuno
Valore restituito: nessuno
Questo metodo viene richiamato quando l'overlay viene rimosso dalla mappa con WebGLOverlayView.setMap(null) ed è qui che devi rimuovere tutti gli oggetti intermedi. Questo metodo deve essere implementato per il rendering.
onStateUpdate
onStateUpdate(options)
Parametri: 
  • options:  WebGLStateOptions che consentono agli sviluppatori di ripristinare il contesto GL.
Valore restituito: nessuno
Implementa questo metodo per gestire eventuali aggiornamenti dello stato GL al di fuori del frame dell'animazione di rendering.
requestRedraw
requestRedraw()
Parametri: nessuno
Valore restituito: nessuno
Attiva la ridisegnata della mappa per la mappa.
requestStateUpdate
requestStateUpdate()
Parametri: nessuno
Valore restituito: nessuno
Attiva la mappa per aggiornare lo stato GL.
setMap
setMap([map])
Parametri: 
  • map:  Map optional la mappa per accedere allo stato di div, modello e visualizzazione.
Valore restituito: nessuno
Aggiunge l'overlay alla mappa.
Ereditate: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Interfaccia WebGLDrawOptions

Interfaccia google.maps.WebGLDrawOptions

Opzioni di disegno.
gl
Il WebGLRenderingContext su cui eseguire il rendering di questa WebGLOverlayView.
transformer
La trasformazione della matrice dallo spazio della fotocamera alle coordinate di latitudine/longitudine.

Interfaccia WebGLStateOptions

Interfaccia google.maps.WebGLStateOptions

Opzioni stato GL.
gl
Il WebGLRenderingContext su cui eseguire il rendering di questa WebGLOverlayView.

Interfaccia CoordinateTransformer

Interfaccia google.maps.CoordinateTransformer

Questa interfaccia fornisce metodi pratici per generare matrici da utilizzare per eseguire il rendering delle scene WebGL sulla mappa base di Google.

Nota: un riferimento a questo oggetto non deve essere mantenuto al di fuori dell'ambito della chiamata WebGLOverlayView.onDraw che lo incapsula.
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
Parametri: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral Latitudine, longitudine e altitudine.
  • rotations:  Float32Array optional un array contenente un angolo di rotazione di Eulero in gradi, nella convenzione XYZ.
  • scale:  Float32Array optional array contenente un array scalare XYZ da applicare all'asse cardinale.
Valore restituito: matrice MVP Float64Array da utilizzare con WebGL.
getCameraParams
getCameraParams()
Parametri: nessuno
Valore restituito:  CameraParams parametri della fotocamera

Interfaccia di CameraParams

Interfaccia google.maps.CameraParams

Utilizzato per il recupero dei parametri della fotocamera, ad esempio quello della fotocamera GL utilizzata per WebGLOverlayView.

Questa interfaccia estende CameraOptions.

center
Tipo:  LatLng
heading
Tipo:  number
tilt
Tipo:  number
zoom
Tipo:  number