Najlepsze rozwiązania dotyczące zestawu Azure Mapy Web SDK

Ten dokument koncentruje się na najlepszych rozwiązaniach dotyczących zestawu AZURE Mapy Web SDK, jednak wiele najlepszych rozwiązań i optymalizacji opisanych w artykule można zastosować do wszystkich innych zestawów SDK usługi Azure Mapy.

Zestaw AZURE Mapy Web SDK udostępnia zaawansowaną kanwę do renderowania dużych zestawów danych przestrzennych na wiele różnych sposobów. W niektórych przypadkach istnieje wiele sposobów renderowania danych w taki sam sposób, ale w zależności od rozmiaru zestawu danych i żądanej funkcjonalności jedna metoda może działać lepiej niż inne. W tym artykule przedstawiono najlepsze rozwiązania i wskazówki, aby zmaksymalizować wydajność i utworzyć bezproblemowe środowisko użytkownika.

Ogólnie rzecz biorąc, gdy chcesz poprawić wydajność mapy, poszukaj sposobów zmniejszenia liczby warstw i źródeł oraz złożoności używanych zestawów danych i stylów renderowania.

Najlepsze rozwiązania dotyczące zabezpieczeń

Aby uzyskać więcej informacji na temat najlepszych rozwiązań w zakresie zabezpieczeń, zobacz Najlepsze rozwiązania dotyczące uwierzytelniania i autoryzacji.

Korzystanie z najnowszych wersji usługi Azure Mapy

Zestawy SDK usługi Azure Mapy przechodzą regularne testowanie zabezpieczeń wraz z dowolnymi zewnętrznymi bibliotekami zależności używanymi przez zestawy SDK. Wszelkie znane problemy z zabezpieczeniami zostały rozwiązane w odpowiednim czasie i wydane w środowisku produkcyjnym. Jeśli aplikacja wskazuje najnowszą wersję główną hostowanej wersji zestawu Azure Mapy Web SDK, automatycznie otrzymuje wszystkie aktualizacje wersji pomocniczej, które obejmują poprawki związane z zabezpieczeniami.

Jeśli samodzielnie hostuje zestaw AZURE Mapy Web SDK za pośrednictwem modułu npm, użyj symbolu daszka (^) w połączeniu z numerem wersji pakietu npm platformy Azure Mapy w package.json pliku, aby wskazywać najnowszą wersję pomocniczą.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Napiwek

Zawsze używaj najnowszej wersji narzędzia npm Azure Mapy Control. Aby uzyskać więcej informacji, zobacz azure-maps-control w dokumentacji narzędzia npm.

Optymalizowanie początkowego ładowania mapy

Gdy strona internetowa jest ładowana, jedną z pierwszych rzeczy, które chcesz zrobić, jest rozpoczęcie renderowania czegoś tak szybko, jak to możliwe, aby użytkownik nie patrzył na pusty ekran.

Obejrzyj zdarzenie gotowe do użycia map

Podobnie, gdy mapa początkowo ładuje się często, konieczne jest jak najszybsze załadowanie danych, więc użytkownik nie patrzy na pustą mapę. Ponieważ mapa ładuje zasoby asynchronicznie, musisz poczekać, aż mapa będzie gotowa do interakcji przed próbą renderowania własnych danych. Istnieją dwa zdarzenia, które można czekać, load zdarzenie i ready zdarzenie. Zdarzenie ładowania zostanie wyzwolone po zakończeniu całkowitego ładowania początkowego widoku mapy i załadowaniu każdego kafelka mapy. Jeśli zostanie wyświetlony błąd "Styl nie jest ładowany", należy użyć load zdarzenia i poczekać, aż styl zostanie w pełni załadowany.

Gotowe zdarzenie jest uruchamiane, gdy minimalne zasoby mapy potrzebne do rozpoczęcia interakcji z mapą. Mówiąc dokładniej, zdarzenie jest wyzwalane, ready gdy mapa ładuje dane stylu po raz pierwszy. Gotowe zdarzenie może być często uruchamiane w połowie czasu zdarzenia ładowania i w związku z tym umożliwia szybsze ładowanie danych do mapy. Unikaj wprowadzania zmian w stylu lub języku mapy w tej chwili, ponieważ może to spowodować ponowne załadowanie stylu.

Załaduj zestaw SDK usługi Azure Mapy Web SDK

Jeśli mapa nie jest potrzebna od razu, z opóźnieniem załaduj zestaw AZURE Mapy Web SDK, dopóki nie będzie potrzebny. Opóźnia to ładowanie plików JavaScript i CSS używanych przez zestaw Sdk sieci Web usługi Azure Mapy do czasu potrzeby. Typowy scenariusz, w którym taka sytuacja występuje, jest to, że mapa jest ładowana na karcie lub w panelu wysuwanym, który nie jest wyświetlany podczas ładowania strony.

Przykładowy kod Mapy z opóźnieniem pokazuje, jak opóźnić ładowanie zestawu Sdk sieci Web usługi Azure Mapy do momentu naciśnięcia przycisku. Aby uzyskać kod źródłowy, zobacz Lazy Load the Map sample code (Załaduj przykładowy kod mapy).

Dodawanie symbolu zastępczego dla mapy

