Osvědčené postupy pro nástroje Azure Maps Web SDK

Tento dokument se zaměřuje na osvědčené postupy pro webovou sadu SDK služby Azure Maps, ale mnoho osvědčených postupů a optimalizací, které jsou popsané, je možné použít u všech ostatních sad SDK Služby Azure Maps.

Sada Azure Maps Web SDK poskytuje výkonné plátno pro vykreslování velkých prostorových datových sad mnoha různými způsoby. V některých případech existuje několik způsobů, jak vykreslit data stejným způsobem, ale v závislosti na velikosti datové sady a požadované funkčnosti může jedna metoda fungovat lépe než ostatní. Tento článek popisuje osvědčené postupy a tipy a triky pro maximalizaci výkonu a vytvoření bezproblémového uživatelského prostředí.

Obecně platí, že když chcete zlepšit výkon mapy, hledejte způsoby, jak snížit počet vrstev a zdrojů a složitost sad dat a styly vykreslování, které se používají.

Osvědčené postupy zabezpečení

Další informace o osvědčených postupech zabezpečení najdete v tématu Osvědčené postupy ověřování a autorizace.

Použití nejnovějších verzí Azure Maps

Sady SDK Služby Azure Maps procházejí pravidelným testováním zabezpečení spolu se všemi externími knihovnami závislostí používanými sadami SDK. Jakýkoli známý problém se zabezpečením je včas opraven a uveden do provozu. Pokud vaše aplikace odkazuje na nejnovější hlavní verzi hostované verze webové sady SDK služby Azure Maps, automaticky obdrží všechny aktualizace podverze, které zahrnují opravy související se zabezpečením.

Pokud sami hostujete webovou sadu Azure Maps Web SDK prostřednictvím modulu npm, zajistěte použití symbolu stříšky (^) v kombinaci s číslem verze balíčku npm služby Azure Maps ve vašem package.json souboru, aby se odkazovalo na nejnovější podverzi.

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

Tip

Vždy používejte nejnovější verzi ovládacího prvku Npm Azure Maps. Další informace najdete v dokumentaci npm v tématu azure-maps-control.

Optimalizace počátečního načtení mapy

Když se webová stránka načítá, jednou z prvních věcí, kterou chcete udělat, je začít vykreslovat co nejdříve, aby uživatel nezíral na prázdnou obrazovku.

Sledování události připravené pro mapy

Podobně platí, že když se mapa zpočátku načte, často je potřeba načíst data co nejrychleji, takže uživatel nevyhlíží prázdnou mapu. Vzhledem k tomu, že mapa načítá prostředky asynchronně, musíte počkat, až bude mapa připravená k interakci, než se pokusíte vykreslit vlastní data. Existují dvě události, na které můžete čekat: událost load a událost ready. Událost načtení se aktivuje poté, co je dokončeno načítání počátečního zobrazení mapy a načtení všech dlaždic mapy. Pokud se zobrazí chyba Styl se nenačítá, měli byste použít load událost a počkat, až se styl plně načte.

Událost 'ready' se aktivuje, když jsou k dispozici minimální mapové zdroje potřebné pro zahájení interakce s mapou. Přesněji řečeno, událost ready se aktivuje, když se mapa poprvé načítá data stylu. Připravená událost se často aktivuje v polovině události načítání, a proto vám umožní začít načítat data do mapy dříve. V tuto chvíli se vyhněte změnám stylu nebo jazyka mapy, protože to může aktivovat opětovné načtení stylu.

Opožděné načtení webové sady SDK služby Azure Maps

Pokud mapu nepotřebujete hned, načtěte Azure Maps Web SDK až tehdy, když je potřebná. Tím se zpožďuje načítání souborů JavaScriptu a CSS používaných webovou sadou SDK služby Azure Maps, dokud nebude potřeba. Běžným scénářem, kdy k tomu dochází, je načtení mapy na panelu karet nebo informačního panelu, který se nezobrazuje při načtení stránky.

Ukázkový kód „Lazy Load the Map“ demonstruje, jak oddálit načítání Azure Maps Web SDK, dokud není stisknuto tlačítko. Zdrojový kód najdete v části vzorový kód Opožděného načítání mapy.

Přidání zástupného symbolu pro mapu

Pokud načtení mapy nějakou dobu trvá kvůli omezením sítě nebo jiným prioritám v rámci vaší aplikace, zvažte přidání malého obrázku na pozadí do mapy div jako zástupného symbolu pro mapu. Tím se vyplní prázdno mapy div při jejím načítání.

Nastavení počátečního stylu mapy a možností kamery při inicializaci

