Sprawdzone metody dotyczące Map 3D

W tym przewodniku znajdziesz szczegółowe informacje o komponentach internetowych Map 3D i kwestiach, które należy wziąć pod uwagę podczas integracji z aplikacją.

Przykład wyszukiwania miejsc i wyznaczania tras.

Uwagi dotyczące wydajności

Aby zapewnić płynne i szybkie działanie elementów interaktywnych i wizualnych, rozważ zastosowanie tych metod.

Wczytywanie mapy

Początkowe wczytywanie i renderowanie map 3D łączy techniki konfiguracji przeglądarki i sprawdzone metody dotyczące interfejsu, aby zapewnić optymalne wrażenia użytkownika.

• Wczytywanie interfejsu API: użyj asynchronicznego dynamicznego wczytywania map 3D, aby wczytać Maps JavaScript API podczas początkowego wczytywania strony.
• Biblioteki: wczytuj biblioteki programowo w razie potrzeby, np.google.maps.importLibrary("maps3d"). Jeśli używasz komponentów internetowych, takich jak <gmp-map-3d> bezpośrednio na stronie HTML z bezpośrednim wczytywaniem skryptu, biblioteki zostaną wczytane automatycznie w odpowiednim czasie.
• Zarządzanie elementami mapy podstawowej: używaj niestandardowego identyfikatora mapy, aby filtrować ważne miejsca na mapie podstawowej (tryb HYBRID) i kontrolować ich gęstość, zwłaszcza jeśli aplikacja ma własny zestaw elementów niestandardowych, takich jak znaczniki czy linie łamane. Zapobiega to przeładowaniu wizualnemu i potencjalnemu nakładaniu się elementów. Możesz też wyłączyć funkcje wektorowych fragmentów mapy podstawowej, takie jak ciekawe miejsca, linie łamane dróg, nazwy dróg i nazwy ulic (w trybie satelitarnym).
• Zdarzenia: nasłuchuj zdarzeń gmp-steadystate lub gmp-error, aby tworzyć dalszą logikę, np. wczytywać znaczniki lub animować kamerę.

Tło > Zminimalizowane kafelki > Siatka terenu > Siatka powierzchni (np. budynki) > Punkty orientacyjne i etykiety dróg, elementy niestandardowe wczytywane równolegle (markery, modele 3D itp.)

• Interakcja użytkownika: przed wprowadzeniem zmian w treści mapy poczekaj na zdarzenie gmp-steadystate. Jeśli użytkownik zacznie wchodzić w interakcję z mapą (przesuwać ją lub powiększać) przed pierwszym zdarzeniem gmp-steadystate, zdarzenie zostanie wywołane dopiero po zakończeniu interakcji. Unikaj wyświetlania lub aktualizowania treści nakładki (np. znaczników lub wielokątów), gdy użytkownik przesuwa lub powiększa mapę. Aby uniknąć wyświetlania lub aktualizowania treści nakładki (np. znaczników lub wielokątów), nasłuchuj zdarzeń gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange i gmp-tiltchange.

• Używaj requestAnimationFrame() (rAF) do ciągłych aktualizacji i ściśle oddzielaj intensywne obliczenia od wywołań rysowania.

  • Używaj rAF: synchronizuje aktualizacje z częstotliwością odświeżania przeglądarki, aby zapewnić płynną animację 60 klatek na sekundę i zmniejszyć zużycie energii.
  • Unikaj intensywnej pracy z rysunkiem: nie wykonuj ciężkich zadań niezwiązanych z rysowaniem podczas końcowej aktualizacji.
  • Oddzielna logika: wykonuj całą intensywną logikę przed minimalnymi wywołaniami aktualizacji komponentu internetowego w pętli rAF.

• Początkowe ustawienia sceny: <gmp-map-3d> ustawienia kamery, takie jak pochylenie, wpływają na szybkość wczytywania. Im bardziej scena jest powiększona lub pochylona, tym bardziej szczegółowe wielokąty będą wyświetlane i wymagają wczytania. Poziom szczegółowości zależy też od lokalizacji (np. miasto z wieloma budynkami w porównaniu z obszarem wiejskim z samymi elementami naturalnymi).

  • Preferuj mniej powiększone (z dużej wysokości) widoki, które nie są pochylone lub są pochylone w niewielkim stopniu.
  • Dodaj do mapy granice (przykład), aby użytkownicy mogli skupić się na określonym obszarze, a kafelki wczytywały się w całości.