Jeśli ładowanie mapy zajmuje trochę czasu z powodu ograniczeń sieci lub innych priorytetów w aplikacji, rozważ dodanie małego obrazu tła do mapy div jako symbol zastępczy mapy. Spowoduje to wypełnienie pustki mapy div podczas ładowania.

Ustawianie początkowego stylu mapy i opcji aparatu podczas inicjowania

Często aplikacje chcą załadować mapę do określonej lokalizacji lub stylu. Czasami deweloperzy czekają na załadowanie mapy (lub zaczekaj na ready zdarzenie), a następnie używają setCamera funkcji lub setStyle mapy. Często trwa to dłużej, aby przejść do żądanego początkowego widoku mapy, ponieważ wiele zasobów jest domyślnie ładowanych przed załadowaniem zasobów potrzebnych do wyświetlenia żądanego widoku mapy. Lepszym rozwiązaniem jest przekazanie żądanych opcji aparatu mapy i stylu do mapy podczas inicjowania.

Optymalizowanie źródeł danych

Zestaw SDK sieci Web ma dwa źródła danych:

• Źródło GeoJSON: DataSource klasa zarządza nieprzetworzonymi danymi lokalizacji w formacie GeoJSON lokalnie. Dobre dla małych i średnich zestawów danych (w górę setki tysięcy funkcji).
• Źródło kafelka wektorowego: VectorTileSource klasa ładuje dane sformatowane jako kafelki wektorowe dla bieżącego widoku mapy na podstawie systemu układania map. Idealne rozwiązanie dla dużych i ogromnych zestawów danych (miliony lub miliardy funkcji).

Korzystanie z rozwiązań opartych na kafelkach dla dużych zestawów danych

Jeśli praca z większymi zestawami danych zawierającymi miliony funkcji, zalecanym sposobem osiągnięcia optymalnej wydajności jest uwidocznienie danych przy użyciu rozwiązania po stronie serwera, takiego jak usługa kafelka obrazu wektorowego lub rastrowego.
Kafelki wektorowe są zoptymalizowane pod kątem ładowania tylko danych, które są widoczne z geometriami przyciętymi do obszaru fokusu kafelka i uogólnione w celu dopasowania rozdzielczości mapy do poziomu powiększenia kafelka.

Platforma Azure Mapy Creator pobiera dane w formacie kafelka wektorowego. Inne formaty danych mogą używać narzędzi, takich jak Tippecanoe. Aby uzyskać więcej informacji na temat pracy z kafelkami wektorowymi, zobacz plik readme mapbox awesome-vector-tiles w usłudze GitHub.

Istnieje również możliwość utworzenia usługi niestandardowej, która renderuje zestawy danych jako kafelki obrazów rasterowych po stronie serwera i ładowanie danych przy użyciu klasy TileLayer w zestawie SDK mapy. Zapewnia to wyjątkową wydajność, ponieważ mapa musi ładować maksymalnie kilkadziesiąt obrazów i zarządzać nimi. Istnieją jednak pewne ograniczenia dotyczące używania kafelków rastrowych, ponieważ dane pierwotne nie są dostępne lokalnie. Usługa pomocnicza jest często wymagana do zasilania dowolnego typu środowiska interakcji, na przykład dowiedzieć się, jaki kształt kliknął użytkownik. Ponadto rozmiar pliku kafelka rastrowego jest często większy niż skompresowany kafelek wektorowy, który zawiera uogólnione i zoptymalizowane geometrie na poziomie powiększenia.

Aby uzyskać więcej informacji na temat źródeł danych, zobacz Tworzenie źródła danych.

Łączenie wielu zestawów danych w jednym wektorowym źródle kafelków

Im mniej źródeł danych mapa musi zarządzać, tym szybciej może przetworzyć wszystkie funkcje do wyświetlenia. W szczególności, jeśli chodzi o źródła kafelków, połączenie dwóch wektorowych źródeł kafelków powoduje zmniejszenie liczby żądań HTTP w celu pobrania kafelków w połowie, a łączna ilość danych będzie nieco mniejsza, ponieważ istnieje tylko jeden nagłówek pliku.

Łączenie wielu zestawów danych w jednym źródle kafelków wektorów można osiągnąć za pomocą narzędzia takiego jak Tippecanoe. Zestawy danych można łączyć w pojedynczą kolekcję funkcji lub rozdzielać na oddzielne warstwy w kafelku wektorowym znanym jako warstwy źródłowe. Podczas łączenia źródła kafelka wektora z warstwą renderowania należy określić warstwę źródłową zawierającą dane, które mają być renderowane z warstwą.

Zmniejsz liczbę odświeżeń kanwy z powodu aktualizacji danych

Istnieje kilka sposobów dodawania lub aktualizowania DataSource danych w klasie. Na poniższej liście przedstawiono różne metody i niektóre zagadnienia, które należy wziąć pod uwagę, aby zapewnić dobrą wydajność.