Aplikace často chtějí mapu načíst do konkrétního umístění nebo stylu. Někdy vývojáři čekají, až se mapa načte (nebo čekají na událost ready), a pak použijí funkce mapy setCamera nebo setStyle. Často to trvá déle, než se dostanete k požadovanému počátečnímu zobrazení mapy, protože mnoho prostředků se ve výchozím nastavení načte před načtením prostředků potřebných pro požadované zobrazení mapy. Lepším přístupem je předání požadovaných možností mapové kamery a stylu do mapy při inicializaci.

Optimalizace zdrojů dat

Webová sada SDK má dva zdroje dat.

• Zdroj GeoJSON: Třída DataSource spravuje nezpracovaná data o poloze v místním formátu GeoJSON. Vhodné pro malé až střední datové sady (nahoru ze stovek tisíc funkcí).
• Zdroj vektorových dlaždic: Třída VectorTileSource načítá data formátovaná jako vektorové dlaždice pro současné zobrazení mapy na základě systému dlaždic map. Ideální pro velké až masivní datové sady (miliony nebo miliardy funkcí).

Použití řešení založených na dlaždicích pro velké datové sady

Pokud pracujete s většími datovými sadami obsahujícími miliony funkcí, doporučeným způsobem, jak dosáhnout optimálního výkonu, je zveřejnit data pomocí řešení na straně serveru, jako je služba dlaždic vektorů nebo rastrových obrázků.
Vektorové dlaždice jsou optimalizované tak, aby načítaly pouze data, která jsou v zobrazení, s geometriemi oříznutými podle oblasti soustředění dlaždice a zobecněny tak, aby odpovídaly rozlišení mapy při úrovni zvětšení dlaždice.

Je také možné vytvořit vlastní službu, která vykresluje datové sady jako rastrové dlaždice obrázků na straně serveru a načíst data pomocí třídy TileLayer v mapové sadě SDK. To poskytuje výjimečný výkon, protože mapa potřebuje načíst a spravovat pouze několik desítek obrázků maximálně. Použití rastrových dlaždic má ale určitá omezení, protože nezpracovaná data nejsou k dispozici místně. Sekundární služba je často nutná k napájení jakéhokoli typu interakce, například zjistit, na jaký obrazec uživatel klikl. Kromě toho je velikost souboru rastrové dlaždice často větší než velikost komprimované vektorové dlaždice, která obsahuje generalizované a pro úrovně přiblížení optimalizované geometrie.

Další informace o zdrojích dat najdete v tématu Vytvoření zdroje dat.

Kombinování více datových sad do zdroje jedné vektorové dlaždice

Čím méně zdrojů dat musí mapa spravovat, tím rychleji může zpracovávat všechny funkce, které se mají zobrazit. Zejména pokud jde o zdroje dlaždic, kombinace dvou vektorových zdrojů dlaždic dohromady zkracuje počet požadavků HTTP na načtení dlaždic v polovině a celkový objem dat by byl o něco menší, protože existuje pouze jedna hlavička souboru.

Kombinování více datových sad do jednoho zdroje vektorových dlaždic lze dosáhnout pomocí nástroje, jako je Tippecanoe. Datové sady je možné kombinovat do jedné kolekce funkcí nebo rozdělit do samostatných vrstev v rámci vektorové dlaždice označované jako zdrojové vrstvy. Při připojování zdroje vektorové dlaždice k vykreslovací vrstvě byste zadali zdrojovou vrstvu obsahující data, která chcete vykreslit s vrstvou.

Snížit počet aktualizací plátna v důsledku změn dat

Data ve DataSource třídě je možné přidat nebo aktualizovat několika způsoby. Následující seznam ukazuje různé metody a některé aspekty, které zajistí dobrý výkon.

• Funkci zdrojů add dat lze použít k přidání jedné nebo více funkcí do zdroje dat. Pokaždé, když se tato funkce nazývá, aktivuje aktualizaci plátna mapy. Pokud přidáváte mnoho prvků, zkombinujte je do pole nebo kolekce prvků a předejte je do této funkce najednou, místo abyste prováděli smyčku nad datovou sadou a volali tuto funkci pro každý prvek zvlášť.
• Funkci zdrojů setShapes dat lze použít k přepsání všech obrazců ve zdroji dat. Pod kapotou kombinuje zdroje dat clear a funkce add a provádí jednu aktualizaci mapového plátna místo dvou, což je rychlejší. Tuto funkci nezapomeňte použít, když chcete aktualizovat všechna data ve zdroji dat.
• Funkci zdrojů importDataFromUrl dat lze použít k načtení souboru GeoJSON prostřednictvím adresy URL do zdroje dat. Po stažení se data předají do funkce zdrojů add dat. Pokud je soubor GeoJSON hostovaný v jiné doméně, ujistěte se, že druhá doména podporuje žádosti mezi doménou (CORS). Pokud není zvažováno kopírování dat do místního souboru na vaší doméně nebo vytvoření proxy služby s povolenými CORS. Pokud je soubor velký, zvažte jeho převod na vektorový dlaždicový zdroj.
• Pokud jsou funkce zabalené se Shape třídou, addPropertysetCoordinatesfunkce a setProperties funkce obrazce všechny aktivují aktualizaci ve zdroji dat a aktualizaci plátna mapy. Všechny funkce vrácené zdroji getShapes dat a getShapeById funkcemi se automaticky zabalí do Shape třídy. Pokud chcete aktualizovat několik obrazců, je rychlejší je převést na JSON pomocí funkce zdroje toJson dat, úpravou GeoJSON a předáním těchto dat do funkce zdroje setShapes dat.

