Metodtips för Azure Maps Web SDK

Det här dokumentet fokuserar på metodtips för Azure Maps Web SDK, men många av de bästa metoderna och optimeringarna som beskrivs kan tillämpas på alla andra Azure Maps-SDK:er.

Azure Maps Web SDK tillhandahåller en kraftfull arbetsyta för att återge stora rumsliga datamängder på många olika sätt. I vissa fall finns det flera sätt att återge data på samma sätt, men beroende på storleken på datauppsättningen och önskad funktionalitet kan en metod prestera bättre än andra. Den här artikeln belyser metodtips och tips för att maximera prestanda och skapa en smidig användarupplevelse.

När du vill förbättra kartans prestanda letar du vanligtvis efter sätt att minska antalet lager och källor samt komplexiteten i de datauppsättningar och renderingsformat som används.

Metodtips för säkerhet

Mer information om metodtips för säkerhet finns i Metodtips för autentisering och auktorisering.

Använd de senaste versionerna av Azure Maps

Azure Maps SDK:er genomgår regelbunden säkerhetstestning tillsammans med eventuella externa beroendebibliotek som används av SDK:erna. Alla kända säkerhetsproblem åtgärdas i tid och släpps till produktion. Om ditt program pekar på den senaste huvudversionen av den värdbaserade versionen av Azure Maps Web SDK tar det automatiskt emot alla delversionsuppdateringar som innehåller säkerhetsrelaterade korrigeringar.

Om du är själv värd för Azure Maps Web SDK via npm-modulen måste du använda symbolen caret (^) i kombination med versionsnumret för Azure Maps npm-paket i package.json filen så att den pekar på den senaste delversionen.

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

Dricks

Använd alltid den senaste versionen av npm Azure Maps Control. Mer information finns i azure-maps-control i npm-dokumentationen.

Optimera den inledande kartinläsningen

När en webbsida läses in är en av de första sakerna du vill göra att börja återge något så snart som möjligt så att användaren inte stirrar på en tom skärm.

Titta på maps ready-händelsen

På samma sätt, när kartan ursprungligen läses in ofta, är det önskvärt att läsa in data på den så snabbt som möjligt, så att användaren inte tittar på en tom karta. Eftersom kartan läser in resurser asynkront måste du vänta tills kartan är redo att interagera med innan du försöker återge dina egna data på den. Det finns två händelser som du kan vänta på, en load händelse och en ready händelse. Inläsningshändelsen utlöses när kartan har läst in den första kartvyn och varje kartpanel har lästs in. Om du ser felet "Formatmallen är inte klar med inläsningen load " bör du använda händelsen och vänta tills formatmallen har lästs in fullt ut.

Den färdiga händelsen utlöses när de minimala kartresurser som behövs för att börja interagera med kartan. Mer exakt ready utlöses händelsen när kartan läser in formatdata för första gången. Den färdiga händelsen kan ofta utlösas på halva tiden för belastningshändelsen och därmed kan du börja läsa in dina data på kartan tidigare. Undvik att göra ändringar i kartans formatmall eller språk just nu, eftersom detta kan utlösa en stilomläsning.

Läs in Webb-SDK för Azure Maps

Om kartan inte behövs direkt läser du in Azure Maps Web SDK tills den behövs. Detta fördröjer inläsningen av JavaScript- och CSS-filerna som används av Azure Maps Web SDK tills det behövs. Ett vanligt scenario där detta inträffar är när kartan läses in på en flik- eller utfällbara panel som inte visas vid sidinläsning.

Kodexemplet Lazy Load the Map visar hur du fördröjer inläsningen av Azure Maps Web SDK tills en knapp trycks ned. Källkoden finns i Lazy Load the Map sample code (Lat läsa in exempelkoden map).

Lägga till en platshållare för kartan

Om kartan tar en stund att läsa in på grund av nätverksbegränsningar eller andra prioriteringar i ditt program kan du överväga att lägga till en liten bakgrundsbild på kartan div som platshållare för kartan. Detta fyller kartans tomrum när den div läses in.

Ange inledande kartformat och kameraalternativ vid initiering