• Funkcja źródeł add danych może służyć do dodawania co najmniej jednej funkcji do źródła danych. Za każdym razem, gdy ta funkcja jest wywoływana, wyzwala odświeżanie kanwy mapy. W przypadku dodawania wielu funkcji połącz je w tablicę lub kolekcję funkcji i przekazując je do tej funkcji raz, zamiast pętli na zestawie danych i wywołując tę funkcję dla każdej funkcji.
• Funkcja źródeł setShapes danych może służyć do zastępowania wszystkich kształtów w źródle danych. Pod maską łączy ze sobą źródła clear danych i add funkcje oraz wykonuje pojedyncze odświeżanie kanwy mapy zamiast dwóch, co jest szybsze. Pamiętaj, aby użyć tej funkcji, jeśli chcesz zaktualizować wszystkie dane w źródle danych.
• Funkcja źródeł importDataFromUrl danych może służyć do ładowania pliku GeoJSON za pośrednictwem adresu URL do źródła danych. Po pobraniu danych dane są przekazywane do funkcji źródeł add danych. Jeśli plik GeoJSON jest hostowany w innej domenie, upewnij się, że inna domena obsługuje żądania między domenami (CORs). Jeśli nie rozważ skopiowania danych do pliku lokalnego w domenie lub utworzenia usługi serwera proxy z włączonymi regułami cors. Jeśli plik jest duży, rozważ przekonwertowanie go na źródło kafelka wektorowego.
• Jeśli funkcje są opakowane z Shape klasą, addPropertyfunkcje , setCoordinatesi setProperties kształtu wyzwalają aktualizację w źródle danych i odświeżanie kanwy mapy. Wszystkie funkcje zwracane przez źródła getShapes danych i getShapeById funkcje są automatycznie opakowane z klasą Shape . Jeśli chcesz zaktualizować kilka kształtów, szybciej przekonwertuj je na format JSON przy użyciu funkcji źródeł toJson danych, edytując plik GeoJSON, a następnie przekazując te dane do funkcji źródeł setShapes danych.

Unikaj niepotrzebnego wywoływania funkcji czyszczenia źródeł danych

Wywołanie funkcji clear DataSource klasy powoduje odświeżenie kanwy mapy. clear Jeśli funkcja jest wywoływana wiele razy w wierszu, może wystąpić opóźnienie, gdy mapa czeka na każde odświeżenie.

Jest to typowy scenariusz w aplikacjach, który czyści źródło danych, pobiera nowe dane, czyści źródło danych ponownie, a następnie dodaje nowe dane do źródła danych. W zależności od żądanego środowiska użytkownika następujące alternatywy byłyby lepsze.

• Wyczyść dane przed pobraniem nowych danych, a następnie przekaż nowe dane do źródeł add danych lub setShapes funkcji. Jeśli jest to jedyny zestaw danych na mapie, mapa jest pusta podczas pobierania nowych danych.
• Pobierz nowe dane, a następnie przekaż je do funkcji źródeł setShapes danych. Spowoduje to zastąpienie wszystkich danych na mapie.

Usuwanie nieużywanych funkcji i właściwości

Jeśli zestaw danych zawiera funkcje, które nie będą używane w aplikacji, usuń je. Podobnie usuń wszelkie właściwości funkcji, które nie są potrzebne. Ma to kilka korzyści:

• Zmniejsza ilość danych, które należy pobrać.
• Zmniejsza liczbę funkcji, które muszą być zapętlone podczas renderowania danych.
• Czasami może pomóc uprościć lub usunąć wyrażenia i filtry oparte na danych, co oznacza mniej wymaganego przetwarzania w czasie renderowania.

Jeśli funkcje mają wiele właściwości lub zawartości, znacznie bardziej wydajne jest ograniczenie tego, co jest dodawane do źródła danych tylko do tych, które są potrzebne do renderowania i mieć oddzielną metodę lub usługę do pobierania innej właściwości lub zawartości w razie potrzeby. Jeśli na przykład masz prostą mapę wyświetlającą lokalizacje na mapie po kliknięciu wielu szczegółowych treści. Jeśli chcesz użyć stylu opartego na danych, aby dostosować sposób renderowania lokalizacji na mapie, załaduj tylko właściwości potrzebne do źródła danych. Jeśli chcesz wyświetlić szczegółową zawartość, użyj identyfikatora funkcji, aby oddzielnie pobrać inną zawartość. Jeśli zawartość jest przechowywana na serwerze, możesz zmniejszyć ilość danych, które należy pobrać, gdy mapa jest początkowo ładowana przy użyciu usługi, aby pobrać ją asynchronicznie.

Ponadto zmniejszenie liczby cyfr znaczących we współrzędnych funkcji może również znacznie zmniejszyć rozmiar danych. Współrzędnych zawierających 12 lub więcej miejsc dziesiętnych nie jest rzadkością; Jednak sześć miejsc dziesiętnych ma dokładność około 0,1 metra, co jest często bardziej precyzyjne niż lokalizacja, którą reprezentuje współrzędna (zaleca się pracę z małymi danymi lokalizacji, takimi jak układy budynków w pomieszczeniach). Posiadanie więcej niż sześciu miejsc dziesiętnych prawdopodobnie nie zmieni sposobu renderowania danych i wymaga od użytkownika pobrania większej ilości danych bez dodatkowych korzyści.

Oto lista przydatnych narzędzi do pracy z danymi GeoJSON.

Używanie oddzielnego źródła danych do szybkiego zmieniania danych