Vyhněte se zbytečnému volání funkce vymazat zdroje dat.

Voláním jasné funkce DataSource třídy dojde k aktualizaci plátna mapy. clear Pokud je funkce volána vícekrát v řádku, může dojít ke zpoždění, zatímco mapa čeká na každé aktualizace.

Toto je běžný scénář v aplikacích, které vymažou zdroj dat, stáhnutí nových dat, opětovné vymazání zdroje dat a následné přidání nových dat do zdroje dat. V závislosti na požadovaném uživatelském prostředí by byly lepší následující alternativy.

• Před stažením nových dat vymažte data a pak nová data předejte do zdrojů add nebo do funkce setShapes. Pokud se jedná o jedinou sadu dat na mapě, je mapa prázdná, zatímco se stahují nová data.
• Stáhněte si nová data a pak je předejte do funkce zdrojů setShapes dat. Tím se nahradí všechna data na mapě.

Odebrání nepoužívaných funkcí a vlastností

Pokud vaše datová sada obsahuje funkce, které se ve vaší aplikaci nepoužijí, odeberte je. Podobně odeberte všechny vlastnosti funkcí, které nejsou potřeba. To má několik výhod:

• Snižuje množství dat, která je potřeba stáhnout.
• Snižuje počet funkcí, které je potřeba projít při vykreslování dat.
• Někdy může pomoct zjednodušit nebo odebrat výrazy a filtry řízené daty, což znamená menší nároky na zpracování v době vykreslování.

Pokud mají funkce řadu vlastností nebo obsahu, je mnohem výkonnější omezit to, co se přidá do zdroje dat, jenom na ty, které jsou potřeba k vykreslování, a mít samostatnou metodu nebo službu pro načtení jiné vlastnosti nebo obsahu v případě potřeby. Například, pokud máte jednoduchou mapu, která zobrazuje umístění, po výběru se zobrazí množství podrobného obsahu. Pokud chcete použít styly řízené daty k přizpůsobení způsobu vykreslení umístění na mapě, načtěte do zdroje dat jenom vlastnosti potřebné. Pokud chcete zobrazit podrobný obsah, použijte ID funkce k samostatnému načtení dalšího obsahu. Pokud je obsah uložený na serveru, můžete snížit množství dat, která je potřeba stáhnout při počátečním načtení mapy pomocí služby k načtení asynchronně.

Kromě toho snížení počtu významných číslic v souřadnicích funkcí může také výrazně snížit velikost dat. Není neobvyklé, že souřadnice obsahují 12 nebo více desetinných míst; ale šest desetinných míst má přesnost asi 0,1 metrů, což je často přesnější než umístění, které souřadnice představuje. Když bude mít více než šest desetinných míst, pravděpodobně se nezmění způsob vykreslení dat a vyžaduje, aby si uživatel stáhl další data bez další výhody.

Tady je seznam užitečných nástrojů pro práci s daty GeoJSON.

Použití samostatného zdroje dat pro rychlé změny dat

Někdy je potřeba rychle aktualizovat data na mapě pro věci, jako je zobrazení živých aktualizací streamovaných dat nebo animování funkcí. Když se zdroj dat aktualizuje, vykreslovací modul prochází a vykresluje všechny funkce ve zdroji dat. Zvyšte celkový výkon rozdělením statických dat od rychlé změny dat do různých zdrojů dat a snížením počtu funkcí, které se během každé aktualizace znovu vykreslují.

Pokud používáte vektorové dlaždice s živými daty, můžete snadno podporovat aktualizace pomocí hlavičky expires odpovědi. Ve výchozím nastavení se všechny zdroje vektorových dlaždic nebo vrstvy rastrových dlaždic automaticky znovu načtou po datu expires. Dlaždice toků provozu a incidentů v mapě používají tuto funkci, aby zajistily zobrazení aktuálních dat o provozu v reálném čase. Tuto funkci lze zakázat nastavením možnosti služby refreshExpiredTiles map na false.

