Osvědčené postupy pro sadu Azure Mapy Web SDK

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

Sada Azure Mapy 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 Mapy

Sady AZURE Mapy SDK procházejí pravidelným testováním zabezpečení spolu se všemi externími knihovnami závislostí používanými sadami SDK. Všechny známé problémy se zabezpečením se opraví včas a uvolní do produkčního prostředí. Pokud vaše aplikace odkazuje na nejnovější hlavní verzi hostované verze sady Azure Mapy Web SDK, automaticky obdrží všechny aktualizace podverze, které zahrnují opravy související se zabezpečením.

Pokud azure Mapy Web SDK hostuje sami prostřednictvím modulu npm, nezapomeňte použít symbol stříšky (^) v kombinaci s číslem verze balíčku Azure Mapy npm v package.json souboru tak, aby odkazovat 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 Mapy. Další informace najdete v dokumentaci k npm v 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, load na událost a ready událost. Událost načtení se aktivuje, jakmile se mapa úplně načte do počátečního zobrazení mapy a načte se každá dlaždice 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.

Připravená událost se aktivuje, když je potřeba začít s mapou pracovat s minimálními prostředky mapování. Přesněji řečeno, ready událost se aktivuje při prvním načtení dat stylu mapy. 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í sady Azure Mapy Web SDK

Pokud mapu nepotřebujete hned, líné načtěte sadu Azure Mapy Web SDK, dokud ji nepotřebujete. Tím se zpožďuje načítání souborů JavaScriptu a CSS používaných službou Azure Mapy Web SDK, 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.

Lazy Load the Map code sample shows how to delay the loading the Azure Mapy Web SDK until a button is pressed. Zdrojový kód najdete v tématu Opožděné načtení vzorového kódu 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í void mapy div při 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. Vývojáři někdy čekají, až se mapa načte (nebo počká ready na událost) a pak použije setCamerasetStyle funkce mapy. Č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é dlaždice: Třída VectorTileSource načítá data formátovaná jako vektorové dlaždice pro aktuální zobrazení mapy na základě systému provazování 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čítá jenom data, která jsou zobrazená s geometrií oříznutými do oblasti fokusu na dlaždici a zobecněla tak, aby odpovídala rozlišení mapy pro úroveň přiblížení dlaždice.

Platforma Azure Mapy Creator načítá data ve formátu vektorové dlaždice. Jiné formáty dat můžou používat nástroje, jako je Tippecanoe. Další informace o práci s vektorovými dlaždicemi najdete v souboru Readme mapbox awesome-vector-tiles na GitHubu.

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 stačí načíst a spravovat maximálně několik desítek obrázků. 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ž komprimovaná vektorová dlaždice, která obsahuje generalizované geometrie a optimalizované na úrovni přiblížení.

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 ve zdroji jedné vektorové dlaždice 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ížení počtu aktualizací plátna kvůli aktualizacím 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 funkcí, zkombinujte je do pole nebo kolekce funkcí a předejte je do této funkce jednou, nikoli smyčku nad datovou sadou a voláním této funkce pro každou funkci.
  • Funkci zdrojů setShapes dat lze použít k přepsání všech obrazců ve zdroji dat. Pod kapotou kombinuje zdroje clear dat a add funkce dohromady a provádí aktualizaci plátna s jednou mapou 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 se nebere v úvahu kopírování dat do místního souboru ve vaší doméně nebo vytvoření proxy služby, která má povolené cors. Pokud je soubor velký, zvažte jeho převod na zdroj vektorové dlaždice.
  • 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 je předejte do zdrojů add dat nebo setShapes funkce. 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. Pokud máte například jednoduchou mapu zobrazující umístění na mapě, když kliknete na řadu podrobných obsahu, zobrazí se. 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 přibližně 0,1 měřiče, což je často přesnější než umístění, které souřadnice představuje (při práci s malými daty o poloze, jako jsou rozložení vnitřní budovy), se doporučuje šest desetinných míst. 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 po datu automaticky znovu načte všechny zdroje vektorových dlaždic nebo vrstvy rastrových dlaždic expires . Dlaždice toku provozu a incidentů v mapě používají tuto funkci k zajištění, aby se na mapě zobrazovala aktuální data provozu v reálném čase. Tuto funkci lze zakázat nastavením možnosti služby mapy refreshExpiredTiles na falsemožnost .