• Wizualizacja wstępnego ładowania: chociaż <gmp-map-3d> ładuje się bardzo szybko, wyświetlenie go w pełnej rozdzielczości może zająć trochę czasu w przypadku użytkowników urządzeń z niższej półki (o słabym procesorze graficznym) lub o ograniczonej przepustowości (wolne 4G). W takim przypadku możesz utworzyć wstępne wczytywanie z obrazem, animacją lub tekstem, a scena 3D będzie wczytywana w tle. Poniżej znajdziesz kluczowe zdarzenie, którego możesz użyć:

Przykład wstępnego wczytywania

// 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();

• Mapa 2D:
  • Użytkownicy ci mogą otrzymywać alternatywną mapę 2D (SATELLITE), która nadal zawiera Twoje dane geograficzne, takie jak znaczniki.

• Możesz też wyświetlać użytkownikom uzupełniającą 2-wymiarową mapę statyczną w trybie SATELITARNYM, aby mogli wizualizować dane miejsce podczas ładowania.

Uwaga: każda mapa 2D i 3D jest obecnie rozliczana oddzielnie, więc renderuj drugą mapę tylko wtedy, gdy użytkownicy zamierzają z nią wejść w interakcję.

Skuteczność elementów wizualnych i zarządzanie nimi

Mapy 3D oferują kilka sposobów wyświetlania elementów wizualnych, takich jak markery, polilinie i modele 3D, z optymalną wydajnością i minimalnym czasem renderowania, nawet w przypadku większej liczby elementów wizualnych.

Znaczniki

Przykładowy scenariusz: 150–300 ms na wczytanie 300 znaczników z 41 różnymi glifami znaczników SVG (nowoczesny laptop: macOS M3 Pro, Chrome)

• Optymalny wybór dostosowywania:
  • PinElement: w przypadku podstawowych zmian znacznika (kolor, skala, obramowanie, glif tekstu) użyj elementu <gmp-pin> lub klasy PinElement. Jest to najskuteczniejsza metoda dostosowywania.
  • Oszczędnie używaj znaczników HTMLImageElement lub SVGElement: używaj ich w przypadku bardziej zaawansowanych dostosowań, takich jak dodawanie przezroczystości lub wstawianie obrazu, np. ikony, do elementu SVGElement (wymaga kodowania base64). Po wczytaniu zostaną one zrasteryzowane, co wiąże się z obciążeniem wydajności. Elementy HTMLImageElement i SVGElement muszą być zawarte w elemencie <template> przed przypisaniem do domyślnego slotu elementu Marker3DElement.
  • Dodawanie zwykłego kodu HTML lub CSS nie jest obecnie możliwe.
• Zarządzanie zachowaniem w przypadku kolizji: skorzystaj z właściwości znacznika collisionBehavior. W przypadku ważnych znaczników, które muszą być zawsze widoczne, odpowiednio ustaw zachowanie. W przypadku mniej ważnych znaczników zezwól na ich ukrywanie, aby zachować przejrzystość mapy, zwłaszcza przy dużym powiększeniu.
• Tylko najważniejsze punkty POI: używaj parametru drawsWhenOccluded (lub ustawiaj go programowo) tylko w przypadku markerów, które muszą być widoczne przez budynki lub teren (np. cel akcji ratunkowej, zakopana linia mediów lub awatar użytkownika).
• Test Occlusion (Test zasłaniania): ponieważ mapa jest trójwymiarowa, znaczniki mogą być wizualnie zasłonięte (okludowane) przez budynki lub ukształtowanie terenu. Testuj różne kąty kamery i wysokości znaczników, aby mieć pewność, że ważne miejsca POI pozostaną widoczne, lub wdróż logikę dostosowywania widoczności i wysokości, gdy są zasłonięte.
• Wykorzystaj wysokość: na mapach 3D markery powinny używać pozycji z wartością wysokości. W przypadku markerów powiązanych z terenem lub budynkami użyj ustawienia altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' lub podobnego, aby mieć pewność, że marker jest prawidłowo zakotwiczony, gdy mapa jest przechylona lub obrócona.

Wielokąty i linie łamane