Úprava možností vyrovnávací paměti a tolerance ve zdrojích dat GeoJSON

Třída DataSource převádí nezpracovaná data o poloze na místní vektorové dlaždice pro vykreslování v reálném čase. Tyto místní vektorové dlaždice vystřižují nezpracovaná data na hranice oblasti dlaždic s bitem vyrovnávací paměti, aby se zajistilo hladké vykreslování mezi dlaždicemi. Čím menší je možnost buffer, tím méně překrývajících se dat je uloženo v místních vektorových dlaždicích a tím lepší je výkon. Avšak, tím větší je riziko vzniku artefaktů vykreslování. Zkuste upravit tuto možnost, abyste získali správnou kombinaci výkonu s minimálními nežádoucími efekty vykreslování.

Třída DataSource má také volbu tolerance, která se používá s algoritmem zjednodušení Douglas-Peucker při redukci rozlišení geometrií ke zpracování. Zvýšení této hodnoty tolerance snižuje rozlišení geometrií a zase zvyšuje výkon. Upravte tuto možnost, abyste získali správnou kombinaci rozlišení geometrie a výkonu pro vaši sadu dat.

Nastavení možnosti maximálního přiblížení zdrojů dat GeoJSON

Třída DataSource převádí nezpracovaná data o poloze na místní vektorové dlaždice pro vykreslování v reálném čase. Ve výchozím nastavení se to provádí až do úrovně přiblížení 18, kdy se při dalším přiblížení používají data z dlaždic vygenerovaných pro úroveň přiblížení 18. To funguje dobře u většiny datových sad, které musí mít při přiblížení na těchto úrovních vysoké rozlišení. Pokud ale pracujete se sadami dat, které budou spíše viděny při větším oddálení, jako například při prohlížení hranic států nebo provincií, nastavení možnosti zdroje dat na menší hodnotu, jako minZoom, snižuje množství výpočetních operací, generování místních dlaždic a paměť používanou zdrojem dat, což zvýší výkon.

Minimalizace odpovědi GeoJSON

Při načítání dat GeoJSON ze serveru, ať už prostřednictvím služby nebo načítáním plochého souboru, nezapomeňte minimalizovat data, aby se odstranily zbytečné znaky mezery, které způsobují, že velikost stahování je větší, než je nutné.

Přístup k nezpracované geoJSON pomocí adresy URL

Je možné ukládat objekty GeoJSON vložené do JavaScriptu, ale tato funkce používá více paměti, protože kopie jsou uloženy v rámci proměnné, kterou jste vytvořili pro tento objekt, a instance zdroje dat, která ji spravuje v rámci samostatného webového pracovního procesu. Zpřístupněte GeoJSON své aplikaci pomocí adresy URL, a zdroj dat načte jednu kopii dat přímo do webového pracovníka datového zdroje.

Optimalizace vykreslovacích vrstev

Azure Maps poskytuje několik různých vrstev pro vykreslování dat na mapě. Existuje mnoho optimalizací, které můžete využít k přizpůsobení těchto vrstev vašemu scénáři zvýšení výkonu a celkovému uživatelskému prostředí.

Vytvoření vrstev jednou a jejich opakované použití

Sada Azure Maps Web SDK je řízená daty. Data vstupují do zdrojů dat, které jsou pak připojeny k vykreslovacím vrstvám. Pokud chcete změnit data na mapě, aktualizujte data ve zdroji dat nebo změňte možnosti stylu ve vrstvě. To je často rychlejší než odebrání a následné opětovné vytvoření vrstev při každé změně.

Zvažte vrstvu bublin nad vrstvou symbolů.

Bublinová vrstva vykresluje body jako kruhy na mapě a jejich obvod a barvu lze snadno upravit pomocí výrazu řízeného daty. Vzhledem k tomu, že kruh je jednoduchý obrazec pro WebGL kreslení, vykreslovací modul jej dokáže vykreslit rychleji než symbolovou vrstvu, která musí načíst a vykreslit obrázek. Rozdíl v výkonu těchto dvou vrstev vykreslování je patrný při vykreslování desítek tisíc bodů.

Používejte značky HTML a automaticky otevíraná okna střídmě.

