WebGL

Klasse WebGLOverlayView

Klasse google.maps.WebGLOverlayView erweitert MVCObject
Bibliothek "maps"

Die WebGL-Overlay-Ansicht bietet direkten Zugriff auf denselben WebGL-Kontext, den die Google Maps Platform zum Rendern der Vektorbasiskarte verwendet. Die Verwendung eines gemeinsamen Renderingkontexts bietet verschiedene Vorteile wie Tiefenverdeckung durch 3D-Gebäudegeometrie und die Möglichkeit, 2D-/3D-Inhalte mit Basiskarten-Rendering zu synchronisieren.

Mit WebGL Overlay View lassen sich Ihren Karten Inhalte hinzufügen. Dazu können Sie WebGL direkt oder gängige Grafikbibliotheken wie Three.js oder deck.gl verwenden. Wenn Sie das Overlay verwenden möchten, können Sie google.maps.WebGLOverlayView erweitern und eine Implementierung für jeden der folgenden Lebenszyklus-Hooks bereitstellen: WebGLOverlayView.onAdd, WebGLOverlayView.onContextRestored, WebGLOverlayView.onDraw, WebGLOverlayView.onContextLost und WebGLOverlayView.onRemove.

Sie müssen WebGLOverlayView.setMap mit einem gültigen Map-Objekt aufrufen, um den Aufruf der onAdd()-Methode auszulösen, und setMap(null), um die onRemove()-Methode auszulösen. Die Methode setMap() kann beim Erstellen oder jederzeit danach aufgerufen werden, wenn das Overlay nach dem Entfernen wieder angezeigt werden soll. Die Methode onDraw() wird dann immer aufgerufen, wenn sich eine Karteneigenschaft ändert, die die Position des Elements beeinflussen könnte, z. B. Zoom, Mittelpunkt oder Kartentyp. „WebGLOverlayView“ kann nur einer Vektorkarte mit MapOptions.mapId hinzugefügt werden. Das gilt auch für Karten, die auf RenderingType.VECTOR MapOptions.renderingType festgelegt sind und Map.DEMO_MAP_ID als MapOptions.mapId verwenden.

const {WebGLOverlayView} = await google.maps.importLibrary("maps");
WebGLOverlayView
WebGLOverlayView()
Parameter: Keine
Erstellt ein WebGLOverlayView.
getMap
getMap()
Parameter: Keine
Rückgabewert: Map|null|undefined
onAdd
onAdd()
Parameter: Keine
Rückgabewert: Keiner
Implementieren Sie diese Methode, um vor dem Erstellen des Overlays Zwischendatenstrukturen abzurufen oder zu erstellen, für die kein direkter Zugriff auf den WebGL-Renderingkontext erforderlich ist. Diese Methode muss implementiert werden, damit das Rendering funktioniert.
onContextLost
onContextLost()
Parameter: Keine
Rückgabewert: Keiner
Diese Methode wird aufgerufen, wenn der Renderingkontext aus irgendeinem Grund verloren geht. Hier sollten Sie alle vorhandenen GL-Zustände bereinigen, da sie nicht mehr benötigt werden.
onContextRestored
onContextRestored(options)
Parameter:
  • options: WebGLStateOptions, mit denen Entwickler den GL-Kontext wiederherstellen können.
Rückgabewert: Keiner
Diese Methode wird aufgerufen, sobald der Renderingkontext verfügbar ist. Damit können Sie einen WebGL-Zustand wie Shader oder Pufferobjekte initialisieren oder binden.
onDraw
onDraw(options)
Parameter:
  • options: WebGLDrawOptions, mit denen Entwickler Inhalte auf einer zugehörigen Google-Basiskarte rendern können.
Rückgabewert: Keiner
Implementieren Sie diese Methode, um WebGL-Inhalte direkt auf der Karte zu zeichnen. Wenn für das Overlay ein neuer Frame gezeichnet werden muss, rufen Sie WebGLOverlayView.requestRedraw auf.
onRemove
onRemove()
Parameter: Keine
Rückgabewert: Keiner
Diese Methode wird aufgerufen, wenn das Overlay mit WebGLOverlayView.setMap(null) von der Karte entfernt wird. Hier sollten Sie alle Zwischenobjekte entfernen. Diese Methode muss implementiert werden, damit das Rendering funktioniert.
onStateUpdate
onStateUpdate(options)
Parameter:
  • options: WebGLStateOptions, mit denen Entwickler den GL-Kontext wiederherstellen können.
Rückgabewert: Keiner
Implementieren Sie diese Methode, um alle GL-Zustandsaktualisierungen außerhalb des Rendering-Animationsframes zu verarbeiten.
requestRedraw
requestRedraw()
Parameter: Keine
Rückgabewert: Keiner
Löst das Neuzeichnen eines Frames auf der Karte aus.
requestStateUpdate
requestStateUpdate()
Parameter: Keine
Rückgabewert: Keiner
Löst die Aktualisierung des GL-Zustands der Karte aus.
setMap
setMap([map])
Parameter:
  • map: Map optional Die Karte, um auf das div-Element, das Modell und den Ansichtsstatus zuzugreifen.
Rückgabewert: Keiner
Fügt den Overlay zur Karte hinzu.
Übernommen: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

WebGLDrawOptions-Schnittstelle

Schnittstelle google.maps.WebGLDrawOptions

Zeichenoptionen.
gl
Der WebGLRenderingContext, auf dem diese WebGLOverlayView gerendert werden soll.
transformer
Die Matrixtransformation vom Kameraraum in Breiten- und Längengradkoordinaten.

Schnittstelle WebGLStateOptions

Schnittstelle google.maps.WebGLStateOptions

Optionen für den GL-Zustand.
gl
Der WebGLRenderingContext, auf dem diese WebGLOverlayView gerendert werden soll.

CoordinateTransformer-Schnittstelle

Schnittstelle google.maps.CoordinateTransformer

Diese Schnittstelle bietet praktische Methoden zum Generieren von Matrizen, die zum Rendern von WebGL-Szenen auf der Google-Basiskarte verwendet werden können.

Hinweis: Ein Verweis auf dieses Objekt sollte nicht außerhalb des Bereichs des umschließenden WebGLOverlayView.onDraw-Aufrufs gespeichert werden.
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
Parameter:
  • latLngAltitude: LatLngAltitude|LatLngAltitudeLiteral Breitengrad, Längengrad und Höhe.
  • rotations: Float32Array optional Ein Array, das einen Euler-Rotationswinkel in Grad in der XYZ-Konvention enthält.
  • scale: Float32Array optional: Array, das ein XYZ-Skalararray enthält, das auf die Kardinalachse angewendet werden soll.
Rückgabewert: Float64Array-MVP-Matrix zur Verwendung mit WebGL.
getCameraParams
getCameraParams()
Parameter: Keine
Rückgabewert: CameraParams-Kameraparameter

CameraParams-Schnittstelle

interface google.maps.CameraParams extends CameraOptions

Wird zum Abrufen von Kameraparametern verwendet, z. B. der GL-Kamera, die für die WebGLOverlayView verwendet wird.
center
Typ: LatLng
heading
Typ: number
tilt
Typ: number
zoom
Typ: number