Best Practices für 3D-Karten

Dieser Leitfaden bietet einen detaillierten Überblick über die 3D Maps-Webkomponenten und Überlegungen zur Integration in Ihre Anwendung.

Beispiel für die Suche nach Orten und die Routenplanung.

Hinweise zur Leistung

Damit Interaktivität und visuelle Elemente reibungslos und schnell reagieren, sollten Sie die folgenden Ansätze in Betracht ziehen.

Karte laden

Die Einrichtung für das erste Laden und Rendern der 3D-Karten kombiniert Browserkonfigurationstechniken und Best Practices für die Benutzeroberfläche, um eine optimale Nutzerfreundlichkeit zu erzielen.

• API-Aufruf: Verwenden Sie das asynchrone dynamische Laden von 3D-Karten, um die Maps JavaScript API beim ersten Laden der Seite zu laden.
• Bibliotheken: Laden Sie Bibliotheken programmatisch, wenn sie benötigt werden, z. B. google.maps.importLibrary("maps3d"). Wenn Sie Webkomponenten wie <gmp-map-3d> direkt auf Ihrer HTML-Seite mit direktem Script-Laden verwenden, werden die Bibliotheken automatisch zum richtigen Zeitpunkt geladen.
• Grundkartenfunktionen verwalten:Mit einer benutzerdefinierten „mapId“ können Sie POIs in der Grundkarte (HYBRID-Modus) filtern und ihre Dichte steuern, insbesondere wenn die Anwendung eigene benutzerdefinierte Elemente wie Markierungen oder Polylinien enthält. So werden visuelle Unordnung und potenzielle Überschneidungen vermieden. Alternativ können Sie Funktionen für Vektorkacheln der Basiskarte wie POIs, Straßen-Polylinien, Straßennamen und Straßennamen (SATELLITE-Modus) deaktivieren.
• Ereignisse: Warten Sie auf die Ereignisse gmp-steadystate oder gmp-error, um die nachfolgende Logik zu erstellen, z. B. das Laden von Markierungen oder das Animieren der Kamera.

Hintergrund-Canvas > Minimierte Kacheln > Geländemesh > Oberflächenmesh (z.B. Gebäude) > POIs und Straßenbeschriftungen, benutzerdefinierte Elemente werden parallel geladen (Markierungen, 3D-Modelle usw.)

• Nutzerinteraktion:Warten Sie auf das Ereignis gmp-steadystate, bevor Sie Änderungen am Inhalt der Karte vornehmen. Wenn ein Nutzer mit der Karte interagiert (schwenkt, zoomt), bevor das erste gmp-steadystate-Ereignis ausgelöst wird, wird das Ereignis erst ausgelöst, wenn der Nutzer die Interaktion beendet. Vermeiden Sie es, Overlayinhalte (z. B. Markierungen oder Polygone) anzuzeigen oder zu aktualisieren, während der Nutzer die Karte schwenkt oder zoomt. Dazu können Sie auf gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange und gmp-tiltchange warten.

• Verwenden Sie requestAnimationFrame() (rAF) für kontinuierliche Updates und trennen Sie rechenintensive Berechnungen strikt von Zeichenaufrufen.

  • rAF verwenden: Synchronisiert Updates mit der Bildwiederholrate des Browsers für flüssige Animationen mit 60 FPS und einen geringeren Stromverbrauch.
  • Vermeiden Sie intensive Zeichenvorgänge: Führen Sie während des letzten Updates keine rechenintensiven Aufgaben aus, die nicht mit dem Zeichnen zusammenhängen.
  • Separate Logik: Führen Sie alle rechenintensiven Logikvorgänge vor minimalen Webkomponenten-Aktualisierungsaufrufen innerhalb der rAF-Schleife aus.

• Anfangseinstellungen für die Szene: <gmp-map-3d> Kameraeinstellungen wie „Neigen“ wirken sich auf die Ladegeschwindigkeit aus. Je stärker die Szene gezoomt oder geneigt wird, desto detailliertere Polygone werden angezeigt und müssen geladen werden. Der Detaillierungsgrad hängt auch vom Ort ab (z.B. Stadt mit vielen Gebäuden im Vergleich zu ländlicher Umgebung mit nur natürlichen Merkmalen).

  • Bevorzugen Sie weniger stark gezoomte Ansichten (aus großer Höhe) ohne oder mit nur geringer Neigung.
  • Fügen Sie der Karte bounds (Beispiel) hinzu, damit Nutzer sich auf einen bestimmten Bereich konzentrieren und die Kacheln vollständig geladen werden können.