Na rozdíl od většiny vrstev webového ovládacího prvku Azure Maps, které k vykreslování používají WebGL, používají značky HTML a automaticky otevírané okno tradiční prvky DOM pro vykreslování. Čím více značek HTML a automaticky otevíraných oken se přidá na stránku, tím více prvků DOM existuje. Výkon se může zhoršit po přidání několika stovek značek HTML nebo automaticky otevíraných oken. U větších datových sad zvažte buď seskupení dat, nebo použití symbolu nebo bublinové vrstvy.

Ukázka kódu pro opětovné použití vyskakovacího okna s více piny ukazuje, jak vytvořit jedno vyskakovací okno a opakovaně ho použít aktualizací jeho obsahu a pozice. Zdrojový kód najdete v části Ukázkový kód pro opětovné použití dialogového okna s vícero piny.

To znamená, že pokud máte jen několik bodů k vykreslení na mapě, může být preferována jednoduchost značek HTML. Kromě toho lze značky HTML snadno přetáhnout v případě potřeby.

Kombinování vrstev

Mapa dokáže vykreslit stovky vrstev, ale čím více vrstev je, tím déle trvá vykreslení scény. Jednou ze strategií pro snížení počtu vrstev je kombinování vrstev, které mají podobné styly, nebo se dají stylovat pomocí stylů řízených daty.

Představte si například sadu dat, v níž mají všechny isHealthy atributy vlastnost, která může mít hodnotu true nebo false. Pokud vytváříte vrstvu bublin, která na základě této vlastnosti vykresluje různé barevné bubliny, existuje několik způsobů, jak je znázorněno v následujícím seznamu, od nejmenšího výkonu po nejvýkonnější.

• Rozdělte data do dvou zdrojů dat na základě hodnoty isHealthy a připojte bublinovou vrstvu s pevně zakódovanou barvou k každému zdroji dat.
• Vložte všechna data do jednoho zdroje dat a vytvořte dvě vrstvy bublin s pevně zakódovanou barvou a filtrem na isHealthy základě vlastnosti.
• Vložte všechna data do jednoho zdroje dat, vytvořte jednu bublinovou vrstvu s výrazem stylu case pro možnost barvy založené na vlastnosti isHealthy. Tady je ukázka kódu, která to demonstruje.

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'
    ]
});

Vytvořte animace hladké vrstvy symbolů

Vrstvy symbolů mají ve výchozím nastavení povolenou detekci kolizí. Cílem této detekce kolizí je zajistit, aby se nepřekrývaly žádné dva symboly. Ikona a možnosti textu vrstvy symbolu mají dvě možnosti:

• allowOverlap – určuje, jestli je symbol viditelný, když koliduje s jinými symboly.
• ignorePlacement - určuje, jestli ostatní symboly smí kolidovat se symbolem.

Obě tyto možnosti jsou ve výchozím nastavení nastavené na false hodnotu. Při animaci symbolu se výpočty detekce kolizí provádějí na každém snímku animace, což může zpomalit animaci a způsobit, že vypadá méně plynule. Pokud chcete animaci vyhladit, nastavte tyto možnosti na truehodnotu .

Ukázka kódu animace jednoduchého symbolu ukazuje jednoduchý způsob animace vrstvy symbolů. Zdrojový kód pro tuto ukázku najdete v ukázkovém kódu Simple Symbol Animation.

Určení rozsahu úrovně přiblížení

Pokud vaše data splňují jedno z následujících kritérií, zadejte minimální a maximální úroveň přiblížení vrstvy, aby ho vykreslovací modul mohl přeskočit mimo rozsah úrovně přiblížení.

• Pokud data pocházejí ze zdroje vektorové dlaždice, jsou často zdrojové vrstvy pro různé datové typy k dispozici pouze prostřednictvím rozsahu úrovní přiblížení.
• Pokud používáte vrstvu dlaždic, která nemá dlaždice pro všechny úrovně přiblížení 0 až 24 a chcete, aby se vykreslovala pouze na těch úrovních, kde má dlaždice, aniž by se pokoušela vyplnit chybějící dlaždice dlaždicemi z jiných úrovní přiblížení.
• Pokud chcete vykreslit jenom vrstvu na určitých úrovních přiblížení. Všechny vrstvy mají možnost minZoom a maxZoom, kde se vrstva vykresluje mezi těmito úrovněmi přiblížení podle logiky maxZoom > zoom >= minZoom.

Příklad

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

Určete hranice vrstvy dlaždic a rozsah zoomu zdroje

