Sprawdzone metody dotyczące Map 3D

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

Przykład wyszukiwania miejsca i wyznaczania trasy.

Uwagi dotyczące wydajności

Aby zapewnić płynne i szybkie działanie elementów interaktywnych i wizualnych, rozważ te rozwiązania.

Wczytywanie mapy

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

• Wczytywanie interfejsu API: używaj asynchronicznego dynamicznego wczytywania map 3D, aby wczytywać interfejs Maps JavaScript API podczas początkowego wczytywania strony.
• Biblioteki: wczytuj biblioteki programowo tam, gdzie jest to potrzebne, np. google.maps.importLibrary("maps3d"). Jeśli natomiast używasz komponentów internetowych, takich jak <gmp-map-3d>, bezpośrednio na stronie HTML z bezpośrednim wczytywaniem skryptów, biblioteki będą wczytywane automatycznie w odpowiednim momencie.
• Zarządzanie funkcjami mapy podstawowej: używaj niestandardowego identyfikatora mapId do filtrowania ciekawych miejsc na mapie podstawowej (tryb HYBRID) i kontrolowania ich gęstości, zwłaszcza jeśli aplikacja ma własny zestaw elementów niestandardowych, takich jak znaczniki czy linie łamane. Zapobiega to bałaganowi wizualnemu i potencjalnemu nakładaniu się elementów. Możesz też wyłączyć funkcje kafelków wektorowych mapy podstawowej, takie jak ciekawe miejsca, linie łamane dróg, nazwy dróg i nazwy ulic (tryb SATELLITE).
• Zdarzenia: nasłuchuj zdarzeń gmp-steadystate lub gmp-error, aby utworzyć kolejną logikę, np. wczytywanie znaczników czy animowanie kamery.

Obszar roboczy tła > Zminimalizowane kafelki > Siatka terenu > Siatka powierzchni (np. budynki) > Ciekawe miejsca i etykiety dróg, elementy niestandardowe wczytywane równolegle (znaczniki, modele 3D itp.)

• Interakcja użytkownika: przed wprowadzeniem zmian w zawartoś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 (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żyj rAF: synchronizuje aktualizacje z częstotliwością wyświetlania przeglądarki, aby zapewnić płynną animację z częstotliwością 60 kl./s i zmniejszyć zużycie energii.
  • Unikaj intensywnego rysowania: nie wykonuj ciężkich zadań niezwiązanych z rysowaniem podczas ostatniej aktualizacji.
  • Oddzielna logika: wykonaj 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 nachylenie, wpływają na szybkość wczytywania. Im bardziej scena jest powiększona lub pochylona, tym bardziej szczegółowe wielokąty będą wyświetlane i będą wymagały wczytania. Poziom szczegółowości zależy też od lokalizacji (np. miasto z wieloma budynkami lub obszar wiejski z samymi obiektami naturalnymi).

  • Preferuj widoki z mniejszym powiększeniem (z dużej wysokości), z niskim kątem nachylenia lub bez nachylenia.
  • Dodaj do mapy granice (przykład), aby użytkownicy mogli skupić się na konkretnym obszarze, a kafelki mogły się w pełni wczytać.

• Wizualizacja wstępnego wczytywania: chociaż <gmp-map-3d> wczytuje się bardzo szybko, wyświetlenie w pełnej rozdzielczości może zająć trochę czasu użytkownikom z urządzeniami o niskiej wydajności (słaby procesor graficzny) lub z małą przepustowością (wolne 4G). W takim przypadku możesz utworzyć ekran wczytywania z obrazem, animacją lub tekstem, podczas gdy scena 3D będzie się wczytywać w tle. Poniżej znajdziesz kluczowe zdarzenie, którego możesz użyć:

Przykład modułu wstępnego ładowania

// 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żytkownikom tym można dostarczyć alternatywną mapę 2D (SATELLITE), która nadal będzie zawierać Twoje dane geograficzne, takie jak znaczniki.

• Możesz też wyświetlić użytkownikom uzupełniającą mapę statyczną 2D w trybie SATELITA, aby mogli zobaczyć dane miejsce podczas wczytywania.

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

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

Mapy 3D oferują kilka sposobów wyświetlania elementów wizualnych, takich jak znaczniki, linie łamane i modele 3D, przy optymalnej wydajności i minimalnym czasie 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 tekstowy) użyj elementu <gmp-pin> lub klasy PinElement. Jest to najskuteczniejsza metoda dostosowywania.
  • Używaj znaczników HTMLImageElement lub SVGElement z umiarem: używaj ich do dodatkowego dostosowywania, np. dodawania przezroczystości lub wstawiania obrazu, takiego jak ikona, do elementu SVGElement (wymaga kodowania base64). Zostaną one zrasteryzowane podczas wczytywania i będą wymagać dodatkowych zasobów. Elementy HTMLImageElement i SVGElement muszą być opakowane w element <template> przed przypisaniem do domyślnego slotu elementu Marker3DElement.
  • Dodawanie zwykłego kodu HTML lub CSS jest obecnie niedostępne.