Ú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 vektorové dlaždice místní pro místní vykreslování. 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ší buffer možnost je, tím méně překrývajících se dat je uloženo v dlaždicích místních vektorů a lepší výkon, tím větší je ale změna artefaktů vykreslování, ke kterým dochází. Zkuste tuto možnost upravit, abyste získali správnou kombinaci výkonu s minimálními artefakty vykreslování.

Třída DataSourcetolerance také možnost, která se používá s algoritmem zjednodušení Douglas-Peucker při snížení rozlišení geometrie pro účely vykreslování. Zvýšení této hodnoty tolerance snižuje rozlišení geometrií a zase zvyšuje výkon. Vylepšíte 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 vektorové dlaždice místní pro místní vykreslování. Ve výchozím nastavení to provede až do úrovně přiblížení 18, kdy se při přiblížení blíže vzorkuje 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é se budou při oddálení více zobrazovat, například při prohlížení mnohoúhelníku státu nebo provincie, nastavení minZoom možnosti zdroje dat na menší hodnotu, jako 12 je snížení výpočtu množství, generování místních dlaždic, ke kterému dochází, a paměti používané zdrojem dat a zvýšení výkonu.

Minimalizace odpovědi GeoJSON

Při načítání dat GeoJSON ze serveru prostřednictvím služby nebo načtením plochého souboru nezapomeňte minimalizovat data, aby se odebraly nepotřebné znaky mezery, které zvětší velikost stahování, než je potřeba.

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. Zveřejnění GeoJSON pro vaši aplikaci pomocí adresy URL a zdroj dat načte jednu kopii dat přímo do webového pracovního procesu zdrojů dat.

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 Mapy Web SDK je řízená daty. Data se přejdou do zdrojů dat, které jsou pak připojené k vykreslovacím vrstvě. 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 může snadno mít svůj poloměr a barvu ve stylu pomocí výrazu řízeného daty. Vzhledem k tomu, že kruh je jednoduchý obrazec, který webGL nakresluje, je vykreslovací modul schopen vykreslit tyto obrázky rychleji než vrstvu symbolů, 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žití značek HTML a automaticky otevíraných oken

Na rozdíl od většiny vrstev v ovládacím prvku Azure Mapy Web, 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 přidaly stránku, tím více prvků DOM existují. Výkon může po přidání několika stovek značek HTML nebo automaticky otevíraných oken snížit výkon. U větších datových sad zvažte buď seskupení dat, nebo použití symbolu nebo bublinové vrstvy.

Ukázka opětovného použití překryvných oken s kódem Multiple Pins ukazuje, jak vytvořit jedno místní okno a znovu ho použít aktualizací obsahu a pozice. Zdrojový kód najdete v tématu Opětovné použití automaticky otevíraných oken s ukázkovým kódem s více piny.

A screenshot of a map of Seattle with three blue pins, demonstrating how to Reuse Popups with Multiple Pins.

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, ve které mají isHealthy všechny funkce 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 isHealthy základě hodnoty a připojte bublinovou vrstvu s pevně zakódovanou barvou pro každý zdroj 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 case stylu pro možnost barvy na isHealthy základě vlastnosti. 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'
    ]
});

Vytváření animací vrstvy hladkých 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í spouští na každém snímku animace, což může zpomalovat animaci a zpomalovat ji tak, aby vypadala méně tekutinou. 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.

A screenshot of a map of the world with a symbol going in a circle, demonstrating how to animate the position of a symbol on the map by updating the coordinates.

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

Pokud vaše data splňují jedno z následujících kritérií, nezapomeňte zadat minimální a maximální úroveň přiblížení vrstvy, aby ji vykreslovací modul mohl přeskočit, když je 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ždice, která nemá dlaždice pro všechny úrovně přiblížení 0 až 24 a chcete, aby se vykreslovala jenom na úrovních, na kterých má dlaždice, a nepokoušejte se 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í minZoom a maxZoom možnost, kde se vrstva vykresluje, když mezi těmito úrovněmi přiblížení na základě této 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čení hranic vrstvy dlaždic a rozsah přiblížení 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 vrstva dlaždice dostupná pouze mezi některými úrovněmi přiblížení, zadejte minimální a maximální zdrojový náhled 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, že při překrytí dlaždice celého zeměkoule bez neprůhlednosti nebo průhledné oblasti 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 animuje vrstvu při zobrazení, což způsobí blikání efektu, protože předchozí vrstva by byla skryta předtím, než bude nová vrstva viditelná.

