WebGL

Classe WebGLOverlayView

google.maps.WebGLOverlayView corso

La visualizzazione sovrapposta WebGL fornisce 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 mappa di base.

Con la visualizzazione sovrapposta di 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 creazione o in qualsiasi momento successivo quando l'overlay deve essere mostrato di nuovo dopo la rimozione. Il metodo onDraw() verrà chiamato ogni volta che cambia una proprietà della mappa che 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).

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 del disegno dell'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 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 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 consente agli sviluppatori di eseguire il rendering dei contenuti in una mappa di base di Google associata.
Valore restituito:nessuno
Implementa questo metodo per disegnare contenuti WebGL direttamente sulla mappa. Tieni presente che se l'overlay richiede il disegno 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 è qui che devi rimuovere tutti gli oggetti intermedi. Questo metodo deve essere implementato per il rendering.
onStateUpdate
onStateUpdate(options)
Parametri: 
  • options:  WebGLStateOptions che consente 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 di animazione del rendering.
requestRedraw
requestRedraw()
Parametri: nessuno
Valore restituito:nessuno
Attiva la mappa per ridisegnare un frame.
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 contesto di rendering WebGL su cui eseguire il rendering di questa visualizzazione in overlay WebGL.
transformer
La trasformazione della matrice dallo spazio della fotocamera alle coordinate di latitudine/longitudine.

Interfaccia WebGLStateOptions

google.maps.WebGLStateOptions interfaccia

Opzioni di stato GL.
gl
Il contesto di rendering WebGL su cui eseguire il rendering di questa visualizzazione in overlay WebGL.

Interfaccia CoordinateTransformer

google.maps.CoordinateTransformer interfaccia

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

Nota: un riferimento a questo oggetto non deve essere mantenuto al di fuori dell'ambito della chiamata WebGLOverlayView.onDraw incapsulante.
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 cardinale.
Valore restituito:  Float64Array matrice MVP da utilizzare con WebGL.
getCameraParams
getCameraParams()
Parametri: nessuno
Valore restituito: parametri della fotocamera CameraParams

Interfaccia CameraParams

google.maps.CameraParams interfaccia

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

Questa interfaccia estende CameraOptions.

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