Ve výchozím nastavení vrstvy dlaždic načítají dlaždice po celém světě. Pokud ale služba dlaždic obsahuje pouze dlaždice pro určitou oblast, mapa se pokusí načíst dlaždice mimo tuto oblast. Když k tomu dojde, vytvoří se požadavek na každou dlaždici a počká na odpověď, která může blokovat další požadavky provedené mapou, a tím zpomalí vykreslování jiných vrstev. Zadání hranic vrstvy dlaždic způsobí, že mapa bude vyžadovat pouze dlaždice, které jsou v daném ohraničujícím rámečku. Pokud je dlaždicová vrstva dostupná pouze mezi určitými úrovněmi přiblížení, zadejte minimální a maximální zdrojový zoom ze stejného důvodu.

Příklad

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
});

Použití prázdného stylu mapy, pokud základní mapa není viditelná

Pokud je vrstva překryvná na mapě, která zcela pokrývá základní mapu, zvažte nastavení stylu mapy na blank nebo blank_accessible tak, aby se základní mapa nevykreslila. Běžným scénářem je překrytí celé dlaždice zeměkoule, která nemá opacitu nebo má průhlednou plochu, nad základní mapou.

Hladce animovat vrstvy obrázků nebo dlaždic

Pokud chcete animovat řadu vrstev obrázků nebo dlaždic na mapě. Často je rychlejší vytvořit vrstvu pro každou vrstvu obrázku nebo dlaždice a změnit neprůhlednost než aktualizovat zdroj jedné vrstvy na každém animačním rámečku. Skrytí vrstvy nastavením neprůhlednosti na nulu a zobrazením nové vrstvy nastavením její neprůhlednosti na hodnotu větší než nula je rychlejší než aktualizace zdroje ve vrstvě. Případně je možné přepnout viditelnost vrstev, ale nezapomeňte nastavit dobu prolnutí vrstvy na nulu. Jinak se při zobrazení vrstvy animuje, což způsobí blikající efekt, protože předchozí vrstva je skrytá, než se nová vrstva zobrazí.

Úprava logiky detekce kolizí vrstev symbolů

Vrstva symbolu má dvě možnosti, které existují pro ikonu i text volaný allowOverlap a ignorePlacement. Tyto dvě možnosti určují, jestli se ikona nebo text symbolu můžou překrývat nebo překrývat. Když nastavíte hodnotu false, vrstva symbolů provede výpočty při vykreslování jednotlivých bodů, aby viděla, jestli koliduje s jakýmkoli jiným již vykreslovaným symbolem ve vrstvě, a pokud ano, nevykreslujte kolísající symbol. To je dobré při zmenšení nepotřebných dat na mapě a snížení počtu vykreslovaných objektů. Nastavením těchto možností na false, tato logika detekce kolizí se přeskočí a všechny symboly se vykreslují na mapě. Upravte tuto možnost, abyste získali nejlepší kombinaci výkonu a uživatelského prostředí.

Datové sady velkých bodů clusteru

Při práci s velkými sadami datových bodů můžete zjistit, že při vykreslení na určitých úrovních přiblížení se mnoho bodů překrývají a jsou viditelné pouze částečně, pokud vůbec. Clustering je proces seskupení bodů, které jsou blízko sebe a představují je jako jeden skupinový bod. Když se uživatel na mapě přibližuje, clustery se rozdělí do jednotlivých bodů. To může výrazně snížit množství dat, která je potřeba vykreslit, aby mapa byla méně nepotřebná a zlepšila výkon. Třída DataSource má možnosti pro místní clusteringová data. Kromě toho mnoho nástrojů, které generují vektorové dlaždice, mají také možnosti clusteringu.

Navíc zvyšte velikost poloměru clusteru, aby se zlepšil výkon. Čím větší je poloměr clusteru, tím méně clusterovaných bodů je potřeba sledovat a vykreslovat. Další informace naleznete v části Seskupování bodových dat ve Web SDK.

Použijte vážené shlukové tepelné mapy

Vrstva teplotní mapy může snadno vykreslit desítky tisíc datových bodů. U větších sad dat zvažte povolení clusteringu ve zdroji dat a použití malého poloměru clusteru a použití vlastnosti clusters point_count jako váhy pro mapu výšky. Pokud má poloměr clusteru velikost jen pár pixelů, je ve vykreslené heatmapě malý vizuální rozdíl. Použití většího poloměru clusteru může výrazně zlepšit výkon, ale zároveň způsobit snížení rozlišení vykreslené teplotní mapy.

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

Další informace naleznete v tématu Clustering a vrstva heat map.

Uchovávejte malé zdroje obrázků

Obrázky je možné přidat do spritu obrázků map pro vykreslování ikon ve vrstvě symbolů nebo vzorech ve vrstvě mnohoúhelníku. Udržujte tyto obrázky malé, abyste minimalizovali množství dat, která je potřeba stáhnout, a množství místa, které zabírají v spritu obrázků map. Při použití vrstvy symbolů, která škáluje ikonu pomocí možnosti size, použijte obrázek, který je maximální velikostí vašeho záměru zobrazení na mapě a ani větší. Tím zajistíte, že se ikona vykreslí s vysokým rozlišením a minimalizuje prostředky, které používá. Soubory SVG lze také použít jako menší formát souboru pro jednoduché obrázky ikon.

