Megosztás a következőn keresztül:

Az Azure Maps Web SDK ajánlott eljárásai

  • Cikk

Ez a dokumentum az Azure Maps Webes SDK ajánlott eljárásaira összpontosít, azonban a felvázolt ajánlott eljárások és optimalizálások nagy része alkalmazható az összes többi Azure Maps SDK-ra.

Az Azure Maps Web SDK nagy méretű térbeli adathalmazok többféle módon történő renderelését teszi lehetővé. Bizonyos esetekben többféleképpen is megjelenítheti az adatokat ugyanígy, de az adathalmaz méretétől és a kívánt funkcióktól függően az egyik módszer jobban teljesíthet, mint mások. Ez a cikk az ajánlott eljárásokat és tippeket és trükköket ismerteti a teljesítmény maximalizálása és a zökkenőmentes felhasználói élmény érdekében.

A térkép teljesítményének javításakor általában a rétegek és források számának csökkentésére, valamint a használt adathalmazok és renderelési stílusok összetettségére kell megoldást keresni.

Ajánlott biztonsági eljárások

A biztonsági ajánlott eljárásokkal kapcsolatos további információkért tekintse meg a hitelesítés és az engedélyezés ajánlott eljárásait.

Az Azure Maps legújabb verzióinak használata

Az Azure Maps SDK-k rendszeres biztonsági tesztelésen mennek keresztül az SDK-k által használt külső függőségi kódtárakkal együtt. Az ismert biztonsági problémákat időben kijavítjuk, és éles környezetben bocsátjuk ki. Ha az alkalmazás az Azure Maps Web SDK üzemeltetett verziójának legújabb főverziójára mutat, automatikusan megkapja az összes olyan alverziófrissítést, amely biztonsági javításokat tartalmaz.

Ha az Azure Maps Web SDK-t az npm modulon keresztül üzemelteti, mindenképpen használja a caret (^) szimbólumot a fájlban lévő package.json Azure Maps npm-csomag verziószámával kombinálva, hogy az a legújabb alverzióra mutatjon.

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

Tipp.

Mindig az npm Azure Maps Control legújabb verzióját használja. További információ: azure-maps-control az npm dokumentációjában.

A kezdeti térképbetöltés optimalizálása

Amikor betölt egy weblapot, az egyik első dolog, amit el szeretne végezni, hogy a lehető leghamarabb megjelenítsen valamit, hogy a felhasználó ne bámuljon üres képernyőre.

A térképek kész eseményének megtekintése

Hasonlóképpen, amikor a térkép kezdetben gyakran töltődik be, a lehető leggyorsabban be kell töltenie az adatokat, így a felhasználó nem üres térképet keres. Mivel a térkép aszinkron módon tölti be az erőforrásokat, meg kell várnia, amíg a térkép készen áll a használatra, mielőtt megpróbálná megjeleníteni a saját adatait. Két eseményre lehet várni, egy load eseményre és egy eseményre ready . A betöltési esemény akkor indul el, ha a térkép befejezi a kezdeti térképnézet betöltését, és minden térképcsempét betöltött. Ha a "Stílus nem fejeződött be" hibaüzenet jelenik meg, használja az eseményt load , és várja meg, amíg a stílus teljesen betöltődik.

A kész esemény akkor aktiválódik, ha a térkép használatához szükséges minimális térképerőforrások szükségesek. Pontosabban az ready esemény akkor aktiválódik, amikor a térkép először tölti be a stílusadatokat. A kész esemény gyakran a betöltési esemény félidejében aktiválódik, és így hamarabb megkezdheti az adatok betöltését a térképre. Ebben a pillanatban ne módosítsa a térkép stílusát vagy nyelvét, mert ezzel elindíthatja a stílus újratöltését.

Az Azure Maps Web SDK lusta betöltése

Ha a térképre nincs szükség azonnal, lusta töltse be az Azure Maps Web SDK-t, amíg nincs rá szükség. Ez késlelteti az Azure Maps Web SDK által használt JavaScript- és CSS-fájlok betöltését, amíg szükséges. Ez gyakori forgatókönyv, amikor a térkép betöltődik egy lap vagy egy úszó panelbe, amely nem jelenik meg az oldalbetöltéskor.

A Lazy Load the Map code minta bemutatja, hogyan késleltetheti az Azure Maps Web SDK betöltését egy gomb megnyomásáig. A forráskódért lásd : Lazy Load the Map sample code.

Helyőrző hozzáadása a térképhez

Ha a térkép hálózati korlátozások vagy az alkalmazáson belüli egyéb prioritások miatt eltart egy ideig, érdemes lehet egy kis háttérképet hozzáadni a térképhez div helyőrzőként. Ez kitölti a térkép div ürességét, miközben betöltődik.

Kezdeti térképstílus és kamerabeállítások megadása az inicializáláshoz