Ofta vill appar läsa in kartan till en viss plats eller ett visst format. Ibland väntar utvecklare tills kartan har lästs in (eller väntar på ready händelsen) och använder setCamera sedan kartans eller setStyle funktionerna. Det tar ofta längre tid att komma till önskad inledande kartvy eftersom många resurser läses in som standard innan de resurser som behövs för den önskade kartvyn läses in. En bättre metod är att skicka in önskad kartkamera och formatalternativ på kartan när du initierar den.

Optimera datakällor

Webb-SDK:et har två datakällor,

• GeoJSON-källa: Klassen DataSource hanterar rådata i GeoJSON-format lokalt. Bra för små till medelstora datamängder (uppemot hundratusentals funktioner).
• Källa för vektorpanel: Klassen VectorTileSource läser in data som är formaterade som vektorpaneler för den aktuella kartvyn, baserat på kartkartläggningssystemet. Perfekt för stora till stora datamängder (miljontals eller miljarder funktioner).

Använda panelbaserade lösningar för stora datamängder

Om du arbetar med större datauppsättningar som innehåller miljontals funktioner är det rekommenderade sättet att uppnå optimala prestanda att exponera data med hjälp av en lösning på serversidan, till exempel en paneltjänst för vektor- eller rasterbilder.
Vektorpaneler är optimerade för att endast läsa in de data som visas med geometrierna klippta till panelens fokusområde och generaliseras för att matcha kartans upplösning för panelens zoomnivå.

Azure Maps Creator-plattformen hämtar data i vektorpanelformat. Andra dataformat kan användas med verktyg som Tippecanoe. Mer information om hur du arbetar med vektorpaneler finns i Mapbox awesome-vector-tiles readme i GitHub.

Det går också att skapa en anpassad tjänst som renderar datauppsättningar som rasterbildpaneler på serversidan och läser in data med klassen TileLayer i map SDK. Detta ger exceptionella prestanda eftersom kartan bara behöver läsa in och hantera några dussin bilder som mest. Det finns dock vissa begränsningar med att använda rasterpaneler eftersom rådata inte är tillgängliga lokalt. En sekundär tjänst krävs ofta för att aktivera alla typer av interaktionsupplevelser, till exempel ta reda på vilken form en användare klickade på. Dessutom är filstorleken för en rasterpanel ofta större än en komprimerad vektorpanel som innehåller generaliserade geometrier och zoomnivåoptimerade geometrier.

Mer information om datakällor finns i Skapa en datakälla.

Kombinera flera datauppsättningar till en enda vektorpanelkälla

Ju mindre datakällor kartan måste hantera, desto snabbare kan den bearbeta alla funktioner som ska visas. I synnerhet när det gäller panelkällor minskar kombinationen av två vektorpanelkällor antalet HTTP-begäranden för att hämta panelerna i hälften, och den totala mängden data skulle vara något mindre eftersom det bara finns ett filhuvud.

Att kombinera flera datauppsättningar i en enda vektorpanelkälla kan uppnås med hjälp av ett verktyg som Tippecanoe. Datauppsättningar kan kombineras till en enskild funktionssamling eller delas upp i separata lager i vektorpanelen som kallas källlager. När du ansluter en vektorpanelkälla till ett återgivningslager anger du källskiktet som innehåller de data som du vill återge med lagret.

Minska antalet arbetsyteuppdateringar på grund av datauppdateringar

Det finns flera sätt att lägga till eller uppdatera data i en DataSource klass. Följande lista visar de olika metoderna och några överväganden för att säkerställa bra prestanda.