Ú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. Pokud je tato možnost nastavená na 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, nevykreslují kolidovací 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ě. Tuto možnost upravte, 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 tématu Data bodu clusteringu ve webové sadě SDK.

Použití vážených skupinových heat map

Vrstva heat 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 je poloměr clusteru ve velikosti jen pár pixelů, je v vykreslené heat mapě malý vizuální rozdíl. Použití většího poloměru clusteru zvyšuje výkon, ale může snížit rozlišení vykreslené heat mapy.

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

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

Zachování malých prostředků imagí

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á pomocí této možnosti škáluje ikonu size , použijte obrázek, který je maximální velikostí plánu, aby se zobrazil na mapě a není 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ů

Filtruje smyčku pro všechna data ve zdroji dat a zkontroluje, jestli 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í skupin vrstev s pevně zakódovanými styly, pokud se výrazy stylu dají použít jako velký počet vrstev, můžou také způsobit problémy s výkonem.

Ujistěte se, že výrazy nevytvářely 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 logické dává 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, case lze výraz použít s has výrazem ke kontrole, zda má tato funkce myColor vlastnost. 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řazení logických výrazů od nejvýraznější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é. Jednodušší výraz je, tím rychleji se vyhodnotí. Pokud je například potřeba jednoduché porovnání, bude výraz ['==', ['get', 'category'], 'restaurant'] podobný lépe 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í sady Azure Mapy Web SDK.

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

Co je potřeba zkontrolovat:

  • Ujistěte se, že v mapě dokončíte možnosti ověřování. Bez ověřování načte mapa prázdné plátno a na kartě sítě vývojářských nástrojů prohlížeče vrátí 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, v sadách Azure Mapy SDK odpovídají standardnímu formátu [longitude, latitude]geoprostorového odvětví . Tento stejný formát je také způsob, jakým jsou souřadnice definovány ve schématu GeoJSON; základní data formátovaná v sadách SDK azure Mapy. 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 anchor jsou správné možnosti.pixelOffset Ve výchozím nastavení je dolní střed obsahu zarovnaný s umístěním na mapě.
  • Ujistěte se, že byl načten soubor CSS pro Azure Mapy.
  • Zkontrolujte element DOM značky HTML a zjistěte, jestli se k značce připojila nějaká šablona CSS z vaší aplikace a ovlivňuje její pozici.

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

Zkontrolujte, jestli anchor jsou správně offset nakonfigurované možnosti tak, aby odpovídaly části obrázku nebo textu, které chcete zarovnat se souřadnicemi na mapě. Pokud je symbol pouze mimo místo, když je mapa otočena, zaškrtněte tuto rotationAlignment možnost. Ve výchozím nastavení se symboly otočí pomocí oblasti zobrazení mapy, které se uživateli zobrazují přímo. V závislosti na vašem scénáři ale může být žádoucí uzamknout symbol na orientaci mapy nastavením rotationAlignment možnosti map.

Pokud je symbol mimo místo, když je mapa rozsaděná nebo nakloněná, zaškrtněte tuto pitchAlignment možnost. Ve výchozím nastavení zůstávají symboly ve výřezu mapy ve výchozím nastavení ve svislém pohledu, když je mapa rozsaděná nebo nakloněná. V závislosti na vašem scénáři ale může být žádoucí uzamknout symbol na výšku 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 byl zdroj dat připojený k vrstvě vykreslování, která byla také přidána do mapy.
  • Přidejte do kódu zarážky 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 sadu Azure Mapy Web SDK v rámci iframe v izolovaném prostoru?

Ano.

Získání podpory

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

Návody nahlásit problém s daty nebo problém s adresou?

Nahlašte problémy s využitím webu azure Mapy pro zpětnou vazbu. Podrobné pokyny k problémům s vytvářením sestav dat najdete v článku Poskytnutí zpětné vazby k datům do Azure Mapy.

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.

Návody 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 Mapy?

  • Pokud máte dotazy související s vizuálem Azure Mapy Power BI, kontaktujte podporu Power BI.

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

  • Pokud máte dotazy nebo komentáře ke konkrétním funkcím Azure Mapy, použijte fóra pro vývojáře Azure Mapy.

Další kroky

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

Přečtěte si další informace o terminologii, kterou používá Azure Mapy a geoprostorové odvětví.