Az alkalmazások gyakran egy adott helyre vagy stílusba szeretnék betölteni a térképet. Előfordulhat, hogy a fejlesztők megvárják, amíg a térkép betöltődik (vagy megvárják az ready eseményt), majd a térkép vagy setStyle függvények használatávalsetCamera. Ez gyakran hosszabb időt vesz igénybe a kívánt kezdeti térképnézet eléréséhez, mivel sok erőforrás alapértelmezés szerint betöltődik, mielőtt betöltené a kívánt térképnézethez szükséges erőforrásokat. A jobb módszer az, ha a kívánt térkép kamerát és stílusbeállításokat adja át a térképen az inicializáláskor.

Adatforrások optimalizálása

A webes SDK két adatforrásból áll:

  • GeoJSON-forrás: Az DataSource osztály helyileg GeoJSON formátumban kezeli a nyers helyadatokat. Jó kis és közepes adathalmazokhoz (több százezer funkció felfelé).
  • Vektorcsempék forrása: Az VectorTileSource osztály vektorcsempékként formázott adatokat tölt be az aktuális térképnézethez a térképburkoló rendszer alapján. Ideális nagy és nagy méretű adathalmazokhoz (több millió vagy több milliárd funkcióhoz).

Csempealapú megoldások használata nagy adathalmazokhoz

Ha több millió funkciót tartalmazó nagyobb adathalmazokkal dolgozik, az optimális teljesítmény elérésének ajánlott módja egy kiszolgálóoldali megoldás, például vektor vagy raszter képcsempe szolgáltatás használata.
A vektorcsempék úgy vannak optimalizálva, hogy csak azokat az adatokat töltsék be, amelyek a csempe fókuszterületére kivágott geometriákat ábrázolják, és úgy vannak általánosítva, hogy megfeleljenek a csempe nagyítási szintjének megfeleltethető térkép felbontásának.

Az Azure Maps Creator platform vektorcsempe formátumban kéri le az adatokat. Más adatformátumok olyan eszközöket is használhatnak, mint a Tippecanoe. A vektorcsempék használatával kapcsolatos további információkért tekintse meg a Mapbox awesome-vector-tiles olvasmányát a GitHubon.

Létrehozhat egy egyéni szolgáltatást is, amely raszter képcsempékként jeleníti meg az adathalmazokat a kiszolgálóoldalon, és betölti az adatokat a Csemperéteg osztály használatával a térkép SDK-ban. Ez kivételes teljesítményt nyújt, mivel a térképnek legfeljebb néhány tucat képet kell betöltenie és kezelnie. A rasztercsempék használata azonban korlátozott, mivel a nyers adatok helyileg nem érhetők el. A másodlagos szolgáltatásra gyakran szükség van bármilyen típusú interakciós felület használatához, például annak kiderítéséhez, hogy a felhasználó milyen alakzatra kattintott. Emellett a rasztercsempe fájlmérete gyakran nagyobb, mint az általános és nagyítási szintű optimalizált geometriákat tartalmazó tömörített vektorcsempe.

Az adatforrásokkal kapcsolatos további információkért lásd : Adatforrás létrehozása.

Több adathalmaz egyesítése egyetlen vektorcsempeforrásba

Minél kevesebb adatforrást kell kezelnie a térképnek, annál gyorsabban tudja feldolgozni az összes megjelenítendő funkciót. Különösen a csempeforrások esetén, ha két vektorcsempe-forrást egyesítünk, az a felére csökkenti a csempék lekérésére irányuló HTTP-kérések számát, és az adatok teljes mennyisége valamivel kisebb lesz, mivel csak egy fájlfejléc van.

Több adathalmaz egyetlen vektoros csempeforrásban való kombinálása egy olyan eszközzel érhető el, mint a Tippecanoe. Az adathalmazok egyetlen funkciógyűjteménybe kombinálhatók, vagy külön rétegekre bonthatók a vektorcsempe, más néven forrásrétegek között. Ha vektorcsempe-forrást csatlakoztat egy renderelő réteghez, meg kell adnia azt a forrásréteget, amely a réteggel megjeleníteni kívánt adatokat tartalmazza.

A vászonfrissítések számának csökkentése az adatfrissítések miatt

Az osztály adatai DataSource többféleképpen is hozzáadhatók vagy frissíthetők. Az alábbi lista a különböző módszereket és szempontokat mutatja be a jó teljesítmény biztosítása érdekében.

  • Az adatforrásfüggvény add egy vagy több funkció adatforráshoz való hozzáadásához használható. A függvény minden alkalommal, amikor ezt a függvényt nevezik, elindít egy térképvászon-frissítést. Ha sok funkciót ad hozzá, kombinálja őket egy tömbbe vagy szolgáltatásgyűjteménybe, és egyszer adja át őket ebbe a függvénybe, ahelyett, hogy egy adatkészletet hurkolna, és meghívja ezt a függvényt az egyes funkciókhoz.
  • Az adatforrásfüggvény setShapes az adatforrások összes alakzatának felülírására használható. A motorháztető alatt egyesíti az adatforrásokat clear és add a függvényeket, és kettő helyett egyetlen térképvászon-frissítést végez, ami gyorsabb. Mindenképpen használja ezt a függvényt, ha egy adatforrás összes adatát frissíteni szeretné.
  • Az adatforrásfüggvény importDataFromUrl egy GeoJSON-fájl URL-címen keresztüli betöltésére használható egy adatforrásba. Az adatok letöltése után az adatforrások add függvénybe kerülnek. Ha a GeoJSON-fájl egy másik tartományban van tárolva, győződjön meg arról, hogy a másik tartomány támogatja a tartományok közötti kérelmeket (CORs). Ha nem veszi fontolóra az adatok másolását a tartomány egy helyi fájljához, vagy olyan proxyszolgáltatást hoz létre, amely engedélyezve van a COR-kkal. Ha a fájl nagy, fontolja meg vektorcsempe-forrássá alakítását.
  • Ha a funkciók az Shape osztályba vannak burkolva, az addPropertyalakzat , setCoordinatesés setProperties függvényei mind frissítést aktiválnak az adatforrásban, és a térképvászon frissítését. Az adatforrások getShapes és getShapeById függvények által visszaadott összes funkció automatikusan be van csomagolva az Shape osztályba. Ha több alakzatot szeretne frissíteni, gyorsabban konvertálhatja őket JSON-ra az adatforrások toJson függvénnyel, szerkesztheti a GeoJSON-t, majd továbbíthatja ezeket az adatokat az adatforrások setShapes függvénybe.