• Funktionen datakällor add kan användas för att lägga till en eller flera funktioner i en datakälla. Varje gång den här funktionen kallas utlöses en mappningsarbetsytasuppdatering. Om du lägger till många funktioner kombinerar du dem i en matris eller funktionssamling och skickar dem till den här funktionen en gång, i stället för att loopa över en datauppsättning och anropa den här funktionen för varje funktion.
• Funktionen datakällor setShapes kan användas för att skriva över alla former i en datakälla. Under huven kombineras datakällorna clear och add funktionerna tillsammans och en enskild mappningsarbetsyta uppdateras i stället för två, vilket är snabbare. Se till att använda den här funktionen när du vill uppdatera alla data i en datakälla.
• Funktionen datakällor importDataFromUrl kan användas för att läsa in en GeoJSON-fil via en URL till en datakälla. När data har laddats ned skickas de till funktionen datakällor add . Om GeoJSON-filen finns på en annan domän kontrollerar du att den andra domänen stöder korsdomänbegäranden (COR). Om den inte överväger att kopiera data till en lokal fil i domänen eller skapa en proxytjänst som har aktiverats för cors. Om filen är stor kan du överväga att konvertera den till en vektorpanelkälla.
• Om funktionerna är omslutna Shape med klassen addPropertyutlöser funktionerna , setCoordinates, och setProperties i formen en uppdatering i datakällan och en mappningsarbetsyteuppdatering. Alla funktioner som returneras av datakällorna getShapes och getShapeById funktionerna omsluts automatiskt av Shape klassen. Om du vill uppdatera flera former går det snabbare att konvertera dem till JSON med hjälp av funktionen datakällor toJson , redigera GeoJSON och sedan skicka dessa data till funktionen datakällor setShapes .

Undvik att anropa funktionen rensa datakällor i onödan

Om du anropar clear-funktionen i DataSource klassen uppdateras en mappningsarbetsyta. Om funktionen clear anropas flera gånger i rad kan en fördröjning inträffa medan kartan väntar på att varje uppdatering ska ske.

Det här är ett vanligt scenario i program som rensar datakällan, laddar ned nya data, rensar datakällan igen och sedan lägger till nya data i datakällan. Beroende på önskad användarupplevelse skulle följande alternativ vara bättre.

• Rensa data innan du laddar ned nya data och skicka sedan de nya data till datakällorna add eller setShapes funktionen. Om det här är den enda datauppsättningen på kartan är kartan tom medan nya data laddas ned.
• Ladda ned nya data och skicka dem sedan till funktionen datakällor setShapes . Detta ersätter alla data på kartan.

Ta bort oanvända funktioner och egenskaper

Om datamängden innehåller funktioner som inte ska användas i din app tar du bort dem. På samma sätt tar du bort alla egenskaper för funktioner som inte behövs. Detta har flera fördelar:

• Minskar mängden data som måste laddas ned.
• Minskar antalet funktioner som behöver loopas igenom när data återges.
• Kan ibland hjälpa till att förenkla eller ta bort datadrivna uttryck och filter, vilket innebär mindre bearbetning som krävs vid återgivningen.

När funktioner har många egenskaper eller innehåll är det mycket mer användbart att begränsa vad som läggs till i datakällan till bara de som behövs för rendering och att ha en separat metod eller tjänst för att hämta den andra egenskapen eller innehållet när det behövs. Om du till exempel har en enkel karta som visar platser på en karta när du väljer en massa detaljerat innehåll visas. Om du vill använda datadriven formatering för att anpassa hur platserna återges på kartan läser du bara in de egenskaper som behövs i datakällan. När du vill visa det detaljerade innehållet använder du ID:t för funktionen för att hämta det andra innehållet separat. Om innehållet lagras på servern kan du minska mängden data som måste laddas ned när kartan först läses in med hjälp av en tjänst för att hämta den asynkront.

Dessutom kan en minskning av antalet signifikanta siffror i koordinaterna för funktioner också avsevärt minska datastorleken. Det är inte ovanligt att koordinater innehåller 12 eller fler decimaler. Sex decimaler har dock en noggrannhet på cirka 0,1 meter, vilket ofta är mer exakt än den plats som koordinaten representerar (sex decimaler rekommenderas när du arbetar med små platsdata, till exempel inomhusbyggnadslayouter). Om du har fler än sex decimaler kommer det sannolikt inte att göra någon skillnad i hur data återges och kräver att användaren laddar ned mer data utan någon extra fördel.

Här är en lista över användbara verktyg för att arbeta med GeoJSON-data.

Använda en separat datakälla för snabbt föränderliga data

