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.

Wskazówki dotyczące wydajności

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

Wczytaj mapę

Początkowe wczytywanie i konfiguracja renderowania map 3D łączą 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. w przypadku google.maps.importLibrary("maps3d"). Jeśli jednak 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 bazowej: użyj niestandardowego identyfikatora mapy, aby filtrować punkty POI na mapie bazowej (tryb HYBRID) i kontrolować ich gęstość, zwłaszcza jeśli aplikacja ma własny zestaw elementów niestandardowych, takich jak markery czy polilinie. Zapobiega to bałaganowi wizualnemu i potencjalnemu nakładaniu się elementów. Możesz też wyłączyć funkcje wektorowych kafelków mapy bazowej, 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. 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 zdarzeniem początkowym gmp-steadystate, zdarzenie to 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 a wieś z samymi elementami przyrody).

  • Preferuj mniej powiększone (z dużej wysokości), niepochylone lub lekko pochylone widoki.
  • 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ą mapę statyczną 2D w trybie SATELITARNYM, aby mogli wizualizować dane miejsce podczas ładowania.

Uwaga: każde wczytanie mapy 2D i 3D jest na razie rozliczane oddzielnie, więc drugą mapę renderuj tylko wtedy, gdy użytkownicy zamierzają z niej korzystać.

Skuteczność i zarządzanie elementami wizualnymi

Mapy 3D oferują kilka sposobów wyświetlania elementów wizualnych, takich jak znaczniki, linie łamane, wielokąty 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 markerów z 41 różnymi glifami markeró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 ich działanie. 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 użyteczności publicznej 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 markerów, aby ważne punkty POI były 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 polilinii lub wielokąta.
• Wstępne obliczanie 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.
• Testowanie wydajności linii łamanych i wielokątów: podczas dodawania wielu złożonych linii łamanych lub wielokątów, zwłaszcza gdy są one wyciągnięte w 3D, sprawdź, czy nie powodują 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żki w jednej operacji, zamiast tworzyć pętlę i modyfikować poszczególne elementy. Pojedyncza operacja przypisania (np. polyline.path = newPathArray;) jest znacznie bardziej wydajna 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 jej 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ń modelu 3D (200 KB) światła 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łó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ś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 sieci CDN niż aplikacja internetowa, musisz skonfigurować serwer hostujący, aby zawierał niezbędne nagłówki 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.