Kerülje az adatforrások egyértelmű függvényének szükségtelen meghívását

Az osztály tiszta függvényének meghívása DataSource térképvászon-frissítést okoz. Ha a clear függvényt egymás után többször is meghívják, késés léphet fel, amíg a térkép megvárja az egyes frissítéseket.

Ez egy gyakori forgatókönyv azokban az alkalmazásokban, amelyek törlik az adatforrást, letöltik az új adatokat, törlik az adatforrást, majd hozzáadják az új adatokat az adatforráshoz. A kívánt felhasználói élménytől függően a következő alternatívák jobbak lehetnek.

  • Törölje az adatokat az új adatok letöltése előtt, majd adja át az új adatokat az adatforrásokba add vagy setShapes függvénybe. Ha ez az egyetlen adatkészlet a térképen, a térkép üres, amíg az új adatok letöltődnek.
  • Töltse le az új adatokat, majd adja át az adatforrások setShapes függvénynek. Ez a térkép összes adatát lecseréli.

A nem használt funkciók és tulajdonságok eltávolítása

Ha az adathalmaz olyan funkciókat tartalmaz, amelyeket nem fog használni az alkalmazásban, távolítsa el őket. Hasonlóképpen távolítsa el a nem szükséges funkciók tulajdonságait. Ennek számos előnye van:

  • Csökkenti a letöltendő adatok mennyiségét.
  • Csökkenti az adatok renderelése során átjárandó funkciók számát.
  • Néha segíthet leegyszerűsíteni vagy eltávolítani az adatvezérelt kifejezéseket és szűrőket, ami azt jelenti, hogy kevesebb feldolgozásra van szükség a renderelés idején.

Ha a funkciók számos tulajdonsággal vagy tartalommal rendelkeznek, sokkal hatékonyabb, ha az adatforráshoz hozzáadott elemeket csak a rendereléshez szükségesre korlátozza, és szükség esetén külön metódussal vagy szolgáltatással kell rendelkeznie a másik tulajdonság vagy tartalom lekéréséhez. Ha például egy térképen egy egyszerű térképen jeleníti meg a helyeket, amikor kiválaszt egy rakás részletes tartalmat, megjelenik. Ha az adatvezérelt stílus használatával szeretné testre szabni, hogy a helyek hogyan jelenjenek meg a térképen, csak töltse be a szükséges tulajdonságokat az adatforrásba. Ha meg szeretné jeleníteni a részletes tartalmat, a funkció azonosítójával külön lekérheti a többi tartalmat. Ha a tartalom a kiszolgálón van tárolva, csökkentheti a térkép kezdeti betöltésekor letöltendő adatok mennyiségét egy szolgáltatás használatával az aszinkron lekéréséhez.

Emellett a funkciók koordinátáiban lévő jelentős számjegyek számának csökkentése jelentősen csökkentheti az adatméretet is. Nem ritka, hogy a koordináták 12 vagy több tizedesjegyet tartalmaznak; azonban hat tizedesjegy pontossága körülbelül 0,1 méter, ami gyakran pontosabb, mint a koordináta által megadott hely (a kis helyadatok, például beltéri épületelrendezések használata esetén hat tizedesjegy ajánlott). Ha hatnál több tizedesjegyet használ, az valószínűleg nem fog különbséget tenni az adatok megjelenítésében, és a felhasználónak további adatokat kell letöltenie további előnyök nélkül.

Az alábbi lista hasznos eszközöket tartalmaz a GeoJSON-adatok használatához.

Az adatok gyors módosításához használjon külön adatforrást

Néha szükség van a térképen található adatok gyors frissítésére, például a streamelési adatok élő frissítéseinek megjelenítésére vagy az animálási funkciókra. Az adatforrás frissítésekor a renderelő motor végighalad az adatforrás összes funkciójának megjelenítésén. Az általános teljesítmény javítása azáltal, hogy elkülöníti a statikus adatokat a gyorsan változó adatoktól különböző adatforrásokra, csökkentve az egyes frissítések során újra renderelt funkciók számát.