Ibland finns det ett behov av att snabbt uppdatera data på kartan för saker som att visa liveuppdateringar av strömmande data eller animera funktioner. När en datakälla uppdateras loopar återgivningsmotorn igenom och renderar alla funktioner i datakällan. Förbättra övergripande prestanda genom att separera statiska data från snabbt föränderliga data till olika datakällor, vilket minskar antalet funktioner som återges igen under varje uppdatering.

Om du använder vektorpaneler med livedata är ett enkelt sätt att stödja uppdateringar att använda svarsrubriken expires . Som standard kommer alla vektorpanelskällor eller rasterpanellager automatiskt att läsa in paneler på nytt när datumet expires . Panelerna för trafikflöde och incidenter på kartan använder den här funktionen för att säkerställa att nya trafikdata i realtid visas på kartan. Den här funktionen kan inaktiveras genom att ställa in alternativet för maps-tjänsten refreshExpiredTiles på false.

Justera buffert- och toleransalternativen i GeoJSON-datakällor

Klassen DataSource konverterar rådata till vektorpaneler som är lokala för on-the-fly-återgivning. Dessa lokala vektorpaneler klipper rådata till gränserna för panelområdet med lite buffert för att säkerställa smidig återgivning mellan paneler. Ju mindre buffer alternativet är, desto färre överlappande data lagras i de lokala vektorpanelerna och bättre prestanda, men ju större ändring av återgivningsartefakter som sker. Prova att justera det här alternativet för att få rätt blandning av prestanda med minimala renderingsartefakter.

Klassen DataSource har också ett tolerance alternativ som används med Douglas-Peucker-förenklingsalgoritmen när du minskar upplösningen av geometrier i renderingssyfte. Om du ökar det här toleransvärdet minskar geometriernas upplösning och förbättrar i sin tur prestandan. Justera det här alternativet för att få rätt blandning av geometriupplösning och prestanda för din datauppsättning.

Ange alternativet för maximal zoomning för GeoJSON-datakällor

Klassen DataSource konverterar rådata till vektorpaneler som är lokala för on-the-fly-återgivning. Som standard gör den detta tills zoomnivå 18, då den, när den zoomas in närmare, tar exempel på data från panelerna som genererats för zoomnivå 18. Detta fungerar bra för de flesta datauppsättningar som måste ha hög upplösning när de zoomas in på dessa nivåer. Men när du arbetar med datauppsättningar som är mer benägna att visas när du zoomar ut mer, till exempel när du visar tillstånds- eller provinspolygoner, anger minZoom du alternativet för datakällan till ett mindre värde, till exempel 12 minskar mängden beräkning, lokal panelgenerering som inträffar och minne som används av datakällan och ökar prestandan.

Minimera GeoJSON-svar

När du läser in GeoJSON-data från en server antingen via en tjänst eller genom att läsa in en platt fil, se till att data minimeras för att ta bort onödiga blanksteg som gör nedladdningsstorleken större än nödvändigt.

Få åtkomst till rå GeoJSON med hjälp av en URL

Det går att lagra GeoJSON-objekt infogade i JavaScript, men detta använder mer minne eftersom kopior av det lagras i variabeln som du skapade för det här objektet och datakällinstansen, som hanterar det i en separat webbarbetare. Exponera GeoJSON för din app med hjälp av en URL i stället och datakällan läser in en enda kopia av data direkt till datakällornas webbarbetare.

Optimera återgivningslager

Azure Maps innehåller flera olika lager för återgivning av data på en karta. Det finns många optimeringar som du kan dra nytta av för att skräddarsy dessa lager efter ditt scenario, öka prestanda och den övergripande användarupplevelsen.

Skapa lager en gång och återanvänd dem

Azure Maps Web SDK är datadriven. Data går till datakällor, som sedan är anslutna till återgivningsskikt. Om du vill ändra data på kartan uppdaterar du data i datakällan eller ändrar formatalternativen på ett lager. Detta går ofta snabbare än att ta bort och återskapar sedan lager med varje ändring.

Överväg bubbelskikt över symbolskikt

Bubbelskiktet renderar punkter som cirklar på kartan och kan enkelt få sin radie och färg formaterad med hjälp av ett datadrivet uttryck. Eftersom cirkeln är en enkel form för WebGL att rita, kan återgivningsmotorn återge den snabbare än ett symbolskikt, som måste läsa in och återge en bild. Prestandaskillnaden för dessa två återgivningslager märks när tiotusentals punkter återges.