Czasami konieczne jest szybkie aktualizowanie danych na mapie, takich jak wyświetlanie aktualizacji na żywo danych przesyłanych strumieniowo lub funkcji animowania. Po zaktualizowaniu źródła danych aparat renderowania przechodzi i renderuje wszystkie funkcje w źródle danych. Zwiększ ogólną wydajność, oddzielając dane statyczne od szybko zmieniających się danych na różne źródła danych, zmniejszając liczbę funkcji ponownie renderowanych podczas każdej aktualizacji.

W przypadku korzystania z kafelków wektorów z danymi na żywo łatwym sposobem obsługi aktualizacji jest użycie nagłówka expires odpowiedzi. Domyślnie każda wektorowa warstwa kafelka źródłowego lub rastrowego kafelka automatycznie ponownie załaduje kafelki po expires dacie. Kafelki przepływu ruchu i zdarzenia na mapie używają tej funkcji, aby zapewnić wyświetlanie na mapie nowych danych ruchu w czasie rzeczywistym. Tę funkcję można wyłączyć, ustawiając opcję usługi mapowania refreshExpiredTiles na false.

Dostosowywanie opcji buforu i tolerancji w źródłach danych GeoJSON

Klasa DataSource konwertuje nieprzetworzone dane lokalizacji na kafelki wektorowe lokalne na potrzeby renderowania na bieżąco. Te lokalne kafelki wektorowe przycinają nieprzetworzone dane do granic obszaru kafelka z bitem buforu, aby zapewnić płynne renderowanie między kafelkami. Im mniejsza buffer jest opcja, tym mniej nakładających się danych jest przechowywanych na lokalnych kafelkach wektorów i lepszą wydajność, tym większa jest jednak zmiana występujących artefaktów renderowania. Spróbuj dostosować tę opcję, aby uzyskać właściwą mieszankę wydajności z minimalnymi artefaktami renderowania.

Klasa DataSource ma tolerance również opcję, która jest używana z algorytmem uproszczenia Douglas-Peucker podczas zmniejszania rozdzielczości geometrii do celów renderowania. Zwiększenie tej wartości tolerancji zmniejsza rozdzielczość geometrii i z kolei poprawia wydajność. Dostosuj tę opcję, aby uzyskać odpowiednią kombinację rozdzielczości geometrii i wydajności zestawu danych.

Ustawianie opcji maksymalnego powiększenia źródeł danych GeoJSON

Klasa DataSource konwertuje nieprzetworzone dane lokalizacji na kafelki wektorowe lokalne na potrzeby renderowania na bieżąco. Domyślnie robi to do poziomu powiększenia 18, w którym momencie powiększeniu bliżej próbkuje dane z kafelków wygenerowanych dla poziomu powiększenia 18. Sprawdza się to w przypadku większości zestawów danych, które muszą mieć wysoką rozdzielczość po powiększeniu na tych poziomach. Jednak podczas pracy z zestawami danych, które są bardziej narażone na pomniejszone, na przykład podczas wyświetlania wielokątów stanu lub prowincji, ustawienie minZoom opcji źródła danych na mniejszą wartość, taką jak 12 zmniejszenie ilości obliczeń, generowanie kafelków lokalnych, które występuje, oraz pamięć używana przez źródło danych i zwiększenie wydajności.

Minimalizuj odpowiedź GeoJSON

Podczas ładowania danych GeoJSON z serwera za pośrednictwem usługi lub ładowania pliku prostego pamiętaj, aby zminimalizować dane w celu usunięcia niepotrzebnych znaków spacji, które sprawiają, że rozmiar pobierania jest większy niż wymagany.

Uzyskiwanie dostępu do nieprzetworzonego pliku GeoJSON przy użyciu adresu URL

Istnieje możliwość przechowywania wbudowanych obiektów GeoJSON wewnątrz języka JavaScript, jednak używa to większej ilości pamięci, ponieważ kopie są przechowywane w zmiennej utworzonej dla tego obiektu i wystąpienia źródła danych, które zarządza nim w ramach oddzielnego procesu roboczego sieci Web. Uwidocznij plik GeoJSON aplikacji przy użyciu adresu URL, a źródło danych ładuje pojedynczą kopię danych bezpośrednio do internetowego procesu roboczego źródeł danych.

Optymalizowanie warstw renderowania

Usługa Azure Maps udostępnia kilka różnych warstw renderowania danych na mapie. Istnieje wiele optymalizacji, które można wykorzystać, aby dostosować te warstwy do scenariusza, zwiększając wydajność i ogólne środowisko użytkownika.

Tworzenie warstw raz i ponowne używanie ich

Zestaw Azure Mapy Web SDK jest oparty na danych. Dane przechodzą do źródeł danych, które są następnie połączone z warstwami renderowania. Jeśli chcesz zmienić dane na mapie, zaktualizuj dane w źródle danych lub zmień opcje stylu w warstwie. Jest to często szybsze niż usuwanie, a następnie ponowne tworzenie warstw z każdą zmianą.

Rozważ warstwę bąbelka nad warstwą symboli