Ha vektorcsempéket használ élő adatokkal, a frissítések támogatásának egyszerű módja a expires válaszfejléc használata. Alapértelmezés szerint minden vektor csempeforrás vagy raszter csemperéteg automatikusan betölti a csempéket a expires dátumkor. A térkép forgalom- és incidenscsempék ezzel a funkcióval biztosítják, hogy friss valós idejű forgalmi adatok jelenjenek meg a térképen. Ez a funkció letiltható a Maps refreshExpiredTiles szolgáltatás beállításának beállításával false.

A GeoJSON-adatforrások puffer- és tűrésbeállításainak módosítása

Az DataSource osztály a nyers helyadatokat helyi vektorcsempékké alakítja át menet közbeni rendereléshez. Ezek a helyi vektorcsempék a nyers adatokat egy kis pufferrel a csempeterület határaihoz vágják, hogy zökkenőmentes renderelést biztosítsanak a csempék között. Minél kisebb a buffer lehetőség, annál kevesebb egymást átfedő adatot tárol a helyi vektorcsempékben, és minél jobb a teljesítmény, annál nagyobb a renderelési összetevők változása. Próbálja meg finomhangolni ezt a beállítást, hogy a lehető legjobb teljesítményt és minimális renderelési összetevőket kapja.

Az DataSource osztály rendelkezik egy tolerance lehetőséggel is, amelyet a Douglas-Peucker egyszerűsítési algoritmussal használnak a geometriák felbontásának csökkentésekor renderelés céljából. A tűrésérték növelése csökkenti a geometriák felbontását, és javítja a teljesítményt. A beállítás finomhangolásával a geometriai felbontás és a teljesítmény megfelelő kombinációját érheti el az adathalmazhoz.

A GeoJSON-adatforrások maximális nagyítási lehetőségének beállítása

Az DataSource osztály a nyers helyadatokat helyi vektorcsempékké alakítja át menet közbeni rendereléshez. Alapértelmezés szerint ezt a 18. nagyítási szintig teszi, ekkor a nagyításkor a 18. nagyítási szinthez létrehozott csempékből származó adatokat mintavételezi. Ez jól működik a legtöbb olyan adathalmaz esetében, amelyeknek nagy felbontással kell rendelkezniük, amikor nagyítják ezeket a szinteket. Ha azonban olyan adathalmazokkal dolgozik, amelyek nagyobb valószínűséggel lesznek megtekinthetők, például az állapot vagy a tartomány sokszögeinek megtekintésekor, az adatforrás beállítását kisebb értékre állítja minZoom , például 12 csökkenti a számítás mennyiségét, a helyi csempegenerálást, valamint az adatforrás által használt memóriát, és növeli a teljesítményt.

GeoJSON-válasz minimalizálása

Ha GeoJSON-adatokat tölt be egy kiszolgálóról egy szolgáltatáson keresztül vagy egy lapos fájl betöltésekor, ügyeljen arra, hogy az adatok minimálisra legyenek csökkentve, hogy eltávolítsák a szükségtelen szóköz karaktereket, amelyek a letöltés méretét a szükségesnél nagyobbra teszik.

Nyers GeoJSON elérése URL-cím használatával

A GeoJSON-objektumokat a JavaScriptbe ágyazva is tárolhatja, de ez több memóriát használ, mivel a másolatok az objektumhoz létrehozott változó és az adatforráspéldány között vannak tárolva, amely egy külön webmunkáson belül kezeli. Tegye elérhetővé a GeoJSON-t az alkalmazás számára URL-cím használatával, és az adatforrás közvetlenül az adatforrás-feldolgozóba tölti be az adatok egyetlen másolatát.

Renderelési rétegek optimalizálása

Az Azure Maps számos különböző réteget biztosít az adatok térképen való megjelenítéséhez. Számos optimalizálási lehetőség közül választhat, ha ezeket a rétegeket a forgatókönyvéhez igazítja, így növeli a teljesítményt és az általános felhasználói élményt.

Rétegek létrehozása és újbóli felhasználása

Az Azure Maps Web SDK adatvezérelt. Az adatok adatforrásokba kerülnek, amelyek ezután renderelési rétegekhez csatlakoznak. Ha módosítani szeretné a térképen lévő adatokat, frissítse az adatforrás adatait, vagy módosítsa a réteg stílusbeállítását. Ez gyakran gyorsabb, mint az eltávolítás, majd a rétegek újrakészítése minden módosítással.

A buborékréteg figyelembevétele a szimbólumréteg felett

A buborékréteg körökként jeleníti meg a pontokat a térképen, és könnyen formázhatja a sugarukat és a színüket egy adatvezérelt kifejezéssel. Mivel a kör egy egyszerű alakzat a WebGL rajzolásához, a renderelő motor gyorsabban képes renderelni, mint egy szimbólumréteg, amelynek be kell töltenie és renderelnie kell egy képet. A két renderelési réteg teljesítménybeli különbsége több tízezer pont renderelésekor észlelhető.

HTML-jelölők és előugró ablakok használata takarékosan

