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ć interfejs Maps JavaScript API podczas początkowego wczytywania strony.
• Biblioteki: wczytuj biblioteki programowo w razie potrzeby, np.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 podstawowej: używaj niestandardowego identyfikatora mapy, aby filtrować ciekawe 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 bałaganowi 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 (tryb satelitarny).
• Zdarzenia: nasłuchuj zdarzeń gmp-steadystate lub gmp-error, aby tworzyć dalszą logikę, np. wczytywać znaczniki lub animować kamerę.

Tło obszaru roboczego > Zmniejszone fragmenty mapy > Siatka terenu > Siatka powierzchni (np. budynki) > Ważne miejsca i etykiety dróg, elementy niestandardowe wczytywane równolegle (znaczniki, 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 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 aparatu, takie jak pochylenie, wpływają na szybkość wczytywania. Im bardziej scena jest powiększona lub przechylona, 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: <gmp-map-3d> ładuje się bardzo szybko, ale 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 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 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). Będą one rasteryzowane podczas wczytywania i będą wymagać dodatkowej mocy obliczeniowej. 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 skonfiguruj ich działanie. Mniej ważne znaczniki mogą być ukryte, aby mapa była bardziej przejrzysta, zwłaszcza przy dużym powiększeniu.
• Tylko najważniejsze punkty POI: używaj parametru drawsWhenOccluded (lub ustaw go programowo) tylko w przypadku markerów, które muszą być widoczne przez budynki lub teren (np. cel akcji ratunkowej, zakopana linia energetyczna 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 najważniejsze ciekawe miejsca 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 znaczników powiązanych z terenem lub budynkami użyj ustawień altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' lub podobnych, aby mieć pewność, że znacznik 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 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 lub złożonych linii łamanych/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 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 linii łamanych (w miarę możliwości): linie łamane mogą używać wartości wysokości, aby umieścić je w przestrzeni 3D, ale wyciąganie linii łamanej (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ń 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łó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 mechanizmem CORS: jeśli pliki modelu są hostowane w innej domenie lub CDN niż aplikacja internetowa, musisz skonfigurować serwer hostingu 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.