Använd HTML-markörer och popup-fönster sparsamt

Till skillnad från de flesta lager i Azure Maps-webbkontrollen som använder WebGL för rendering använder HTML-markörer och popup-fönster traditionella DOM-element för rendering. Därför har fler HTML-markörer och popup-fönster lagt till en sida, desto fler DOM-element finns det. Prestanda kan försämras när du har lagt till några hundra HTML-markörer eller popup-fönster. För större datamängder bör du överväga att antingen klustra dina data eller använda ett symbol- eller bubbellager.

Kodexemplet Återanvända popup-fönster med flera pins visar hur du skapar ett enda popup-fönster och återanvänder det genom att uppdatera dess innehåll och position. Källkoden finns i Återanvända popup-fönster med exempelkod för flera pins.

Med detta sagt, om du bara har några punkter att återge på kartan, kan enkelheten i HTML-markörer föredras. Dessutom kan HTML-markörer enkelt göras drabara om det behövs.

Kombinera lager

Kartan kan återge hundratals lager, men ju fler skikt det finns, desto mer tid tar det att återge en scen. En strategi för att minska antalet lager är att kombinera lager som har liknande format eller kan utformas med hjälp av datadrivna formatmallar.

Tänk dig till exempel en datauppsättning där alla funktioner har en isHealthy egenskap som kan ha värdet true eller false. Om du skapar ett bubbellager som återger olika färgade bubblor baserat på den här egenskapen finns det flera sätt att göra detta på enligt följande lista, från minst presterande till mest högpresterande.

• Dela upp data i två datakällor baserat på isHealthy värdet och koppla ett bubbellager med ett hårdkodat färgalternativ till varje datakälla.
• Placera alla data i en enda datakälla och skapa två bubbellager med ett hårdkodat färgalternativ och ett filter baserat på isHealthy egenskapen.
• Placera alla data i en enda datakälla, skapa ett enda bubbellager med ett case formatuttryck för färgalternativet baserat på isHealthy egenskapen. Här är ett kodexempel som visar detta.

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

Skapa jämna symbolskiktsanimationer

Symbolskikt har kollisionsidentifiering aktiverat som standard. Syftet med den här kollisionsidentifieringen är att se till att inga två symboler överlappar varandra. Ikonen och textalternativen för ett symbollager har två alternativ,

• allowOverlap - anger om symbolen är synlig när den kolliderar med andra symboler.
• ignorePlacement - anger om de andra symbolerna får kollidera med symbolen.

Båda dessa alternativ är inställda false på som standard. När du animerar en symbol körs beräkningar för kollisionsidentifiering på varje bildruta i animeringen, vilket kan göra animeringen långsammare och få den att se mindre flytande ut. Om du vill jämna ut animeringen ställer du in dessa alternativ på true.

Kodexemplet Simple Symbol Animation visar ett enkelt sätt att animera ett symbollager. Källkoden till det här exemplet finns i Exempelkod för enkel symbolanimering.

Ange zoomningsnivåintervall

Om dina data uppfyller något av följande villkor anger du nivån min och max zoom för lagret så att återgivningsmotorn kan hoppa över den när den ligger utanför zoomnivåintervallet.

• Om data kommer från en vektorpanelskälla är ofta källlager för olika datatyper endast tillgängliga via en mängd olika zoomnivåer.
• Om du använder ett panelskikt som inte har paneler för alla zoomnivåer 0 till och med 24 och du vill att det bara ska återges på de nivåer som det har paneler, och inte försöka fylla i saknade paneler med paneler från andra zoomnivåer.
• Om du bara vill återge ett lager på vissa zoomnivåer. Alla lager har ett minZoom och-alternativ maxZoom där lagret återges när mellan dessa zoomnivåer baserat på logiken maxZoom > zoom >= minZoom.

Exempel

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

Ange gränser för panelskikt och källans zoomintervall