Az Azure Maps webes vezérlőjének legtöbb olyan rétegével ellentétben, amelyek a WebGL-t renderelik, a HTML-jelölők és az előugró ablakok hagyományos DOM-elemeket használnak a rendereléshez. Ezért minél több HTML-jelölő és előugró ablak hozzáadott egy lapot, annál több DOM-elem van. Néhány száz HTML-jelölő vagy előugró ablak hozzáadása után a teljesítmény csökkenhet. Nagyobb adathalmazok esetén fontolja meg az adatok fürtözését, vagy egy szimbólum vagy buborékréteg használatát.

A Több tűs kódmintával rendelkező előugró ablak újbóli használata bemutatja, hogyan hozhat létre egyetlen előugró fájlt, és hogyan használhatja fel újra a tartalmát és a pozícióját. A forráskódért lásd : Előugró ablak ismételt használata több pin-kóddal mintakóddal.

Képernyőkép Seattle térképéről három kék kitűzővel, amely bemutatja, hogyan használhatóak újra az előugró ablakok több tűvel.

Ez azt mondta, ha csak néhány pontot kell renderelni a térképen, a HTML-jelölők egyszerűsége előnyben részesíthető. Emellett a HTML-jelölők szükség esetén egyszerűen húzhatóvá tehetők.

Rétegek egyesítése

A térkép több száz réteg megjelenítésére képes, azonban minél több réteg van, annál több időt vesz igénybe egy jelenet megjelenítése. A rétegek számának csökkentésére szolgáló egyik stratégia a hasonló stílusokkal rendelkező vagy adatvezérelt stílusokkal formázható rétegek kombinálása.

Vegyük például azt az adatkészletet, amelyben minden funkció rendelkezik olyan isHealthy tulajdonsággal, amelynek értéke vagy falseértéke true lehet. Ha olyan buborékréteget hoz létre, amely a tulajdonság alapján különböző színű buborékokat jelenít meg, ezt többféleképpen is megteheti, ahogy az alábbi listában látható, a legkevésbé teljesítőtől a legtöbb teljesítményt nyújtóig.

  • Ossza fel az adatokat két adatforrásra az isHealthy érték alapján, és csatoljon egy buborékréteget egy kemény kóddal ellátott színbeállítással az egyes adatforrásokhoz.
  • Helyezze az összes adatot egyetlen adatforrásba, és hozzon létre két buborékréteget egy kemény kóddal ellátott színbeállítással és a isHealthy tulajdonságon alapuló szűrővel.
  • Helyezze az összes adatot egyetlen adatforrásba, és hozzon létre egy buborékréteget a case tulajdonságon isHealthy alapuló színbeállítás stíluskifejezésével. Íme egy kódminta, amely ezt szemlélteti.
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'
    ]
});

Sima szimbólumréteg-animációk létrehozása

A szimbólumrétegek alapértelmezés szerint engedélyezve vannak az ütközésészlelésben. Az ütközésészlelés célja annak biztosítása, hogy ne legyen két szimbólum átfedésben. A szimbólumréteg ikon- és szövegbeállításainak két lehetősége van:

  • allowOverlap - megadja, hogy a szimbólum látható-e, amikor más szimbólumokkal ütközik.
  • ignorePlacement - megadja, hogy a többi szimbólum ütközhet-e a szimbólummal.

Mindkét beállítás alapértelmezés szerint be false van állítva. Szimbólum animálásakor az ütközésészlelési számítások az animáció minden egyes keretén futnak, ami lelassíthatja az animációt, és kevésbé folyékonynak tűnhet. Az animáció simításához állítsa be ezeket a beállításokat a következőre true:

Az Egyszerű szimbólumanimáció kódminta egy szimbólumréteg animálásának egyszerű módját mutatja be. A minta forráskódját az Egyszerű szimbólumanimáció mintakódban találhatja meg.

A világ térképének képernyőképe, amelyen egy kör alakú szimbólum látható, amely bemutatja, hogyan lehet animálni egy szimbólum pozícióját a térképen a koordináták frissítésével.

Nagyítási szint tartományának megadása

Ha az adatok megfelelnek a következő feltételek egyikének, adja meg a réteg minimális és maximális nagyítási szintjét, hogy a renderelő motor kihagyhassa azokat, ha kívül esik a nagyítási szint tartományán.

  • Ha az adatok vektorcsempe-forrásból származnak, a különböző adattípusok forrásrétegei gyakran csak nagyítási szinteken keresztül érhetők el.
  • Ha olyan csemperéteget használ, amely nem rendelkezik csempékkel a 0 és 24 közötti összes nagyítási szinthez, és azt szeretné, hogy csak a csempékkel rendelkező szinteken jelenjen meg, és ne próbálja meg kitölteni a hiányzó csempéket más nagyítási szintekről származó csempékkel.
  • Ha csak bizonyos nagyítási szinteken szeretne megjeleníteni egy réteget. Minden réteg rendelkezik egy minZoom és maxZoom egy lehetőséggel, ahol a réteg a logika maxZoom > zoom >= minZoomalapján jelenik meg a nagyítási szintek között.

Példa

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

Csemperéteg határainak és a forrás nagyítási tartományának megadása