Optimalizace výrazů

Výrazy stylu řízené daty poskytují flexibilitu a výkon pro filtrování a stylování dat na mapě. Výrazy je možné optimalizovat mnoha způsoby. Tady je několik tipů.

Snížení složitosti filtrů

Filtry prochází všechna data v datovém zdroji a kontrolují, zda každý filtr odpovídá logice ve filtru. Pokud se filtry stanou složitými, může to způsobit problémy s výkonem. Mezi možné strategie, které je třeba vyřešit, patří následující.

• Pokud používáte vektorové dlaždice, rozdělte data do různých zdrojových vrstev.
• Pokud používáte DataSource třídu, rozdělte tato data do samostatných zdrojů dat. Pokuste se vyvážit počet zdrojů dat se složitostí filtru. Příliš mnoho zdrojů dat může také způsobit problémy s výkonem, takže možná budete muset provést testování, abyste zjistili, co je pro váš scénář nejvhodnější.
• Při použití složitého filtru ve vrstvě zvažte použití více vrstev s výrazy stylu, abyste snížili složitost filtru. Vyhněte se vytváření množství vrstev s pevně zakódovanými styly; pokud lze použít výrazy stylu, velký počet vrstev může také způsobit problémy s výkonem.

Ujistěte se, že výrazy nevytváří chyby.

Výrazy se často používají ke generování kódu pro provádění výpočtů nebo logických operací v době vykreslování. Stejně jako kód ve zbytku aplikace, se ujistěte, že výpočty a logika dávají smysl a nejsou náchylné k chybám. Chyby ve výrazech způsobují problémy při vyhodnocování výrazu, což může vést ke snížení výkonu a problémům s vykreslováním.

Jednou z běžných chyb, které je třeba mít na paměti, je výraz, který spoléhá na vlastnost funkce, která nemusí existovat na všech funkcích. Například následující kód používá výraz k nastavení vlastnosti barvy bublinové vrstvy na myColor vlastnost funkce.

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

Výše uvedený kód funguje správně, pokud všechny funkce ve zdroji dat mají myColor vlastnost a hodnota této vlastnosti je barva. To nemusí být problém, pokud máte úplnou kontrolu nad daty ve zdroji dat a víte, že některé funkce mají platnou myColor barvu ve vlastnosti. To znamená, že chcete-li tento kód zabezpečit před chybami, výraz case lze použít s výrazem has ke kontrole, zda má funkce vlastnost myColor. Pokud ano, to-color lze výraz typu použít k pokusu o převod hodnoty této vlastnosti na barvu. Pokud je barva neplatná, můžete použít náhradní barvu. Následující kód ukazuje, jak to provést a nastaví záložní barvu na zelenou.

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'
    ]
});

Seřaďte logické výrazy od nejvíce specifických po nejméně specifické

Snižte celkový počet podmíněných testů požadovaných při použití logických výrazů, které obsahují více podmíněných testů, jejich pořadím od většiny po nejméně konkrétní.

Zjednodušení výrazů

Výrazy můžou být výkonné a někdy složité. Méně složité výrazy se vyhodnocují rychleji. Pokud je například potřeba jednoduché porovnání, výraz jako ['==', ['get', 'category'], 'restaurant'] by byl lepší než použití výrazu shody, jako je ['match', ['get', 'category'], 'restaurant', true, false]. V tomto případě je vlastnost, která je zaškrtnutá, logická hodnota, get výraz by byl ještě jednodušší ['get','isRestaurant'].

Řešení potíží s webovou sadou SDK

Tady je několik tipů pro ladění některých běžných problémů, ke kterým dochází při vývoji pomocí webové sady SDK služby Azure Maps.

Proč se při načítání webového ovládacího prvku nezobrazuje mapa?

Co je potřeba zkontrolovat:

• Ujistěte se, abyste v mapě dokončili možnosti autentizace. Bez ověřování načte mapa prázdné plátno a v kartě sítě nástrojů pro vývojáře prohlížeče zobrazí chybu 401.
• Ujistěte se, že máte připojení k internetu.
• Zkontrolujte chyby vývojářských nástrojů prohlížeče v konzole. Některé chyby můžou způsobit, že se mapa nevykreslí. Ladění aplikace
• Ujistěte se, že používáte podporovaný prohlížeč.

Všechna moje data se zobrazují na druhé straně světa, co se děje?

