Best Practices für 3D-Karten

In diesem Leitfaden werden die Webkomponenten von 3D Maps und die Überlegungen bei der Einbindung in Ihre Anwendung ausführlich beschrieben.

Beispiel für die Ortsuche und Routenplanung

Hinweise zur Leistung

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

Karte laden

Die anfängliche Lade- und Rendering-Einrichtung von 3D Maps kombiniert Techniken zur Browserkonfiguration und Best Practices für die Benutzeroberfläche, um eine optimale Nutzerfreundlichkeit zu erzielen.

• API-Ladevorgang: Verwenden Sie das asynchrone dynamische Laden von 3D Maps, um die Maps JavaScript API beim ersten Laden der Seite zu laden.
• Bibliotheken: Laden Sie Bibliotheken bei Bedarf programmatisch, z. B. google.maps.importLibrary("maps3d"). Wenn Sie Web Komponenten wie <gmp-map-3d> direkt auf Ihrer HTML-Seite mit direktem Skript Laden, verwenden, werden die Bibliotheken automatisch zum richtigen Zeitpunkt geladen.
• Basiskartenfunktionen verwalten:Verwenden Sie eine benutzerdefinierte mapId, um POIs der Basiskarte zu filtern (HYBRID-Modus) und ihre Dichte zu steuern, insbesondere wenn die Anwendung eigene benutzerdefinierte Elemente wie Markierungen oder Polylinien enthält. So vermeiden Sie visuelle Überlastung und potenzielle Überschneidungen. Alternativ können Sie Vektorkacheln der Basiskarte wie POIs, Polylinien für Straßen, Straßennamen und Adressen deaktivieren (SATELLITE-Modus).
• Ereignisse: Warten Sie auf die Ereignisse gmp-steadystate oder gmp-error , um die nachfolgende Logik zu erstellen, z. B. Markierungen zu laden oder die Kamera zu animieren.

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

• Nutzerinteraktion: Warten Sie auf das gmp-steadystate Ereignis, bevor Sie Änderungen am Karteninhalt vornehmen. Wenn ein Nutzer mit der Karte interagiert (schwenken, zoomen), bevor das erste Ereignis gmp-steadystate ausgelöst wird, wird das Ereignis erst ausgelöst, nachdem der Nutzer die Interaktion beendet hat. Vermeiden Sie es, Overlay-Inhalte (z. B. Markierungen oder Polygone) anzuzeigen oder zu aktualisieren, während der Nutzer die Karte schwenkt oder zoomt. Vermeiden Sie es, Overlay- Inhalte (z. B. Markierungen oder Polygone) anzuzeigen oder zu aktualisieren, indem Sie auf gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange achten.

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

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

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

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