Alapértelmezés szerint a csempék rétegei az egész világon betöltik a csempéket. Ha azonban a csempeszolgáltatás csak egy adott terület csempéivel rendelkezik, a térkép megpróbál csempéket betölteni ezen a területen kívül. Ha ez történik, a rendszer minden csempére vonatkozóan kérést küld, és várja meg a választ, amely letiltja a térkép által küldött egyéb kéréseket, és ezáltal lelassítja a többi réteg renderelését. A csemperéteg határainak megadásával a térkép csak a határolókereten belüli csempéket kéri le. Továbbá, ha a csemperéteg csak bizonyos nagyítási szintek között érhető el, adja meg a minimális és a maximális forrás nagyítást ugyanezen okból.

Példa

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

Üres térképstílus használata, ha az alaptérkép nem látható

Ha a térkép egy olyan réteget fed le, amely teljesen lefedi az alaptérképet, érdemes lehet úgy beállítani a térképstílust blank blank_accessible , hogy az alaptérkép ne legyen renderelve. Ennek gyakori forgatókönyve, ha egy teljes földgömb csempét átlátszatlanság vagy átlátszó terület nem fed le az alaptérkép felett.

Kép- vagy csemperétegek zökkenőmentes animálása

Ha kép- vagy csemperétegek sorozatán keresztül szeretne animálni a térképen. Gyakran gyorsabb réteget létrehozni minden kép- vagy csemperéteghez, és módosítani az átlátszatlanságot, mint frissíteni az egyes animációs keretek egyetlen rétegének forrását. Ha egy réteget úgy rejt el, hogy nullára állítja az átlátszatlanságot, és az átlátszatlanságát nullánál nagyobb értékre állítja, az gyorsabb, mint a réteg forrásának frissítése. Másik lehetőségként a rétegek láthatósága váltható, de ügyeljen arra, hogy a réteg halványítási időtartamát nullára állítsa, ellenkező esetben a réteget a megjelenítéskor animálja, ami villódzó hatást okoz, mivel az előző réteg el van rejtve, mielőtt az új réteg láthatóvá válik.

A szimbólumréteg ütközésészlelési logikája finomhangolása

A szimbólumrétegnek két lehetősége van az ikonhoz és a hívott allowOverlap szöveghez és ignorePlacementa . Ez a két beállítás határozza meg, hogy egy szimbólum ikonja vagy szövege átfedésben vagy átfedésben lehet-e. Ha be van falseállítva, a szimbólumréteg számításokat végez az egyes pontok renderelésekor, hogy kiderüljön, ütközik-e a réteg többi már renderelt szimbólumával, és ha igen, ne renderelje az ütköző szimbólumot. Ez jó a térkép zsúfoltságának csökkentésében és a renderelt objektumok számának csökkentésében. A beállítások falsebeállításával a rendszer kihagyja ezt az ütközésészlelési logikát, és az összes szimbólum megjelenik a térképen. Ezt a beállítást úgy módosíthatja, hogy a teljesítmény és a felhasználói élmény legjobb kombinációját kapja.

Fürt nagypontos adatkészletei

Ha nagy adatpontkészletekkel dolgozik, előfordulhat, hogy bizonyos nagyítási szinteken történő rendereléskor a pontok nagy része átfedésben van, és csak részlegesen látható, ha egyáltalán. A fürtözés olyan csoportosítási pontokból áll, amelyek közel vannak egymáshoz, és egyetlen fürtözött pontként jelölik őket. Ahogy a felhasználó nagyítja a térképet, a fürtök szétválasztják az egyes pontjaikat. Ez jelentősen csökkentheti a renderelendő adatok mennyiségét, kevésbé zsúfolttá teheti a térképet, és javíthatja a teljesítményt. Az DataSource osztály helyileg is csoportosíthatja az adatokat. Emellett számos vektorcsempét létrehozó eszköz is rendelkezik fürtözési lehetőségekkel.

Emellett növelje a fürt sugarának méretét a teljesítmény javítása érdekében. Minél nagyobb a fürt sugara, annál kevesebb fürtözött pontot kell követnie és renderelnie. További információ: Fürtözési pont adatai a Webes SDK-ban.

Súlyozott fürtözött hőtérképek használata

A hőtérkép-réteg több tízezer adatpontot képes könnyen megjeleníteni. Nagyobb adathalmazok esetén fontolja meg a fürtözés engedélyezését az adatforráson, és használjon egy kis fürtsugarat, és használja a fürttulajdonságot point_count súlyként a magasságtérképhez. Ha a fürt sugara csak néhány képpont méretű, a renderelt hőtérképen kevés vizuális különbség van. A nagyobb fürtsugár használata nagyobb teljesítményt eredményez, de csökkentheti a renderelt hőtérkép felbontását.

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

További információ: Fürtözés és hőtérképek rétege.

Képerőforrások kis méretűek maradnak

