Best Practices für 3D-Karten

In diesem Leitfaden finden Sie detaillierte Informationen zu 3D Maps-Webkomponenten und zu den Aspekten, die Sie bei der Einbindung in Ihre Anwendung berücksichtigen sollten.

Beispiel für die Suche nach Orten und Routen

Hinweise zur Leistung

Damit Interaktivität und visuelle Elemente reibungslos und schnell funktionieren, sollten Sie die folgenden Ansätze berücksichtigen.

Karte laden

Die Ersteinrichtung zum Laden und Rendern von 3D-Karten kombiniert Browserkonfigurationstechniken und Best Practices für die Benutzeroberfläche, um eine optimale Nutzererfahrung zu ermöglichen.

• API-Ladevorgang: Verwenden Sie das asynchrone dynamische Laden von 3D-Karten, um die Maps JavaScript API beim ersten Seitenaufbau zu laden.
• Bibliotheken: Laden Sie Bibliotheken bei Bedarf programmatisch, z. B. google.maps.importLibrary("maps3d"). Wenn Sie Webkomponenten wie <gmp-map-3d> direkt auf Ihrer HTML-Seite mit direktem Laden von Scripts verwenden, werden die Bibliotheken automatisch zum richtigen Zeitpunkt geladen.
• Basiskarten-Elemente verwalten:Mit einer benutzerdefinierten Karten-ID können Sie POIs auf der Basiskarte filtern (HYBRID-Modus) 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 Vektorkachel-Features der Basiskarte wie POIs, Straßenpolylinien, Straßennamen und Straßennamen (SATELLITE-Modus) deaktivieren.
• Ereignisse: Sie können auf die Ereignisse gmp-steadystate oder gmp-error warten, um die nachfolgende Logik zu erstellen, z. B. das Laden von Markierungen oder das Animieren der Kamera.

Hintergrund-Canvas > Minimierte Kacheln > Geländegitternetz > Oberflächengitternetz (z.B. Gebäude) > POIs und Straßenlabels, parallel geladene benutzerdefinierte Elemente (Markierungen, 3D-Modelle usw.)

• Nutzerinteraktion:Warten Sie auf das Ereignis gmp-steadystate, bevor Sie Änderungen am Inhalt der Karte vornehmen. Wenn ein Nutzer vor dem ersten gmp-steadystate-Ereignis mit der Karte interagiert (schwenkt, zoomt), wird das Ereignis erst ausgelöst, wenn der Nutzer die Interaktion beendet. Vermeiden Sie es, Overlay-Inhalte (wie Markierungen oder Polygone) anzuzeigen oder zu aktualisieren, während der Nutzer die Karte schwenkt oder zoomt. Verwenden Sie dazu die Ereignisse gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange und gmp-tiltchange.

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

  • rAF verwenden: Synchronisiert Aktualisierungen mit der Anzeigerate des Browsers für flüssige Animationen mit 60 fps und reduzierten Energieverbrauch.
  • Komplexe Zeichenvorgänge vermeiden: Führe während der letzten Aktualisierung keine komplexen Aufgaben aus, die nicht mit dem Zeichnen zusammenhängen.
  • Separate Logik: Führen Sie alle rechenintensiven Logikvorgänge vor den minimalen Webkomponenten-Aktualisierungsaufrufen innerhalb der rAF-Schleife aus.

• Anfängliche Szeneneinstellungen: <gmp-map-3d>-Kameraeinstellungen wie die Neigung wirken sich auf die Ladegeschwindigkeit aus. Je stärker die Szene herangezoomt oder geneigt wird, desto detailliertere Polygone werden angezeigt und müssen geladen werden. Der Detailgrad hängt auch vom Standort ab (z.B. Stadt mit vielen Gebäuden im Vergleich zu ländlicher Gegend mit nur natürlichen Merkmalen).

  • Bevorzugen Sie weniger herangezoomte (hohe Höhe), niedrige oder nicht geneigte Ansichten.
  • Fügen Sie der Karte Grenzen (Beispiel) hinzu, damit sich Nutzer auf einen bestimmten Bereich konzentrieren und die Kacheln vollständig geladen werden können.

• Preloader-Visual: <gmp-map-3d> wird zwar extrem schnell geladen, es kann jedoch einige Zeit dauern, bis es bei Nutzern 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 einem Bild, einer Animation oder Text erstellen, während die 3D-Szene im Hintergrund geladen wird. Siehe Schlüsselereignis unten:

Beispiel für einen 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:
  • Diesen Nutzern kann eine alternative 2D-Karte (SATELLITE) bereitgestellt werden, die weiterhin Ihre Geodaten wie Markierungen enthält.

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

Hinweis: Jedes Laden einer 2D- oder 3D-Karte wird derzeit separat abgerechnet. Rendern Sie die zweite Karte daher nur, wenn Nutzer damit interagieren möchten.

Leistung und Verwaltung visueller Elemente