Warstwa bąbelkowa renderuje punkty jako okręgi na mapie i może łatwo mieć swój promień i kolor przy użyciu wyrażenia opartego na danych. Ponieważ okrąg jest prostym kształtem do rysowania w języku WebGL, aparat renderowania może renderować je szybciej niż warstwa symboli, która musi załadować i renderować obraz. Różnica wydajności tych dwóch warstw renderowania jest zauważalna podczas renderowania dziesiątek tysięcy punktów.

Używanie znaczników HTML i wyskakujących okienek oszczędnie

W przeciwieństwie do większości warstw w kontrolce azure Mapy Sieci Web, które używają języka WebGL do renderowania, znaczniki HTML i okna podręczne używają tradycyjnych elementów DOM do renderowania. W związku z tym więcej znaczników HTML i wyskakujących okienek dodało stronę, tym więcej elementów modelu DOM istnieje. Wydajność może ulec pogorszeniu po dodaniu kilkuset znaczników HTML lub wyskakujących okienek. W przypadku większych zestawów danych rozważ klastrowanie danych lub użycie symbolu lub warstwy bąbelkowej.

Przykładowy kod ponownego użycia z wieloma numerami PIN pokazuje, jak utworzyć pojedyncze okno podręczne i użyć go ponownie, aktualizując jego zawartość i położenie. Aby uzyskać kod źródłowy, zobacz Ponowne użycie wyskakujących okienek przy użyciu przykładowego kodu z wieloma numerami PIN.

Oznacza to, że jeśli masz tylko kilka punktów do renderowania na mapie, prostota znaczników HTML może być preferowana. Ponadto znaczniki HTML można łatwo przeciągać w razie potrzeby.

Łączenie warstw

Mapa jest w stanie renderować setki warstw, jednak tym więcej warstw jest, tym więcej czasu zajmuje renderowanie sceny. Jedną ze strategii zmniejszania liczby warstw jest łączenie warstw, które mają podobne style lub można je stylować przy użyciu stylów opartych na danych.

Rozważmy na przykład zestaw danych, w którym wszystkie funkcje mają isHealthy właściwość , która może mieć wartość true lub false. Jeśli utworzenie warstwy bąbelkowej, która renderuje różne kolorowe bąbelki na podstawie tej właściwości, istnieje kilka sposobów, aby to zrobić, jak pokazano na poniższej liście, od najmniej wydajnych do najbardziej wydajnych.

• Podziel dane na dwa źródła danych na isHealthy podstawie wartości i dołącz warstwę bąbelka z ustaloną opcją koloru do każdego źródła danych.
• Umieść wszystkie dane w jednym źródle danych i utwórz dwie warstwy bąbelka z opcją koloru zakodowanego na sztywno i filtrem opartym isHealthy na właściwości .
• Umieść wszystkie dane w jednym źródle danych, utwórz pojedynczą warstwę bąbelka z wyrażeniem case stylu dla opcji koloru na isHealthy podstawie właściwości. Oto przykładowy kod, który to pokazuje.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Tworzenie płynnych animacji warstwy symboli

Warstwy symboli mają domyślnie włączone wykrywanie kolizji. To wykrywanie kolizji ma na celu zapewnienie, że żadne dwa symbole nie nakładają się na siebie. Opcje ikony i tekstu warstwy symboli mają dwie opcje:

• allowOverlap - określa, czy symbol jest widoczny, gdy zderza się z innymi symbolami.
• ignorePlacement - określa, czy inne symbole mogą zderzać się z symbolem.

Obie te opcje są domyślnie ustawione na false wartość . Podczas animowania symbolu obliczenia wykrywania kolizji są uruchamiane na każdej ramce animacji, co może spowolnić animację i sprawić, że będzie ona mniej płynna. Aby wygładzić animację, ustaw te opcje na true.

Przykładowy kod animacji prostego symbolu przedstawia prosty sposób animowania warstwy symboli. Aby uzyskać kod źródłowy do tego przykładu, zobacz przykładowy kod Simple Symbol Animation.

Określanie zakresu poziomów powiększenia

Jeśli dane spełniają jedno z następujących kryteriów, należy określić minimalny i maksymalny poziom powiększenia warstwy, aby aparat renderowania mógł pominąć go poza zakresem poziomu powiększenia.

• Jeśli dane pochodzą ze źródła kafelka wektorowego, często warstwy źródłowe dla różnych typów danych są dostępne tylko za pośrednictwem zakresu poziomów powiększenia.
• Jeśli używasz warstwy kafelków, która nie ma kafelków dla wszystkich poziomów powiększenia od 0 do 24 i chcesz, aby renderowanie tylko na poziomach zawierało kafelki, a nie spróbuj wypełnić brakujące kafelki kafelkami z innych poziomów powiększenia.
• Jeśli chcesz renderować warstwę tylko na określonych poziomach powiększenia. Wszystkie warstwy mają minZoom opcję i maxZoom , w której warstwa jest renderowana w przypadku między tymi poziomami powiększenia na podstawie tej logiki maxZoom > zoom >= minZoom.

Przykład

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Określanie granic warstwy kafelka i zakresu powiększenia źródła