Képeket adhat hozzá a térképek kép sprite megjelenítéséhez ikonok egy szimbólum réteg vagy minták egy sokszög rétegben. Tartsa ezeket a képeket kis méretűre, hogy minimalizálja a letöltendő adatok mennyiségét és a térképek képi sprite-jében feltöltődő helyet. Ha olyan szimbólumréteget használ, amely az ikont a size beállítással skálázza, használjon olyan képet, amely a terv által megjelenítendő maximális méret, és nem nagyobb. Ez biztosítja, hogy az ikon nagy felbontásban jelenik meg, miközben minimalizálja a használt erőforrásokat. Emellett az SVG-k kisebb fájlformátumként is használhatók egyszerű ikonképekhez.

Kifejezések optimalizálása

Az adatvezérelt stíluskifejezések rugalmasságot és energiát biztosítanak a térképen lévő adatok szűréséhez és formázásához. A kifejezések számos módon optimalizálhatók. Íme néhány tipp.

A szűrők összetettségének csökkentése

A szűrők az adatforrás összes adatát átfuttatják, és ellenőrzik, hogy minden szűrő megfelel-e a szűrő logikájának. Ha a szűrők összetettek lesznek, ez teljesítményproblémákat okozhat. Ennek megoldására néhány lehetséges stratégia az alábbiakat foglalja magában.

  • Vektorcsempék használata esetén bontsa fel az adatokat különböző forrásrétegekbe.
  • Az osztály használata esetén DataSource külön adatforrásokra bontsa az adatokat. Próbálja meg kiegyensúlyozni az adatforrások számát a szűrő összetettségével. Túl sok adatforrás is okozhat teljesítményproblémákat, ezért előfordulhat, hogy tesztelést kell végeznie, hogy megtudja, mi működik a legjobban a forgatókönyvhöz.
  • Ha összetett szűrőt használ egy rétegen, fontolja meg több réteg stíluskifejezésekkel történő használatát a szűrő összetettségének csökkentése érdekében. Ne hozzon létre több réteget kemény kóddal ellátott stílusokkal, amikor stíluskifejezések használhatók, mivel sok réteg is okozhat teljesítményproblémákat.

Győződjön meg arról, hogy a kifejezések nem okoznak hibákat

A kifejezéseket gyakran használják kód létrehozásához számítások vagy logikai műveletek rendereléskor történő végrehajtásához. Csakúgy, mint az alkalmazás többi részén található kód, győződjön meg arról, hogy a számítások és a logikai műveletek értelmesek, és nem okoznak hibalehetőséget. A kifejezések hibái problémákat okoznak a kifejezés kiértékelése során, ami teljesítménycsökkenést és renderelési problémákat okozhat.

Az egyik gyakori hiba, hogy olyan kifejezéssel rendelkezik, amely olyan funkciótulajdonságra támaszkodik, amely nem minden funkción létezik. Az alábbi kód például kifejezéssel állítja be egy buborékréteg színtulajdonságát egy myColor funkció tulajdonságára.

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

A fenti kód akkor működik jól, ha az adatforrás összes funkciója rendelkezik myColor tulajdonsággal, és ennek a tulajdonságnak az értéke egy szín. Ez nem feltétlenül jelent problémát, ha teljes mértékben felügyeli az adatforrásban lévő adatokat, és bizonyos funkciók esetében érvényes színnel rendelkezik egy myColor tulajdonságban. Ennek megfelelően a kód hibáktól való biztonságossá tétele érdekében egy case kifejezés használható a has kifejezéssel annak ellenőrzésére, hogy a funkció rendelkezik-e a myColor tulajdonsággal. Ha igen, akkor a to-color típuskifejezéssel megpróbálhatja színre konvertálni a tulajdonság értékét. Ha a szín érvénytelen, tartalék szín használható. Az alábbi kód bemutatja, hogyan teheti ezt meg, és a tartalék színt zöldre állítja.

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

Logikai kifejezések sorrendje a legspecifikusabbtól a legkevésbé specifikusig

Csökkentse a több feltételes tesztet tartalmazó logikai kifejezések használatakor szükséges feltételes tesztek teljes számát úgy, hogy a legtöbbről a legkevésbé specifikusra rendezi őket.

Kifejezések egyszerűsítése

A kifejezések hatékonyak és néha összetettek is lehetnek. A kevésbé összetett kifejezések gyorsabban kiértékelnek. Ha például egyszerű összehasonlításra van szükség, a hasonló ['==', ['get', 'category'], 'restaurant'] kifejezések jobbak lennének, mint egyező kifejezés használata, például ['match', ['get', 'category'], 'restaurant', true, false]. Ebben az esetben, ha az ellenőrzött tulajdonság logikai érték, a get kifejezés még egyszerűbb ['get','isRestaurant']lenne.

Webes SDK hibaelhárítása

Az alábbiakban néhány tippet találhat az Azure Maps Web SDK-val való fejlesztés során előforduló gyakori problémák hibakereséséhez.

Miért nem jelenik meg a térkép a webes vezérlő betöltésekor?