Som standard läser panellagren in paneler över hela världen. Men om paneltjänsten bara har paneler för ett visst område försöker kartan läsa in paneler utanför det här området. När detta händer görs en begäran för varje panel och väntar på ett svar som kan blockera andra begäranden som görs av kartan och därmed sakta ned återgivningen av andra lager. Om du anger gränserna för ett panellager blir det bara en begäran om paneler som finns i avgränsningsrutan. Om panelskiktet bara är tillgängligt mellan vissa zoomnivåer anger du även minsta och högsta källzoom av samma anledning.

Exempel

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

Använd ett tomt kartformat när baskartan inte visas

Om ett lager är överlagrad på kartan som helt täcker baskartan kan du överväga att ange kartformatet till blank eller blank_accessible så att baskartan inte återges. Ett vanligt scenario för att göra detta är när överlägg på en hel jordglobspanel inte har någon ogenomskinlighet eller transparent område ovanför baskartan.

Animera bild- eller panelskikt smidigt

Om du vill animera genom en serie bild- eller panelskikt på kartan. Det går ofta snabbare att skapa ett lager för varje bild- eller panelskikt och att ändra opaciteten än att uppdatera källan till ett enda lager på varje animeringsram. Det går snabbare att dölja ett lager genom att ställa in opaciteten på noll och visa ett nytt lager genom att ange dess opacitet till ett värde som är större än noll än att uppdatera källan i lagret. Alternativt kan skiktens synlighet växlas, men se till att ställa in toningstiden för lagret till noll, annars animerar det lagret när det visas, vilket orsakar en flimmereffekt eftersom det tidigare lagret är dolt innan det nya lagret blir synligt.

Tweak Symbol layer collision detection logic (Justera logik för identifiering av symbollagerkollision)

Symbollagret har två alternativ som finns för både ikonen och texten som heter allowOverlap och ignorePlacement. Dessa två alternativ anger om ikonen eller texten för en symbol kan överlappa eller överlappas. När det är inställt på falsegör symbollagret beräkningar när varje punkt återges för att se om det kolliderar med någon annan redan renderad symbol i lagret, och om det gör det återger du inte den kolliderande symbolen. Detta är bra på att minska oredan på kartan och minska antalet objekt som återges. Genom att falseställa in dessa alternativ på hoppas den här logiken för kollisionsidentifiering över och alla symboler återges på kartan. Justera det här alternativet för att få den bästa kombinationen av prestanda och användarupplevelse.

Klusterdatauppsättningar för stora punkter

När du arbetar med stora uppsättningar datapunkter kan du upptäcka att när de återges på vissa zoomnivåer överlappar många av punkterna och är bara delvis synliga, om alls. Klustring är en process för att gruppera punkter som är nära varandra och som representerar dem som en enda klustrad punkt. När användaren zoomar in på kartan delas klustren upp i sina enskilda punkter. Detta kan avsevärt minska mängden data som behöver renderas, få kartan att kännas mindre rörig och förbättra prestanda. Klassen DataSource har alternativ för att klustra data lokalt. Dessutom har många verktyg som genererar vektorpaneler även klustringsalternativ.

Öka dessutom storleken på klusterradien för att förbättra prestandan. Ju större klusterradie, desto mindre klustrade punkter finns det att hålla reda på och återge. Mer information finns i Klustringsplatsdata i Webb-SDK.

Använda viktade klustrade värmekartor

Värmekartlagret kan enkelt återge tiotusentals datapunkter. För större datamängder bör du överväga att aktivera klustring på datakällan och använda en liten klusterradie och använda klusteregenskapen point_count som vikt för höjdkartan. När klusterradien bara är några få bildpunkter i storlek finns det liten visuell skillnad i den renderade värmekartan. Om du använder en större klusterradie förbättras prestandan mer, men kan minska upplösningen för den renderade värmekartan.

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

Mer information finns i Klustring och nivå för värmekartor.

Håll avbildningsresurserna små