Domyślnie warstwy kafelków ładują kafelki na całym świecie. Jeśli jednak usługa kafelków zawiera kafelki tylko dla określonego obszaru, mapa próbuje załadować kafelki, gdy poza tym obszarem. W takim przypadku zostanie wykonane żądanie dla każdego kafelka i zaczekaj na odpowiedź, która może zablokować inne żądania wysyłane przez mapę, a tym samym spowolnić renderowanie innych warstw. Określenie granic warstwy kafelka powoduje, że mapa żąda tylko kafelków znajdujących się w tym polu ograniczenia. Ponadto, jeśli warstwa kafelka jest dostępna tylko między określonymi poziomami powiększenia, określ minimalną i maksymalną powiększenie źródła z tego samego powodu.

Przykład

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Użyj pustego stylu mapy, gdy mapa podstawowa nie jest widoczna

Jeśli warstwa jest nakładana na mapie, która całkowicie obejmuje mapę podstawową, rozważ ustawienie stylu mapy na blank wartość lub blank_accessible tak, aby mapa podstawowa nie została renderowana. Typowym scenariuszem w tym przypadku jest przepełnianie pełnego kafelka globusa bez nieprzezroczystości ani przezroczystego obszaru nad mapą podstawową.

Płynne animowanie warstw obrazu lub kafelka

Jeśli chcesz animować serię warstw obrazu lub kafelków na mapie. Często szybsze jest tworzenie warstwy dla każdej warstwy obrazu lub kafelka oraz zmienianie nieprzezroczystości niż aktualizowanie źródła pojedynczej warstwy na każdej ramce animacji. Ukrywanie warstwy przez ustawienie nieprzezroczystości na zero i wyświetlenie nowej warstwy przez ustawienie nieprzezroczystości na wartość większą niż zero jest szybsze niż aktualizowanie źródła w warstwie. Alternatywnie widoczność warstw może być przełączana, ale pamiętaj, aby ustawić czas trwania zanikania warstwy na zero, w przeciwnym razie animuje warstwę podczas wyświetlania, co powoduje efekt migotania, ponieważ poprzednia warstwa zostałaby ukryta, zanim nowa warstwa będzie widoczna.

Dostosowywanie logiki wykrywania kolizji warstwy symboli

Warstwa symboli ma dwie opcje, które istnieją zarówno dla ikony, jak i tekstu o nazwie allowOverlap i ignorePlacement. Te dwie opcje określają, czy ikona lub tekst symbolu mogą się nakładać lub nakładać. Gdy są one ustawione na falsewartość , warstwa symboli wykonuje obliczenia podczas renderowania każdego punktu, aby sprawdzić, czy koliduje z innym już renderowanym symbolem w warstwie, a jeśli tak, nie renderuj symbolu zderzającego. Jest to dobre w zmniejszaniu bałaganu na mapie i zmniejszaniu liczby renderowanych obiektów. Ustawiając te opcje na falsewartość , ta logika wykrywania kolizji jest pomijana, a wszystkie symbole są renderowane na mapie. Dostosuj tę opcję, aby uzyskać najlepszą kombinację wydajności i środowiska użytkownika.

Klastrowanie dużych zestawów danych punktów

Podczas pracy z dużymi zestawami punktów danych może się okazać, że w przypadku renderowania na określonych poziomach powiększenia wiele punktów nakłada się i jest widocznych tylko częściowo, jeśli w ogóle. Klastrowanie to proces grupowania punktów, które są blisko siebie i przedstawia je jako pojedynczy punkt klastrowany. Gdy użytkownik powiększa mapę, klastry dzielą się na poszczególne punkty. Może to znacznie zmniejszyć ilość danych, które należy renderować, sprawić, że mapa będzie mniej zaśmiecona i poprawić wydajność. Klasa DataSource ma opcje klastrowania danych lokalnie. Ponadto wiele narzędzi, które generują kafelki wektorowe, ma również opcje klastrowania.

Ponadto zwiększ rozmiar promienia klastra, aby zwiększyć wydajność. Większy promień klastra, tym mniej klastrowanych punktów należy śledzić i renderować. Aby uzyskać więcej informacji, zobacz Clustering point data in the Web SDK (Dane punktów klastrowania w zestawie WEB SDK).

Używanie ważonych map cieplnych grupowanych

Warstwa mapy cieplnej może łatwo renderować dziesiątki tysięcy punktów danych. W przypadku większych zestawów danych rozważ włączenie klastrowania w źródle danych i użycie małego promienia klastra i użycie właściwości klastrów point_count jako wagi dla mapy wysokości. Gdy promień klastra ma rozmiar tylko kilka pikseli, nie ma różnicy wizualnej w renderowanej mapie cieplnej. Użycie większego promienia klastra zwiększa wydajność, ale może zmniejszyć rozdzielczość renderowanej mapy cieplnej.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Aby uzyskać więcej informacji, zobacz Clustering and the heat maps layer (Klastrowanie i warstwa map cieplnych).

Zachowaj małe zasoby obrazów

Obrazy można dodawać do mapy sprite obrazów do renderowania ikon w warstwie symboli lub wzorcach w warstwie wielokątnej. Zachowaj małe rozmiary tych obrazów, aby zminimalizować ilość danych, które należy pobrać, oraz ilość miejsca zajętego w sprite obrazu mapy. W przypadku korzystania z warstwy symboli, która skaluje ikonę przy użyciu size opcji, użyj obrazu o maksymalnym rozmiarze, który ma być wyświetlany na mapie i nie jest większy. Dzięki temu ikona jest renderowana z wysoką rozdzielczością przy jednoczesnym zminimalizowaniu używanych zasobów. Ponadto pliki SVGs mogą być również używane jako mniejszy format pliku dla prostych obrazów ikon.