Ellenőrizendő elemek:

  • Győződjön meg arról, hogy a hitelesítési beállításokat a térképen adja meg. Hitelesítés nélkül a térkép betölt egy üres vászont, és 401-es hibát ad vissza a böngésző fejlesztői eszközeinek hálózati lapján.
  • Győződjön meg arról, hogy rendelkezik internetkapcsolattal.
  • Ellenőrizze a konzolon a böngésző fejlesztői eszközeinek hibáit. Egyes hibák miatt előfordulhat, hogy a térkép nem jelenik meg. Hibakeresés az alkalmazásban.
  • Győződjön meg arról, hogy támogatott böngészőt használ.

Minden adatom a világ másik oldalán jelenik meg, mi történik?

Az Azure Maps SDK-kban lévő koordináták, más néven pozíciók, igazodnak a térinformatikai iparág szabványos formátumához [longitude, latitude]. Ugyanez a formátum a koordináták GeoJSON-sémában való definiálása is; az Azure Maps SDK-kban használt alapvető adatok. Ha az adatok a világ másik oldalán jelennek meg, valószínűleg a hosszúsági és szélességi értékek fordítottak a koordináta-/pozícióadatokban.

Miért jelennek meg a HTML-jelölők rossz helyen a webes vezérlőben?

Ellenőrizendő elemek:

  • Ha egyéni tartalmat használ a jelölőhöz, győződjön meg arról, hogy a beállítások és pixelOffset a anchor beállítások helyesek. Alapértelmezés szerint a tartalom alsó közepe igazodik a térképen lévő pozícióhoz.
  • Győződjön meg arról, hogy az Azure Maps CSS-fájlja be van töltve.
  • Vizsgálja meg a HTML-jelölő DOM elemét, és ellenőrizze, hogy az alkalmazás bármely CSS-e hozzáfűzi magát a jelölőhöz, és hatással van-e a helyzetére.

Miért nem megfelelő helyen jelennek meg a szimbólumréteg ikonjai vagy szövegei?

Ellenőrizze, hogy a beállítások és a anchor offset beállítások megfelelően vannak-e konfigurálva a kép vagy a szöveg azon részéhez való igazításhoz, amelyet a térkép koordinátáihoz szeretne igazítani. Ha a szimbólum csak a térkép elforgatásakor nincs a helyén, ellenőrizze a rotationAlignment beállítást. Alapértelmezés szerint a szimbólumok elforgathatók a térképek nézettel, és függőlegesen jelennek meg a felhasználó számára. A forgatókönyvtől függően azonban célszerű lehet zárolni a szimbólumot a térkép tájolásához a rotationAlignment beállítás beállításával map.

Ha a szimbólum csak akkor van a helyén, ha a térkép fel van dobva/dőlt, ellenőrizze a pitchAlignment beállítást. Alapértelmezés szerint a szimbólumok függőlegesen maradnak a térképek nézetében, amikor a térkép fel van állítva vagy dőlt. A forgatókönyvtől függően azonban célszerű lehet zárolni a szimbólumot a térkép hangmagasságához a pitchAlignment beállítás beállításával map.

Miért nem jelennek meg az adataim a térképen?

Ellenőrizendő elemek:

  • Hibákért tekintse meg a konzolt a böngésző fejlesztői eszközeiben.
  • Győződjön meg arról, hogy egy adatforrást hoztak létre és adtak hozzá a térképhez, és hogy az adatforrás egy korábban a térképhez hozzáadott renderelési réteghez van csatlakoztatva.
  • Adjon hozzá töréspontokat a kódhoz, és haladjon végig rajta. Győződjön meg arról, hogy az adatforráshoz adatok lettek hozzáadva, és az adatforrás és a rétegek hozzá lettek adva a térképhez.
  • Próbálja meg eltávolítani az adatvezérelt kifejezéseket a renderelési rétegből. Lehetséges, hogy az egyikben hiba jelentkezik, ami a problémát okozza.

Használhatom az Azure Maps Web SDK-t egy tesztkörnyezetben lévő iframe-ben?

Igen.

Támogatás kérése

Az alábbiakban különböző módokon kérhet támogatást az Azure Mapshez a probléma függvényében.

Hogyan jelentést egy adatproblémáról vagy egy címmel kapcsolatos problémáról?

Az Azure Maps visszajelzési webhelyével kapcsolatos problémák jelentése. Az adatproblémák jelentésére vonatkozó részletes útmutatásért lásd : Adatvisszajelzés küldése az Azure Mapsnek.

Feljegyzés

Minden elküldött probléma egyedi URL-címet hoz létre a nyomon követéséhez. A megoldási idők a probléma típusától és a módosítás helyességének ellenőrzéséhez szükséges időtől függően változnak. A módosítások a renderelési szolgáltatások heti frissítésében jelennek meg, míg más szolgáltatások, például a geokódolás és az útválasztás havonta frissülnek.

Hogyan hibajelentést egy szolgáltatásban vagy API-ban?

Az Azure Súgó + támogatási oldalán megjelenő problémákat a Támogatási kérés létrehozása gombra kattintva jelentheti be.

Hol kaphatok technikai segítséget az Azure Mapshez?

Következő lépések

Az alábbi cikkekben további tippeket talál az alkalmazás felhasználói élményének javításához.

Az alkalmazás akadálymentesítése

További információ az Azure Maps és a térinformatikai iparág által használt terminológiáról.

Azure Maps-szószedet