Bilder kan läggas till i mappningsbildens sprite för återgivningsikoner i ett symbolskikt eller mönster i ett polygonlager. Håll dessa bilder små för att minimera mängden data som måste laddas ned och mängden utrymme som de tar upp i kartornas bildsprit. När du använder ett symbolskikt som skalar ikonen med hjälp av size alternativet använder du en bild som är den maximala storleken som planen ska visa på kartan och inte större. Detta säkerställer att ikonen återges med hög upplösning samtidigt som de resurser som används minimeras. Dessutom kan SVG:er också användas som ett mindre filformat för enkla ikonbilder.

Optimera uttryck

Datadrivna formatuttryck ger flexibilitet och kraft för filtrering och formatering av data på kartan. Det finns många sätt på vilka uttryck kan optimeras. Här är några tips.

Minska komplexiteten för filter

Filter loopar över alla data i en datakälla och kontrollerar om varje filter matchar logiken i filtret. Om filtren blir komplexa kan detta orsaka prestandaproblem. Några möjliga strategier för att hantera detta inkluderar följande.

• Om du använder vektorpaneler kan du dela upp data i olika källlager.
• Om du använder DataSource klassen kan du dela upp dessa data i separata datakällor. Försök att balansera antalet datakällor med filtrets komplexitet. För många datakällor kan också orsaka prestandaproblem, så du kan behöva göra vissa tester för att ta reda på vad som fungerar bäst för ditt scenario.
• När du använder ett komplext filter på ett lager bör du överväga att använda flera lager med formatuttryck för att minska filtrets komplexitet. Undvik att skapa en massa lager med hårdkodade format när formatuttryck kan användas eftersom ett stort antal lager också kan orsaka prestandaproblem.

Kontrollera att uttryck inte genererar fel

Uttryck används ofta för att generera kod för att utföra beräkningar eller logiska åtgärder vid återgivning. Precis som koden i resten av programmet ska du se till att beräkningarna och logiskt är meningsfulla och inte är felbenägna. Fel i uttryck orsakar problem vid utvärdering av uttrycket, vilket kan leda till problem med prestanda och återgivning.

Ett vanligt fel att tänka på är att ha ett uttryck som förlitar sig på en funktionsegenskap som kanske inte finns på alla funktioner. Följande kod använder till exempel ett uttryck för att ange färgegenskapen för ett bubbellager till myColor egenskapen för en funktion.

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

Koden ovan fungerar bra om alla funktioner i datakällan har en myColor egenskap och värdet för den egenskapen är en färg. Det här är kanske inte ett problem om du har fullständig kontroll över data i datakällan och vet att alla funktioner har en giltig färg i en myColor egenskap. För att göra koden säker från fel kan ett case uttryck användas med has uttrycket för att kontrollera att funktionen har myColor egenskapen . Om det gör to-color det kan typuttrycket sedan användas för att försöka konvertera värdet för egenskapen till en färg. Om färgen är ogiltig kan en reservfärg användas. Följande kod visar hur du gör detta och anger återställningsfärgen till grön.

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

Sortera booleska uttryck från de mest specifika till minst specifika

Minska det totala antalet villkorstester som krävs när du använder booleska uttryck som innehåller flera villkorstester genom att sortera dem från de flesta till minst specifika.

Förenkla uttryck

Uttryck kan vara kraftfulla och ibland komplexa. Mindre komplexa uttryck utvärderas snabbare. Om det till exempel behövs en enkel jämförelse skulle ett uttryck som ['==', ['get', 'category'], 'restaurant'] skulle vara bättre än att använda ett matchningsuttryck som ['match', ['get', 'category'], 'restaurant', true, false]. I det här fallet, om egenskapen som kontrolleras är ett booleskt värde, skulle ett get uttryck vara ännu enklare ['get','isRestaurant'].

Webb-SDK-felsökning

Följande är några tips för att felsöka några av de vanliga problem som uppstår när du utvecklar med Azure Maps Web SDK.

Varför visas inte kartan när jag läser in webbkontrollen?

Saker att kontrollera:

• Se till att du slutför dina autentiseringsalternativ på kartan. Utan autentisering läser kartan in en tom arbetsyta och returnerar ett 401-fel på nätverksfliken i webbläsarens utvecklarverktyg.
• Kontrollera att du har en Internetanslutning.
• Kontrollera om det finns fel i webbläsarens utvecklarverktyg i konsolen. Vissa fel kan göra att kartan inte återges. Felsöka programmet.
• Kontrollera att du använder en webbläsare som stöds.