3D Maps bietet mehrere Möglichkeiten, visuelle Elemente wie Markierungen, Polylinien und 3D-Modelle mit optimaler Leistung und minimaler Renderingzeit darzustellen, selbst bei größeren Datenmengen.

Markierungen

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

• Optimale Anpassung:
  • 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-Markierungen sparsam verwenden:Verwenden Sie sie für weitere Anpassungen, z. B. um Transparenz hinzuzufügen oder ein Bild wie ein Symbol in ein SVGElement einzufügen (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 Standard-Slot des Marker3DElement zugewiesen werden.
  • Das Hinzufügen von einfachem HTML oder CSS ist derzeit nicht möglich.
• Konfliktverhalten verwalten: Nutzen Sie die Property collisionBehavior der Markierung. Für wichtige Markierungen, die immer sichtbar sein müssen, legen Sie das Verhalten entsprechend fest. Weniger wichtige Markierungen sollten ausgeblendet werden, damit die Karte übersichtlich bleibt, insbesondere bei hohen Zoomstufen.
• Nur wichtige POIs: Verwenden Sie drawsWhenOccluded (oder legen Sie die Property programmatisch fest) nur für Markierungen, die unbedingt durch Gebäude oder Gelände hindurch sichtbar sein müssen (z.B. ein Rettungsziel, eine vergrabene Versorgungsleitung oder der Avatar eines Nutzers).
• Verdeckung testen:Da die Karte 3D-Inhalte enthält, können Markierungen durch Gebäude oder Gelände verdeckt werden. Testen Sie verschiedene Kamerawinkel und Markierungshöhen, um sicherzustellen, dass wichtige POIs sichtbar bleiben, oder implementieren Sie eine Logik, um die Sichtbarkeit und Höhe anzupassen, wenn sie verdeckt sind.
• Höhe nutzen:In 3D-Karten sollten Markierungen die Position mit einem Höhenwert verwenden. 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 beim Neigen oder Drehen der Karte richtig verankert 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. Die Renderinggeschwindigkeit wird so drastisch verbessert, insbesondere bei komplexen Grenzen oder Routen.
• Dezimierung nach Zoomstufe: Bei sehr großen Datasets sollten Sie Geometrien mit höherem Detailgrad nur dann 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 viele oder komplexe Polylinien/Polygone hinzufügen, insbesondere wenn sie für 3D extrudiert werden, sollten Sie darauf achten, dass sie nicht zu einem Abfall der Framerate führen. Begrenzen Sie die Anzahl der Eckpunkte oder verwenden Sie bei Bedarf Vereinfachungsalgorithmen.
• Wenn Sie eine Form aktualisieren, ändern Sie das gesamte Pfad-Array in einem einzigen Vorgang, anstatt einzelne Elemente in einer Schleife zu ändern. Ein einzelner Zuweisungsvorgang (z.B. polyline.path = newPathArray;) ist viel effizienter als mehrere iterative Aktualisierungen.
• Extrudierte Polylinien vermeiden (wo möglich): Polylinien können zwar einen Höhenwert verwenden, um im 3D-Raum platziert zu werden, aber das Extrudieren einer Polylinie (z.B. durch Angabe einer Strichbreite und einer großen Höhenspanne) kann grafisch sehr aufwendig sein. Verwenden Sie nach Möglichkeit 2D-Polylinien auf dem Boden (RELATIVE_TO_GROUND) oder eine minimale Strichbreite, um die Leistung zu verbessern.
• Verwenden Sie drawsOccludedSegments nur für wichtige Routenelemente. Hintergrund- oder Kontextformen können von der 3D-Geometrie der Karte verdeckt werden. Das Anzeigen nicht kritischer ausgeblendeter Geometrie erhöht die Rendering-Komplexität unnötig.

3D-Modelle

Das Rendern von 3D-Modellen im GLB-Format 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 einfachen 3D-Modells (200 KB) angezeigt werden, das sich entlang eines Pfads bewegt. (moderner Laptop: macOS M3 Pro, Chrome)

• Dateigröße durch Komprimierung minimieren: Damit die Dateien schnell geladen werden, insbesondere in Mobilfunknetzen, sollten komplexe GLB-Modelldateien unter 5 MB groß sein (idealerweise weniger). Die wichtigste Methode, um dies zu erreichen, ist die Anwendung der Draco-Komprimierung auf die Mesh-Daten in Ihren .glb-Dateien. Dadurch kann die Dateigröße bei minimalem Verlust der visuellen Qualität erheblich reduziert werden (oft um mehr als 50%).
• Modellursprung zentrieren: Achten Sie darauf, dass die 3D-Modellierungssoftware das Modell so exportiert, dass der Ursprung (Punkt 0, 0, 0) in der Mitte der Modellbasis liegt. Das vereinfacht die Positionierung und Drehung auf der Karte und sorgt dafür, dass das Modell korrekt an den Breiten- und Längengradkoordinaten verankert wird.
• CORS verwalten: Wenn Ihre Modelldateien auf einer anderen Domain oder einem anderen CDN als Ihre Webanwendung gehostet werden, müssen Sie den Hosting-Server 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.