• Zarządzanie zachowaniem przy kolizji znaczników: skorzystaj z właściwości collisionBehavior znacznika. W przypadku znaczników krytycznych, które muszą być zawsze widoczne, odpowiednio ustaw zachowanie. Mniej ważne znaczniki mogą być ukryte, aby mapa była bardziej przejrzysta i mniej zagracona, zwłaszcza przy dużych poziomach powiększenia.
• Tylko krytyczne ciekawe miejsca: używaj drawsWhenOccluded (lub ustaw właściwość automatycznie) tylko w przypadku znaczników, które muszą być widoczne przez budynki lub teren (np. cel ratunkowy, zakopana linia energetyczna lub awatar użytkownika).
• Testowanie zasłaniania: ponieważ mapa jest trójwymiarowa, znaczniki mogą być wizualnie zasłonięte przez budynki lub ukształtowanie terenu. Przetestuj różne kąty kamery i wysokości znaczników, aby upewnić się, że kluczowe ciekawe miejsca pozostają widoczne, lub wdróż logikę dostosowywania widoczności i wysokości, gdy są one zasłonięte.
• Wykorzystanie wysokości: na mapach 3D znaczniki powinny używać pozycji z wartością wysokości. W przypadku znaczników powiązanych z ukształtowaniem terenu lub budynkami użyj ustawienia altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' lub podobnego, aby zapewnić prawidłowe zakotwiczenie znacznika, 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 zwiększa szybkość renderowania, zwłaszcza w przypadku złożonych granic lub tras.
• Zmniejszanie liczby punktów według poziomu powiększenia: w przypadku bardzo dużych zbiorów danych rozważ wczytywanie bardziej szczegółowej geometrii tylko wtedy, gdy użytkownik powiększy dany obszar. Przy niskim poziomie powiększenia wystarczy bardzo uproszczona wersja linii łamanej lub wielokąta.
• Wstępne obliczenia dla wielokątów wytłaczanych: jeśli wielokąty są wytłaczane (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.
• Testowanie wydajności linii łamanych i wielokątów: gdy dodajesz wiele linii łamanych lub wielokątów albo gdy są one złożone, zwłaszcza jeśli są wytłaczane w 3D, upewnij się, że nie powodują spadku liczby klatek. W razie potrzeby ogranicz liczbę wierzchołków lub użyj algorytmów upraszczających.
• Podczas aktualizowania kształtu zmodyfikuj całą tablicę ścieżki w jednej operacji, zamiast zapętlać i modyfikować poszczególne elementy. Pojedyncza operacja przypisania (np. polyline.path = newPathArray;) jest znacznie bardziej wydajna niż wielokrotne aktualizacje iteracyjne.
• Unikaj polilinii ekstrudowanych (jeśli to możliwe): polilinie mogą używać wartości wysokości do umieszczania w przestrzeni 3D, ale ekstrudowanie polilinii (np. nadanie jej szerokości obrysu i dużej 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 obrysu.
• Używaj drawsOccludedSegments tylko w przypadku kluczowych elementów trasy. W przypadku kształtów tła lub kontekstowych pozwól, aby były one naturalnie zasłonięte przez geometrię 3D mapy. Wyświetlanie niekrytycznej ukrytej geometrii niepotrzebnie komplikuje renderowanie.

Modele 3D

Renderowanie modelu 3D w formacie .glb i interaktywność, np. zdarzenie kliknięcia gmp-click, są bardzo szybkie w <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)

• Zmniejsz rozmiar pliku za pomocą kompresji: aby zapewnić szybkie wczytywanie, zwłaszcza w sieciach komórkowych, rozmiar złożonych plików modeli .glb nie powinien przekraczać 5 MB (najlepiej, aby był mniejszy). Główną 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 wizualnej.
• Wyśrodkowanie punktu początkowego modelu: upewnij się, że oprogramowanie do modelowania 3D eksportuje model z punktem początkowym (punkt 0, 0, 0) wyśrodkowanym u podstawy modelu. Upraszcza to pozycjonowanie i obracanie na mapie, zapewniając prawidłowe zakotwiczenie modelu we współrzędnych szerokości i długości geograficznej.
• Zarządzanie CORS: jeśli pliki modelu są hostowane w innej domenie lub sieci CDN niż aplikacja internetowa, musisz skonfigurować serwer hostujący tak, aby zawierał niezbędne nagłówki współdzielenia zasobów (CORS) (np. Access-Control-Allow-Origin: *). W przeciwnym razie mapa nie będzie mogła wczytać modelu.