WebGL

WebGLOverlayView class

google.maps.WebGLOverlayView classe

La visualizzazione sovrapposta WebGL fornisce l'accesso diretto allo stesso contesto di rendering WebGL utilizzato da Google Maps Platform per eseguire il rendering della mappa base vettoriale. Questo utilizzo di un contesto di rendering condiviso offre vantaggi come l'occlusione della profondità con la geometria degli edifici 3D e la possibilità di sincronizzare i contenuti 2D/3D con il rendering della basemap.

Con la visualizzazione sovrapposta WebGL puoi aggiungere contenuti alle tue mappe utilizzando direttamente WebGL o librerie grafiche popolari 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) per attivare il metodo onRemove(). Il metodo setMap() può essere chiamato al momento della costruzione o in qualsiasi momento successivo in cui l'overlay deve essere visualizzato nuovamente dopo la rimozione. Il metodo onDraw() verrà quindi chiamato ogni volta che una proprietà della mappa cambia e potrebbe modificare la posizione dell'elemento, ad esempio lo zoom, il centro o il tipo di mappa. WebGLOverlayView può essere aggiunto solo a una mappa vettoriale con un MapOptions.mapId (incluse le mappe impostate su RenderingType.VECTOR MapOptions.renderingType e che utilizzano Map.DEMO_MAP_ID come MapOptions.mapId).

Questo corso si estende MVCObject.

Accesso chiamando il numero const {WebGLOverlayView} = await google.maps.importLibrary("maps").
Consulta 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 che venga disegnato 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 di rendering viene perso per qualsiasi motivo ed è qui che devi pulire 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 quando il contesto di rendering è disponibile. Utilizzalo per inizializzare o associare qualsiasi stato WebGL, ad esempio shader o oggetti buffer.
onDraw
onDraw(options)
Parametri: 
  • options:  WebGLDrawOptions che consentono agli sviluppatori di eseguire il rendering dei contenuti su una basemap Google associata.
Valore restituito:nessuno
Implementa questo metodo per disegnare i contenuti WebGL direttamente sulla mappa. Tieni presente che se l'overlay necessita di un nuovo frame, chiama WebGLOverlayView.requestRedraw.
onRemove
onRemove()
Parametri: nessuno
Valore restituito:nessuno
Questo metodo viene chiamato quando l'overlay viene rimosso dalla mappa con WebGLOverlayView.setMap(null) ed è il punto in cui 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 gli aggiornamenti dello stato GL al di fuori del frame di animazione di rendering.
requestRedraw
requestRedraw()
Parametri: nessuno
Valore restituito:nessuno
Attiva il ridisegno di un frame della mappa.
requestStateUpdate
requestStateUpdate()
Parametri: nessuno
Valore restituito:nessuno
Attiva l'aggiornamento dello stato GL della mappa.
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.
Ereditato: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Interfaccia WebGLDrawOptions

google.maps.WebGLDrawOptions interfaccia

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

WebGLStateOptions interfaccia

google.maps.WebGLStateOptions interfaccia

Opzioni per lo stato GL.
gl
Il WebGLRenderingContext su cui eseguire il rendering di questo WebGLOverlayView.

Interfaccia CoordinateTransformer

google.maps.CoordinateTransformer interfaccia

Questa interfaccia fornisce metodi pratici per generare matrici da utilizzare per il rendering di scene WebGL sopra la mappa base di Google.

Nota: un riferimento a questo oggetto non deve essere mantenuto al di fuori dell'ambito della chiamata WebGLOverlayView.onDraw di incapsulamento.
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 che contiene un array scalare XYZ da applicare all'asse principale.
Valore restituito:  Float64Array Matrice MVP da utilizzare con WebGL.
getCameraParams
getCameraParams()
Parametri: nessuno
Valore restituito: parametri della videocamera CameraParams

CameraParams interfaccia

google.maps.CameraParams interfaccia

Utilizzato per recuperare i parametri della videocamera, ad esempio quelli della videocamera GL utilizzata per WebGLOverlayView.

Questa interfaccia estende CameraOptions.

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