Optymalizowanie wyrażeń

Wyrażenia stylu oparte na danych zapewniają elastyczność i możliwości filtrowania i stylów danych na mapie. Istnieje wiele sposobów optymalizacji wyrażeń. Oto kilka wskazówek.

Zmniejszanie złożoności filtrów

Filtry są w pętli dla wszystkich danych w źródle danych i sprawdź, czy każdy filtr pasuje do logiki w filtrze. Jeśli filtry staną się złożone, może to spowodować problemy z wydajnością. Niektóre możliwe strategie rozwiązania tego problemu obejmują następujące kwestie.

• W przypadku używania kafelków wektorowych podziel dane na różne warstwy źródłowe.
• W przypadku korzystania z DataSource klasy podziel te dane na oddzielne źródła danych. Spróbuj zrównoważyć liczbę źródeł danych ze złożonością filtru. Zbyt wiele źródeł danych może również powodować problemy z wydajnością, więc może być konieczne przeprowadzenie pewnych testów, aby dowiedzieć się, co działa najlepiej w danym scenariuszu.
• W przypadku używania złożonego filtru w warstwie rozważ użycie wielu warstw z wyrażeniami stylów, aby zmniejszyć złożoność filtru. Unikaj tworzenia wielu warstw ze stylami zakodowanymi na stałe, gdy wyrażenia stylów mogą być używane jako duża liczba warstw może również powodować problemy z wydajnością.

Upewnij się, że wyrażenia nie generują błędów

Wyrażenia są często używane do generowania kodu w celu wykonywania obliczeń lub operacji logicznych w czasie renderowania. Podobnie jak kod w pozostałej części aplikacji, upewnij się, że obliczenia i logiczne mają sens i nie są podatne na błędy. Błędy w wyrażeniach powodują problemy z oceną wyrażenia, co może spowodować zmniejszenie wydajności i problemów z renderowaniem.

Jednym z typowych błędów, o których należy pamiętać, jest posiadanie wyrażenia, które opiera się na właściwości funkcji, która może nie istnieć we wszystkich funkcjach. Na przykład poniższy kod używa wyrażenia, aby ustawić właściwość color warstwy bąbelkowej na myColor właściwość funkcji.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

Powyższe funkcje kodu są poprawne, jeśli wszystkie funkcje w źródle danych mają myColor właściwość, a wartość tej właściwości jest kolorem. Może to nie być problem, jeśli masz pełną kontrolę nad danymi w źródle danych i wiesz, że niektóre funkcje mają prawidłowy kolor we myColor właściwości. Oznacza to, że aby ten kod był bezpieczny przed błędami, case wyrażenie może być używane z wyrażeniem has w celu sprawdzenia, czy funkcja ma myColor właściwość . Jeśli tak, to-color wyrażenie typu może służyć do próby przekonwertowania wartości tej właściwości na kolor. Jeśli kolor jest nieprawidłowy, można użyć koloru rezerwowego. Poniższy kod pokazuje, jak to zrobić i ustawia kolor rezerwowy na zielony.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Porządkowanie wyrażeń logicznych z najbardziej specyficznych do najmniej określonych

Zmniejsz łączną liczbę testów warunkowych wymaganych w przypadku używania wyrażeń logicznych zawierających wiele testów warunkowych, porządkując je od większości do najmniej szczegółowych.

Upraszczanie wyrażeń

Wyrażenia mogą być zaawansowane i czasami złożone. Prostsze jest wyrażenie, tym szybciej jest obliczane. Jeśli na przykład potrzebne jest proste porównanie, wyrażenie ['==', ['get', 'category'], 'restaurant'] podobne byłoby lepsze niż użycie wyrażenia dopasowania, takiego jak ['match', ['get', 'category'], 'restaurant', true, false]. W takim przypadku, jeśli sprawdzana właściwość jest wartością logiczną, get wyrażenie byłoby jeszcze prostsze ['get','isRestaurant'].

Rozwiązywanie problemów z zestawem Web SDK

Poniżej przedstawiono kilka wskazówek dotyczących debugowania niektórych typowych problemów napotkanych podczas opracowywania za pomocą zestawu Sdk sieci Web usługi Azure Mapy.

Dlaczego mapa nie jest wyświetlana podczas ładowania kontrolki sieci Web?

Kwestie do sprawdzenia:

• Upewnij się, że opcje uwierzytelniania są kompletne na mapie. Bez uwierzytelniania mapa ładuje pustą kanwę i zwraca błąd 401 na karcie sieciowej narzędzi deweloperskich przeglądarki.
• Upewnij się, że masz połączenie internetowe.
• Sprawdź konsolę pod kątem błędów narzędzi deweloperskich przeglądarki. Niektóre błędy mogą spowodować, że mapa nie zostanie renderowana. Debugowanie aplikacji.
• Upewnij się, że używasz obsługiwanej przeglądarki.

