Sprawdzone metody dotyczące Map 3D

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

Przykład wyszukiwania miejsc i wyznaczania trasy.

Wskazówki dotyczące wydajności

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

Wczytywanie mapy

Początkowe wczytywanie i konfiguracja renderowania Map 3D łączą techniki konfiguracji przeglądarki i sprawdzone metody interfejsu użytkownika, 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 wczytają się automatycznie w odpowiednim momencie.
• Zarządzanie funkcjami mapy podstawowej: użyj niestandardowego mapId, aby filtrować punkty POI 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 lub polilinie. Zapobiega to wizualnemu bałaganowi i potencjalnemu nakładaniu się elementów. Możesz też wyłączyć funkcje wektorowych kafelków mapy podstawowej, takie jak punkty POI, polilinie dróg, nazwy dróg i nazwy ulic (tryb SATELLITE).
• Zdarzenia: nasłuchuj zdarzeń gmp-steadystate lub gmp-error, aby tworzyć dalszą logikę, np. wczytywanie znaczników czy animowanie kamery.

Płótno w tle > Zminimalizowane kafelki > Siatka terenu > Siatka powierzchni (np. budynki) > Punkty POI i etykiety dróg, elementy niestandardowe wczytywane równolegle (znaczniki, modele 3D itp.)

• Interakcja z użytkownikiem: przed wprowadzeniem zmian w treści mapy poczekaj na zdarzenie gmp-steadystate. Jeśli użytkownik zacznie wchodzić w interakcję z mapą (przesuwać, powiększać) przed początkowym zdarzeniem gmp-steadystate , zdarzenie zostanie wywołane dopiero po zakończeniu interakcji. Unikaj wyświetlania lub aktualizowania treści nakładki (takich jak znaczniki lub wielokąty) gdy użytkownik przesuwa lub powiększa mapę. Unikaj wyświetlania lub aktualizowania treści nakładki (takich jak znaczniki lub wielokąty), nasłuchując zdarzeń gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.

• W przypadku ciągłych aktualizacji requestAnimationFrame() (rAF) i ściśle oddzielaj intensywne obliczenia od wywołań rysowania.

  • Używaj rAF: synchronizuje aktualizacje z częstotliwością wyświetlania przeglądarki, co zapewnia płynną animację 60 FPS i mniejsze zużycie energii.
  • Unikaj intensywnego rysowania: nie wykonuj złożonych zadań niezwiązanych z rysowaniem podczas ostatecznej 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 więcej szczegółowych wielokątów będzie wyświetlanych i wymagało wczytania. Poziom szczegółowości będzie też zależeć od lokalizacji (np. miasto z wieloma budynkami a wieś z samymi elementami naturalnymi).

  • Preferuj mniej powiększone (wysoka wysokość) widoki o niskim lub zerowym pochyleniu.
  • Dodaj granice (przykład) do mapy, aby użytkownicy mogli skupić się na określonym obszarze, a kafelki mogły się w pełni wczytać.

• Wizualizacja wstępnego wczytywania: komponent <gmp-map-3d> wczytuje się bardzo szybko, ale wyświetlenie go w pełnej rozdzielczości może zająć trochę czasu w przypadku użytkowników z urządzeniami o niskiej wydajności (słaby procesor graficzny) lub 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:
  • Tym użytkownikom można udostępnić alternatywną mapę 2D (SATELLITE) , która będzie zawierać Twoje dane geograficzne, takie jak znaczniki.

• Podczas wczytywania można też wyświetlać użytkownikom uzupełniającą statyczną mapę 2D w trybie SATELLITE, aby mogli zobaczyć dane miejsce.

Uwaga: wczytywanie każdej mapy 2D i 3D jest obecnie rozliczane osobno, dlatego drugą mapę renderuj tylko wtedy, gdy użytkownicy chcą z nią wchodzić w interakcję.

Wydajność i zarządzanie elementami wizualnymi

Mapy 3D oferują kilka sposobów wyświetlania elementów wizualnych, takich jak znaczniki, polilinie, 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 dostosowania:
  • PinElement: w przypadku podstawowych zmian znacznika (kolor, skala, obramowanie, glif tekstowy) użyj elementu <gmp-pin> lub klasy PinElement. Jest to najbardziej wydajna metoda dostosowywania.
  • Oszczędnie używaj znaczników HTMLImageElement lub SVGElement: używaj ich do bardziej zaawansowanych dostosowań, takich jak dodawanie przezroczystości lub wstawianie obrazu, np. ikony, do elementu SVGElement (wymaga kodowania base64). Zostaną one zrasteryzowane podczas wczytywania i spowodują obniżenie wydajności. Przed przypisaniem do domyślnego slotu elementu Marker3DElement elementy HTMLImageElement i SVGElement muszą być opakowane w <template> element.
  • Dodawanie zwykłego kodu HTML lub CSS nie jest obecnie możliwe.