• Visuelle Elemente für Preloader: <gmp-map-3d> wird zwar extrem schnell geladen, aber es kann einige Zeit dauern, bis es für Nutzer mit Low-End-Geräten (niedrige GPU) oder geringer Bandbreite (langsames 4G) in voller Auflösung angezeigt wird. In diesem Fall können Sie einen Preloader mit Bild, Animation oder Text erstellen, während die 3D-Szene im Hintergrund geladen wird. Unten finden Sie das zu verwendende Schlüsselereignis:

Beispiel für Preloader

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• 2D-Karte:
  • Alternativ kann diesen Nutzern eine 2D-Karte (SATELLITE) mit Ihren Geodaten wie Markierungen angezeigt werden.

• Alternativ kann während des Ladens eine ergänzende 2D-statische Karte im SATELLITE-Modus angezeigt werden, damit Nutzer sich einen bestimmten Ort besser vorstellen können.

Hinweis :Die 2D- und 3D-Darstellung jeder Karte wird derzeit separat abgerechnet. Rendern Sie die zweite Karte daher nur, wenn Nutzer mit ihr interagieren möchten.

Leistung und Verwaltung visueller Elemente

3D Maps bietet verschiedene Möglichkeiten, visuelle Elemente wie Markierungen, Polylinien und 3D-Modelle mit optimaler Leistung und minimaler Rendering-Zeit darzustellen, auch bei einer größeren Anzahl von visuellen Elementen.

Markierungen

Beispielszenario: 150–300 ms zum Laden von 300 Markierungen mit 41 verschiedenen SVG-Markierungs-Glyphen (moderner Laptop: macOS M3 Pro, Chrome)

• Optimale Anpassungsoption:
  • PinElement:Für grundlegende Änderungen an Markierungen (Farbe, Skalierung, Rahmen, Textsymbol) verwenden Sie das Element <gmp-pin> oder die Klasse PinElement. Dies ist die leistungsstärkste Anpassungsmethode.
  • HTMLImageElement- oder SVGElement-Marker sparsam verwenden:Verwenden Sie sie für mehr Anpassungsmöglichkeiten, z. B. zum Hinzufügen von Transparenz oder zum Einfügen eines Bildes wie eines Symbols in ein SVGElement (erfordert Base64-Codierung). Sie werden beim Laden gerastert und verursachen einen Leistungsaufwand. HTMLImageElement und SVGElement müssen in ein <template>-Element eingeschlossen werden, bevor sie dem Standardslot von Marker3DElement zugewiesen werden.
  • Das Hinzufügen von einfachem HTML oder CSS ist derzeit nicht möglich.
• Konfliktverhalten verwalten: Nutzen Sie die Eigenschaft collisionBehavior der Markierung. Legen Sie das Verhalten für wichtige Markierungen, die immer sichtbar sein müssen, entsprechend fest. Weniger wichtige Markierungen können ausgeblendet werden, um die Karte übersichtlicher zu gestalten, insbesondere bei hohen Zoomstufen.
• Nur wichtige POIs: Verwenden Sie drawsWhenOccluded (oder legen Sie die Eigenschaft programmatisch fest) nur für Markierungen, die unbedingt durch Gebäude oder Gelände hindurch sichtbar sein müssen, z.B. ein Rettungsziel, eine unterirdische Versorgungsleitung oder der Avatar eines Nutzers.
• Verdeckung testen:Da die Karte in 3D dargestellt wird, können Markierungen durch Gebäude oder Gelände verdeckt werden. Testen Sie verschiedene Kameraperspektiven und Markierungshöhen, damit wichtige POIs sichtbar bleiben. Alternativ können Sie eine Logik implementieren, um Sichtbarkeit und Höhe anzupassen, wenn sie verdeckt werden.
• Höhe nutzen:In 3D-Karten sollte für Markierungen die Position mit einem Höhenwert verwendet werden. Verwenden Sie für Markierungen, die mit dem Gelände oder Gebäuden verknüpft sind, „altitudeMode: 'RELATIVE_TO_GROUND'“, „'RELATIVE_TO_MESH'“ oder ähnliche Einstellungen, damit die Markierung richtig verankert wird, wenn die Karte geneigt oder gedreht wird.

Polygone und Polylinien

Beispielszenario: 100–150 ms zum Laden von 1.000 Polygonen (moderner Laptop: macOS M3 Pro, Chrome)