Wszystkie moje dane są wyświetlane po drugiej stronie świata, co się dzieje?

Współrzędne, nazywane również pozycjami, w zestawach SDK platformy Azure Mapy są zgodne ze standardowym formatem branżowym geoprzestrzennego [longitude, latitude]formatu . Ten sam format jest również sposobem definiowania współrzędnych w schemacie GeoJSON; podstawowe dane sformatowane w zestawach SDK usługi Azure Mapy. Jeśli dane są wyświetlane po przeciwnej stronie świata, najprawdopodobniej wynika to z odwrócenia wartości długości i szerokości geograficznej w informacjach o współrzędnych/położeniach.

Dlaczego znaczniki HTML są wyświetlane w niewłaściwym miejscu w kontrolce internetowej?

Kwestie do sprawdzenia:

• Jeśli używasz niestandardowej zawartości dla znacznika, upewnij się, że anchor opcje i pixelOffset są poprawne. Domyślnie dolny środek zawartości jest wyrównany do położenia na mapie.
• Upewnij się, że plik CSS dla usługi Azure Mapy został załadowany.
• Sprawdź element DOM znacznika HTML, aby sprawdzić, czy jakikolwiek kod CSS z aplikacji został dołączony do znacznika i ma wpływ na jego położenie.

Dlaczego ikony lub tekst w warstwie symboli są wyświetlane w niewłaściwym miejscu?

Sprawdź, czy anchor opcje i offset są poprawnie skonfigurowane, aby dopasować je do części obrazu lub tekstu, który ma być wyrównany do współrzędnych na mapie. Jeśli symbol jest niedostępny tylko wtedy, gdy mapa jest obracana, zaznacz rotationAlignment tę opcję. Domyślnie symbole obracają się przy użyciu widoku mapy, wyświetlanego w pozycji pionowej dla użytkownika. Jednak w zależności od scenariusza może być pożądane zablokowanie symbolu w orientacji mapy przez ustawienie rotationAlignment opcji mapna .

Jeśli symbol jest niedostępny tylko wtedy, gdy mapa jest rozmieszona/przechylona, zaznacz pitchAlignment opcję. Domyślnie symbole pozostają w pozycji pionowej w widoku mapy, gdy mapa jest rozmieszona lub przechylona. Jednak w zależności od scenariusza może być pożądane zablokowanie symbolu na boisku mapy przez ustawienie pitchAlignment opcji map.

Dlaczego żadne z moich danych nie są wyświetlane na mapie?

Kwestie do sprawdzenia:

• Sprawdź konsolę w narzędziach deweloperskich przeglądarki pod kątem błędów.
• Upewnij się, że źródło danych zostało utworzone i dodane do mapy oraz że źródło danych zostało połączone z warstwą renderowania, która została również dodana do mapy.
• Dodaj punkty przerwania w kodzie i przekrocznij je. Upewnij się, że dane są dodawane do źródła danych, a źródło danych i warstwy są dodawane do mapy.
• Spróbuj usunąć wyrażenia oparte na danych z warstwy renderowania. Możliwe, że jeden z nich może mieć w nim błąd powodujący problem.

Czy mogę użyć zestawu Sdk sieci Web usługi Azure Mapy w ramce iframe w trybie piaskownicy?

Tak.

Uzyskiwanie pomocy technicznej

Poniżej przedstawiono różne sposoby uzyskiwania pomocy technicznej dla usługi Azure Mapy w zależności od problemu.

Jak mogę zgłosić problem z danymi lub problem z adresem?

Zgłaszanie problemów przy użyciu witryny opinii usługi Azure Mapy. Szczegółowe instrukcje dotyczące raportowania problemów z danymi znajdują się w artykule Zapewnianie opinii o danych na platformie Azure Mapy.

Uwaga

Każdy przesłany problem generuje unikatowy adres URL do śledzenia. Czasy rozwiązywania różnią się w zależności od typu problemu i czasu wymaganego do sprawdzenia, czy zmiana jest poprawna. Zmiany zostaną wyświetlone w cotygodniowej aktualizacji usług renderowania, podczas gdy inne usługi, takie jak geokodowanie i routing, są aktualizowane co miesiąc.

Jak mogę zgłosić usterkę w usłudze lub interfejsie API?

Zgłoś problemy na stronie Pomoc i obsługa techniczna platformy Azure, wybierając przycisk Utwórz wniosek o pomoc techniczną.

Gdzie mogę uzyskać pomoc techniczną dotyczącą usługi Azure Mapy?

• W przypadku pytań związanych z wizualizacją usługi Azure Mapy Power BI skontaktuj się z pomocą techniczną usługi Power BI.

• W przypadku wszystkich innych usług Azure Mapy skontaktuj się z pomoc techniczna platformy Azure.

• W przypadku pytań lub komentarzy dotyczących określonych funkcji usługi Azure Mapy skorzystaj z forów deweloperów usługi Azure Mapy.

Następne kroki

Zobacz następujące artykuły, aby uzyskać więcej wskazówek dotyczących ulepszania środowiska użytkownika w aplikacji.

Udostępnianie aplikacji

Dowiedz się więcej na temat terminologii używanej przez usługę Azure Mapy i branżę geoprzestrzenną.

Słownik usługi Azure Mapy