• Zarządzanie zachowaniem w przypadku kolizji: skorzystaj z właściwości collisionBehavior znacznika. W przypadku ważnych znaczników, które muszą być zawsze widoczne, ustaw odpowiednie zachowanie. W przypadku mniej ważnych znaczników zezwól na ich ukrywanie, aby zachować przejrzystość i czytelność mapy, zwłaszcza przy dużym powiększeniu.
• Tylko najważniejsze punkty POI: używaj drawsWhenOccluded (lub ustawiaj tę właściwość programowo) tylko w przypadku znaczników, które muszą być widoczne przez budynki lub teren (np. cel akcji ratunkowej, zakopana linia użyteczności publicznej lub awatar użytkownika).
• Testowanie zasłaniania: ponieważ mapa jest trójwymiarowa, znaczniki mogą być wizualnie zasłonięte przez budynki lub teren. Przetestuj różne kąty kamery i wysokości znaczników, aby mieć pewność, że najważniejsze punkty POI pozostaną widoczne, lub zaimplementuj logikę dostosowywania widoczności i wysokości w przypadku zasłonięcia.
• Wykorzystanie wysokości: na mapach 3D znaczniki powinny używać pozycji z wartością wysokości. W przypadku znaczników powiązanych z terenem lub budynkami użyj altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' lub podobnych ustawień, aby mieć pewność, że znacznik będzie prawidłowo zakotwiczony, gdy mapa jest pochylona lub obrócona.

Wielokąty i polilinie

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

• Uproszczenie geometrii: przed renderowaniem zastosuj algorytm upraszczania 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 obliczanie w przypadku wyciągniętych wielokątów: jeśli wielokąty są wyciągnięte (extruded: true), dane ścieżki określają objętość 3D (siatkę). Przetwarzanie złożonych wielokątów o dużej liczbie wierzchołków jest kosztowne obliczeniowo. Upewnij się, że dane źródłowe wielokątów są jak najprostsze.
• Testowanie wydajności polilinii i wielokątów: podczas dodawania wielu lub złożonych polilinii/wielokątów, zwłaszcza gdy są one wyciągnięte w 3D, upewnij się, że nie powodują spadku liczby klatek na sekundę. W razie potrzeby ogranicz liczbę wierzchołków lub użyj algorytmów upraszczania.
• Podczas aktualizowania kształtu zmodyfikuj całą tablicę ścieżki w ramach jednej operacji, zamiast iterować i modyfikować poszczególne elementy. Pojedyncza operacja przypisania (np. polyline.path = newPathArray;) jest znacznie wydajniejsza niż wiele iteracyjnych aktualizacji.
• Unikaj wyciągniętych polilinii (jeśli to możliwe): polilinie mogą używać wartości wysokości, aby umieścić je w przestrzeni 3D, ale wyciąganie polilinii (np. nadawanie jej grubości obrysu i dużego zakresu wysokości) może być kosztowne graficznie. Jeśli to możliwe, używaj polilinii 2D na ziemi (RELATIVE_TO_GROUND) lub minimalnej grubości obrysu, aby zwiększyć wydajność.
• Używaj drawsOccludedSegments tylko w przypadku najważniejszych elementów routingu. W przypadku kształtów w tle lub 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 .glb i interaktywność, np. zdarzenie gmp-click, są bardzo szybkie w komponencie `<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)

• Minimalizowanie rozmiaru pliku za pomocą kompresji: aby zapewnić szybkie wczytywanie, zwłaszcza w sieciach komórkowych, złożone pliki modeli .glb powinny mieć rozmiar mniejszy niż 5 MB (najlepiej mniejszy). Podstawową metodą osiągnięcia tego celu 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środkowanie początku modelu: upewnij się, że oprogramowanie do modelowania 3D eksportuje model z jego początkiem (punkt 0, 0, 0) wyśrodkowanym u podstawy modelu. Upraszcza to pozycjonowanie i obracanie na mapie, zapewniając prawidłowe zakotwiczenie modelu na współrzędnych szerokości i długości geograficznej.
• Zarządzanie mechanizmem 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 mechanizmu współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS), np. Access-Control-Allow-Origin: *. W przeciwnym razie mapa nie będzie mogła wczytać modelu.