Souřadnice, označované také jako pozice, jsou v sadách SDK Služby Azure Maps v souladu s geoprostorovým standardním formátem [longitude, latitude]. Stejný formát je zároveň tím, jak jsou souřadnice definovány ve schématu GeoJSON; je to jádro formátu používaného v sadách SDK Azure Maps. Pokud se data zobrazují na opačné straně světa, je nejpravděpodobnější, že se hodnoty zeměpisné délky a zeměpisné šířky v informacích o souřadnici a poloze obrátí.

Proč se značky HTML zobrazují na nesprávném místě ve webovém ovládacím prvku?

Co je potřeba zkontrolovat:

• Pokud pro značku používáte vlastní obsah, ujistěte se, že možnosti anchor a pixelOffset jsou správné. Ve výchozím nastavení je dolní střed obsahu zarovnaný s umístěním na mapě.
• Ujistěte se, že je načten soubor CSS pro Azure Maps.
• Zkontrolujte element DOM značky HTML a zjistěte, jestli se k značce připojilo nějaké CSS z vaší aplikace, které ovlivňuje její pozici.

Proč se ikony nebo text ve vrstvě symbolů zobrazují na nesprávném místě?

Zkontrolujte, zda jsou možnosti anchor a offset nakonfigurované správně tak, aby odpovídaly části vašeho obrázku nebo textu, kterou chcete zarovnat se souřadnicí na mapě. Pokud je symbol mimo svou obvyklou polohu pouze při otočení mapy, zaškrtněte tuto možnost rotationAlignment. Ve výchozím nastavení se symboly otáčejí spolu s oblastí zobrazení mapy, aby se uživateli zobrazovaly svisle. V závislosti na scénáři může být ale žádoucí uzamknout symbol na orientaci mapy nastavením možnosti rotationAlignment na map.

Pokud je symbol mimo místo, když je mapa překlopená nebo nakloněná, zaškrtněte možnost pitchAlignment. Ve výchozím nastavení zůstávají symboly ve výřezu mapy svislé, když je mapa naklopená nebo nakloněná. Ale v závislosti na vašem scénáři může být žádoucí uzamknout symbol na sklon mapy nastavením pitchAlignment možnosti map.

Proč se na mapě nezobrazují žádná moje data?

Co je potřeba zkontrolovat:

• Zkontrolujte chyby v konzole v vývojářských nástrojích prohlížeče.
• Ujistěte se, že byl vytvořen a přidán zdroj dat do mapy a že je zdroj dat připojený k vrstvě vykreslování, která byla dříve přidána do mapy.
• Přidejte do kódu body přerušení a projděte si ho. Zajistěte přidání dat do zdroje dat a přidání zdroje a vrstev dat do mapy.
• Zkuste z vrstvy vykreslování odebrat výrazy řízené daty. Je možné, že jeden z nich může mít chybu, která způsobuje problém.

Můžu použít webovou sadu SDK služby Azure Maps v rámci iframe v izolovaném prostoru (sandbox)?

Ano.

Získání podpory

Níže jsou uvedené různé způsoby, jak získat podporu pro Azure Maps v závislosti na vašem problému.

Jak nahlásit problém s daty nebo s adresou?

Nahlašte problémy pomocí webu pro zpětnou vazbu Azure Maps. Podrobné pokyny o nahlašování problémů s daty najdete v Poskytnutí zpětné vazby k datům pro Azure Maps.

Poznámka:

Každý odeslaný problém vygeneruje jedinečnou adresu URL pro jeho sledování. Časy řešení se liší v závislosti na typu problému a času potřebném k ověření správnosti změny. Změny se zobrazí v týdenní aktualizaci služeb vykreslování, zatímco ostatní služby, jako je geokódování a směrování, se aktualizují každý měsíc.

Jak nahlásit chybu ve službě nebo rozhraní API?

Nahlásit problémy na stránce Nápověda a podpora Azure výběrem tlačítka Vytvořit žádost o podporu

Kde získám technickou pomoc pro Azure Maps?

• Pokud máte dotazy související s vizuálem Power BI v Azure Maps, obraťte se na podporu Power BI.

• U všech ostatních služeb Azure Maps kontaktujte podpora Azure.

• Dotazy nebo komentáře ke konkrétním funkcím Azure Maps najdete ve fórech pro vývojáře Azure Maps.

Další kroky

Další tipy ke zlepšení uživatelského prostředí ve vaší aplikaci najdete v následujících článcích.

Zpřístupnění aplikace

Přečtěte si další informace o terminologii používané službou Azure Maps a geoprostorovým odvětvím.

Glosář služby Azure Maps