Przykładowy scenariusz: 100–150 ms na wczytanie 1000 wielokątów (nowoczesny laptop: macOS M3 Pro, Chrome)

• Uprość geometrię: przed renderowaniem zastosuj algorytm upraszczający do danych ścieżki. Zmniejsza to liczbę wierzchołków przy zachowaniu ogólnego kształtu, co znacznie przyspiesza renderowanie, zwłaszcza w przypadku złożonych granic lub tras.
• Decymacja według poziomu powiększenia: w przypadku bardzo dużych zbiorów danych rozważ wczytywanie geometrii o większej szczegółowości tylko wtedy, gdy użytkownik powiększy obszar. Przy niskim poziomie powiększenia wystarczy bardzo uproszczona wersja linii łamanej lub wielokąta.
• Wstępne obliczenia dla wyciągniętych wielokątów: jeśli wielokąty są wyciągnięte (extruded: true), dane ścieżki definiują objętość 3D (siatkę). Przetwarzanie złożonych wielokątów o dużej liczbie wierzchołków jest kosztowne pod względem obliczeniowym. Upewnij się, że dane źródłowe wielokątów są jak najprostsze.
• Sprawdź wydajność linii łamanych i wielokątów: jeśli dodajesz wiele złożonych linii łamanych lub wielokątów, zwłaszcza wyciągniętych w 3D, upewnij się, że nie powodują one spadku liczby klatek na sekundę. W razie potrzeby ogranicz liczbę wierzchołków lub użyj algorytmów upraszczających.
• Podczas aktualizowania kształtu zmodyfikuj całą tablicę ścieżek w ramach jednej operacji, zamiast tworzyć pętlę i modyfikować poszczególne elementy. Pojedyncza operacja przypisania (np. polyline.path = newPathArray;) jest znacznie wydajniejsza niż wiele aktualizacji iteracyjnych.
• Unikaj wyciągniętych polilinii (w miarę możliwości): polilinie mogą używać wartości wysokości, aby umieścić je w przestrzeni 3D, ale wyciąganie polilinii (np. nadawanie im szerokości linii i dużego zakresu wysokości) może być wymagające pod względem graficznym. Aby uzyskać lepszą wydajność, w miarę możliwości używaj polilinii 2D na ziemi (RELATIVE_TO_GROUND) lub minimalnej szerokości linii.
• Używaj tylko drawsOccludedSegments w przypadku kluczowych elementów wyznaczania trasy. W przypadku kształtów tła lub kształtów kontekstowych zezwól na ich naturalne zasłanianie przez geometrię 3D mapy. Wyświetlanie niekrytycznej ukrytej geometrii niepotrzebnie zwiększa złożoność renderowania.

Modele 3D

Renderowanie modelu 3D w formacie .glb i interaktywność, np. zdarzenie gmp-click, są bardzo szybkie w przypadku elementu <gmp-map-3d>.

Przykładowy scenariusz: wyświetlenie 1000 wystąpień lekkiego modelu 3D (200 KB) poruszającego się po ścieżce zajmuje około 2 sekund. (nowoczesny laptop: macOS M3 Pro, Chrome)

• Zminimalizuj rozmiar pliku za pomocą kompresji: aby zapewnić szybkie wczytywanie, zwłaszcza w sieciach komórkowych, złożone pliki modelu .glb powinny mieć rozmiar poniżej 5 MB (najlepiej mniejszy). Głównym sposobem na to jest zastosowanie kompresji Draco do danych siatki w plikach .glb, co może znacznie zmniejszyć rozmiar pliku (często o ponad 50%) przy minimalnej utracie jakości obrazu.
• Wyśrodkuj początek modelu: upewnij się, że oprogramowanie do modelowania 3D eksportuje model z początkiem (punkt 0, 0, 0) wyśrodkowanym u podstawy modelu. Ułatwia to pozycjonowanie i obracanie na mapie, dzięki czemu model jest prawidłowo zakotwiczony na współrzędnych geograficznych.
• Zarządzanie CORS: jeśli pliki modelu są hostowane w innej domenie lub CDN niż aplikacja internetowa, musisz skonfigurować serwer hostujący tak, aby zawierał niezbędne nagłówki Cross-Origin Resource Sharing (CORS), np. Access-Control-Allow-Origin: *. W przeciwnym razie mapa nie będzie mogła wczytać modelu.