• Visueller Preloader: Während <gmp-map-3d> extrem schnell geladen wird, kann es einige Zeit dauern, bis es für Nutzer mit Geräten der unteren Preisklasse (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. Wichtiges Ereignis zur Verwendung:

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 geografischen Daten wie Markierungen enthält.

• Alternativ kann für Nutzer während des Ladevorgangs eine ergänzende statische 2D-Karte im SATELLITE-Modus angezeigt werden, um einen bestimmten Ort zu visualisieren.

Hinweis: Jedes Laden einer 2D- oder 3D-Karte wird derzeit separat in Rechnung gestellt. Rendern Sie die zweite Karte daher nur, wenn Nutzer damit 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 anzuzeigen, auch bei einer größeren Anzahl von visuellen Elementen.

Markierungen

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

• Optimale Anpassungsmöglichkeiten:
  • PinElement: Verwenden Sie für grundlegende Änderungen an Markierungen (Farbe, Skalierung, Rahmen, Text symbol) das <gmp-pin> Element oder die PinElement Klasse. Dies ist die leistungsstärkste Anpassungsmethode.
  • HTMLImageElement- oder SVGElement-Markierungen sparsam verwenden: Verwenden Sie diese für weitere Anpassungen, 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 Leistungseinbußen. HTMLImageElement und SVGElement müssen in das Element <template> eingeschlossen werden, bevor sie dem Standardslot von Marker3DElement zugewiesen werden.
  • Das Hinzufügen von einfachem HTML oder CSS ist derzeit nicht möglich.
• Kollisionsverhalten verwalten: Nutzen Sie die Eigenschaft collisionBehavior der Markierung. Legen Sie das Verhalten für wichtige Markierungen fest, die immer sichtbar sein müssen. Weniger wichtige Markierungen können ausgeblendet werden, um die Karte übersichtlicher zu gestalten, insbesondere bei hohen Zoomstufen.
• Nur kritische POIs: Verwenden Sie drawsWhenOccluded (oder legen Sie die Eigenschaft programmatisch fest) nur für Markierungen, die unbedingt durch Gebäude oder Gelände sichtbar sein müssen (z.B. ein Rettungsziel, eine vergrabene Versorgungsleitung oder der Avatar eines Nutzers).
• Verdeckung testen:Da die Karte in 3D dargestellt wird, können Markierungen durch Gebäude oder Gelände visuell verdeckt werden. Testen Sie verschiedene Kamerawinkel und Markierungshöhen, um sicherzustellen, dass wichtige POIs sichtbar bleiben. Implementieren Sie gegebenenfalls eine Logik, um 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 korrekt 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. Die Rendering-Geschwindigkeit wird dadurch erheblich verbessert, insbesondere bei komplexen Grenzen oder Routen.
• Dezimierung nach Zoomstufe: Bei sehr großen Datensätzen sollten Sie Geometrien 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 (extruded: true), definieren die Pfaddaten ein 3D-Volumen (ein Mesh). Die Verarbeitung komplexer Polygone mit vielen Eckpunkten ist rechenintensiv. Achten Sie darauf, dass die Quelldaten für Ihre Polygone so einfach wie möglich sind.
• Leistung von Polylinien und Polygonen testen:Wenn Sie zahlreiche oder komplexe Polylinien/Polygone hinzufügen, insbesondere wenn sie für 3D extrudiert werden, prüfen Sie, ob dadurch die Framerate sinkt. Begrenzen Sie gegebenenfalls die Anzahl der Eckpunkte oder verwenden Sie Vereinfachungsalgorithmen.
• Wenn Sie eine Form aktualisieren, ändern Sie das gesamte Array des Pfads 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 Updates.
• Extrudierte Polylinien vermeiden (wenn 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 Festlegen einer Strichstärke und eines großen Höhenbereichs) kann 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 kritische Routing-Elemente. Für Hintergrund- oder Kontextformen können diese auf natürliche Weise durch die 3D-Geometrie der Karte verdeckt werden. Das Anzeigen nicht kritischer, verdeckter Geometrie erhöht die Rendering-Komplexität unnötig.

3D-Modelle

Das Rendern von 3D-Modellen im .glb-Format und die Interaktivität wie das Ereignis gmp-click sind in <gmp-map-3d> sehr schnell.

Beispielszenario: Es dauert etwa 2 Sekunden, bis 1.000 Instanzen eines leichten 3D-Modells (200 KB) angezeigt werden, die sich entlang eines Pfads bewegen. (moderner Laptop: macOS M3 Pro, Chrome)

• Dateigröße mit Komprimierung minimieren: Damit das Laden schnell erfolgt, insbesondere in Mobilfunknetzen, sollten komplexe .glb-Modelldateien unter 5 MB groß sein (idealerweise weniger). Die wichtigste Methode hierfür ist die Anwendung von Draco Komprimierung auf die Mesh-Daten in Ihren .glb-Dateien. Dadurch kann die Dateigröße erheblich reduziert werden (oft um mehr als 50%) ohne wesentlichen Verlust der visuellen Qualität.
• Modellursprung zentrieren:Achten Sie darauf, dass die 3D-Modellierungssoftware das Modell so exportiert, dass der Ursprung (Punkt 0, 0, 0) in der Mitte der Basis des Modells liegt. Dadurch wird die Positionierung und Drehung auf der Karte vereinfacht und das Modell wird korrekt an den Koordinaten für Breiten- und Längengrad verankert.
• CORS verwalten: Wenn Ihre Modelldateien auf einer anderen Domain oder einem anderen CDN als Ihre Webanwendung gehostet werden, müssen Sie den Hostserver 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.