• Geometrie vereinfachen: Wenden Sie vor dem Rendern einen Vereinfachungsalgorithmus auf Ihre Pfaddaten an. Dadurch wird die Anzahl der Eckpunkte reduziert, während die allgemeine Form beibehalten wird. Das verbessert die Rendering-Geschwindigkeit erheblich, insbesondere bei komplexen Grenzen oder Routen.
• Dezimierung nach Zoomstufe: Bei sehr großen Datasets sollten Sie Geometrie mit höherer Detailgenauigkeit nur laden, wenn der Nutzer in den Bereich hineingezoomt hat. Bei einer niedrigen Zoomstufe ist nur eine stark vereinfachte Version der Polylinie oder des Polygons erforderlich.
• Vorab berechnen für extrudierte Polygone: Wenn Ihre Polygone extrudiert sind (extruded: true), definieren die Pfaddaten ein 3D-Volumen (ein Mesh). Die Verarbeitung komplexer Polygone mit vielen Eckpunkten ist rechenintensiv. Die Quelldaten für Ihre Polygone sollten so einfach wie möglich sein.
• Leistung von Polylinien und Polygonen testen:Wenn Sie zahlreiche oder komplexe Polylinien/Polygone hinzufügen, insbesondere wenn sie für 3D extrudiert werden, achten Sie darauf, dass dadurch keine Frame-Rate-Einbrüche entstehen. Begrenzen Sie die Anzahl der Knoten oder verwenden Sie bei Bedarf Vereinfachungsalgorithmen.
• Wenn Sie eine Form aktualisieren, ändern Sie das gesamte „path“-Array in einem einzigen Vorgang, anstatt einzelne Elemente zu durchlaufen und zu ändern. Ein einzelner Zuweisungsvorgang (z.B. polyline.path = newPathArray;) ist viel effizienter als mehrere iterative Aktualisierungen.
• Extrudierte Polylines nach Möglichkeit vermeiden: Polylines können zwar mit einem Höhenwert im 3D-Raum platziert werden, das Extrudieren einer Polyline (z.B. durch Angabe einer Strichstärke und eines großen Höhenbereichs) kann jedoch grafisch aufwendig sein. Verwenden Sie nach Möglichkeit 2D-Polylinien auf dem Boden (RELATIVE_TO_GROUND) oder eine minimale Strichstärke, um die Leistung zu verbessern.
• Verwenden Sie drawsOccludedSegments nur für wichtige Routingelemente. Hintergrund- oder Kontextformen sollten auf natürliche Weise durch die 3D-Geometrie der Karte verdeckt werden. Das Einblenden nicht kritischer ausgeblendeter Geometrie erhöht die Rendering-Komplexität unnötig.

3D-Modelle

Das Rendern von .glb-Dateien für 3D-Modelle und die Interaktivität, z. B. das gmp-click-Ereignis, sind in <gmp-map-3d> sehr schnell.

Beispielszenario: Es dauert etwa 2 Sekunden, bis 1.000 Vorkommen eines leichten 3D-Modells (200 KB) angezeigt werden, das sich auf einem Pfad bewegt. (moderner Laptop: macOS M3 Pro, Chrome)

• Dateigröße durch Komprimierung minimieren: Damit die Inhalte schnell geladen werden, insbesondere in Mobilfunknetzen, sollten komplexe .glb-Modelldateien unter 5 MB groß sein (idealerweise noch kleiner). Die primäre Methode hierfür ist die Draco-Komprimierung der Mesh-Daten in Ihren GLB-Dateien. Dadurch kann die Dateigröße erheblich reduziert werden (oft um mehr als 50%) und es kommt nur zu einem minimalen Verlust der visuellen Qualität.
• Modellausgangspunkt zentrieren:Achten Sie darauf, dass die 3D-Modellierungssoftware das Modell mit dem Ausgangspunkt (Punkt 0, 0, 0) in der Mitte der Basis des Modells exportiert. Dadurch wird die Positionierung und Drehung auf der Karte vereinfacht und das Modell wird korrekt an den Breiten- und Längenkoordinaten verankert.
• CORS verwalten: Wenn Ihre Modelldateien auf einer anderen Domain oder einem anderen CDN als Ihre Webanwendung gehostet werden, müssen Sie den Hostingserver so konfigurieren, dass er die erforderlichen CORS-Header (Cross-Origin Resource Sharing) enthält, z.B. Access-Control-Allow-Origin: *). Andernfalls kann die Karte das Modell nicht laden.