Alla mina data visas på andra sidan världen, vad händer?

Koordinater, även kallade positioner, i Azure Maps SDK:er överensstämmer med det geospatiala branschstandardformatet [longitude, latitude]för . Samma format är också hur koordinater definieras i GeoJSON-schemat. de kärndata som är formaterade som används i Azure Maps-SDK:erna. Om dina data visas på motsatta sidan av världen beror det troligtvis på att longitud- och latitudvärdena är omvända i din koordinat-/positionsinformation.

Varför visas HTML-markörer på fel plats i webbkontrollen?

Saker att kontrollera:

• Om du använder anpassat innehåll för markören kontrollerar du att anchor alternativen och pixelOffset är korrekta. Som standard är innehållets nederkant i linje med positionen på kartan.
• Kontrollera att CSS-filen för Azure Maps har lästs in.
• Granska HTML-markörens DOM-element för att se om någon CSS från din app har bifogats till markören och påverkar dess position.

Varför visas ikoner eller text i symbolskiktet på fel plats?

Kontrollera att anchor alternativen och offset är korrekt konfigurerade så att de överensstämmer med den del av bilden eller texten som du vill justera med koordinaten på kartan. Om symbolen bara är på plats när kartan roteras kontrollerar du alternativet rotationAlignment . Som standard roterar symboler med kartvyporten och visas upprätt för användaren. Beroende på ditt scenario kan det dock vara önskvärt att låsa symbolen till kartans orientering genom att ange rotationAlignment alternativet till map.

Om symbolen bara är på plats när kartan är lutad/lutad kontrollerar du alternativet pitchAlignment . Som standard förblir symbolerna upprätt i kartvyporten när kartan kastas eller lutas. Beroende på ditt scenario kan det dock vara önskvärt att låsa symbolen till kartans tonhöjd genom att ange pitchAlignment alternativet till map.

Varför visas inte någon av mina data på kartan?

Saker att kontrollera:

• Kontrollera om det finns fel i konsolen i webbläsarens utvecklarverktyg.
• Kontrollera att en datakälla har skapats och lagts till på kartan och att datakällan är ansluten till ett återgivningslager som tidigare lagts till på kartan.
• Lägg till brytpunkter i koden och gå igenom den. Se till att data läggs till i datakällan och att datakällan och lagren läggs till på kartan.
• Prova att ta bort datadrivna uttryck från renderingslagret. Det är möjligt att en av dem kan ha ett fel i den som orsakar problemet.

Kan jag använda Azure Maps Web SDK i en iframe i begränsat läge?

Ja.

Få support

Följande är de olika sätten att få support för Azure Maps beroende på ditt problem.

Hur rapporterar jag ett dataproblem eller ett problem med en adress?

Rapportera problem med att använda azure maps-feedbackwebbplatsen. Detaljerade anvisningar om hur du rapporterar dataproblem finns i Ge datafeedback till Azure Maps.

Kommentar

Varje problem som skickas genererar en unik URL för att spåra den. Lösningstiderna varierar beroende på problemtyp och den tid som krävs för att verifiera att ändringen är korrekt. Ändringarna visas i återgivningstjänstens veckouppdatering, medan andra tjänster som geokodning och routning uppdateras varje månad.

Hur rapporterar jag en bugg i en tjänst eller ett API?

Rapportera problem på sidan Hjälp + support i Azure genom att välja knappen Skapa en supportbegäran.

Var får jag teknisk hjälp för Azure Maps?

• Kontakta Power BI-supporten för frågor som rör det visuella Azure Maps Power BI-objektet.

• Kontakta Azure-supporten för alla andra Azure Maps-tjänster.

• Om du vill ha frågor eller kommentarer om specifika Azure Maps-funktioner använder du Azure Maps-utvecklarforumen.

Nästa steg

Mer information om hur du förbättrar användarupplevelsen i ditt program finns i följande artiklar.

Gör programmet tillgängligt

Läs mer om terminologin som används av Azure Maps och den geospatiala industrin.

Ordlista för Azure Maps