Best practices voor Azure Kaarten Web SDK

Dit document is gericht op best practices voor de Azure Kaarten Web SDK, maar veel van de aanbevolen procedures en optimalisaties die worden beschreven, kunnen worden toegepast op alle andere Azure Kaarten SDK's.

De Azure Kaarten Web SDK biedt een krachtig canvas voor het weergeven van grote ruimtelijke gegevenssets op veel verschillende manieren. In sommige gevallen zijn er meerdere manieren om gegevens op dezelfde manier weer te geven, maar afhankelijk van de grootte van de gegevensset en de gewenste functionaliteit, kan één methode beter presteren dan andere. In dit artikel worden aanbevolen procedures en tips en trucs beschreven om de prestaties te maximaliseren en een soepele gebruikerservaring te creëren.

In het algemeen zoekt u bij het verbeteren van de prestaties van de kaart naar manieren om het aantal lagen en bronnen te verminderen en de complexiteit van de gegevenssets en renderingstijlen die worden gebruikt.

Aanbevolen procedures voor beveiliging

Zie best practices voor verificatie en autorisatie voor meer informatie over aanbevolen procedures voor beveiliging.

De nieuwste versies van Azure Kaarten gebruiken

De Azure Kaarten SDK's doorlopen regelmatig beveiligingstests, samen met eventuele externe afhankelijkheidsbibliotheken die door de SDK's worden gebruikt. Een bekend beveiligingsprobleem wordt tijdig opgelost en uitgebracht voor productie. Als uw toepassing verwijst naar de nieuwste primaire versie van de gehoste versie van de Azure Kaarten Web SDK, ontvangt deze automatisch alle secundaire versie-updates die beveiligingsoplossingen bevatten.

Als u de Azure Kaarten Web SDK zelf host via de npm-module, moet u het caret-symbool (^) gebruiken in combinatie met het azure-Kaarten npm-pakketversienummer in uw package.json bestand, zodat deze verwijst naar de nieuwste secundaire versie.

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

Tip

Gebruik altijd de nieuwste versie van npm Azure Kaarten Control. Zie azure-maps-control in de npm-documentatie voor meer informatie.

Eerste kaartbelasting optimaliseren

Wanneer een webpagina wordt geladen, is een van de eerste dingen die u wilt doen, het weergeven van iets zo snel mogelijk, zodat de gebruiker niet naar een leeg scherm start.

Bekijk de gebeurtenis Gereed voor kaarten

Als de kaart in eerste instantie wordt geladen, is het ook wenselijk om gegevens zo snel mogelijk op de kaart te laden, zodat de gebruiker geen lege kaart bekijkt. Omdat de kaart resources asynchroon laadt, moet u wachten totdat de kaart gereed is om ermee te communiceren voordat u uw eigen gegevens erop probeert weer te geven. Er zijn twee gebeurtenissen waarop u kunt wachten, een load gebeurtenis en een ready gebeurtenis. De laadgebeurtenis wordt geactiveerd nadat de kaart volledig is geladen en elke kaarttegel is geladen. Als u de fout 'Stijl is niet klaar met laden' ziet, moet u de load gebeurtenis gebruiken en wachten tot de stijl volledig is geladen.

De gereede gebeurtenis wordt geactiveerd wanneer de minimale kaartbronnen die nodig zijn om te beginnen met de interactie met de kaart. Precies gezegd, de ready gebeurtenis wordt geactiveerd wanneer de kaart de stijlgegevens voor de eerste keer laadt. De gereede gebeurtenis kan vaak in de helft van de laadgebeurtenis worden geactiveerd en stelt u dus in staat om uw gegevens sneller in de kaart te laden. Voorkom dat u op dit moment wijzigingen aanbrengt in de stijl of taal van de kaart, omdat dit een herlaadstijl van een stijl kan activeren.

Luie laad de Azure Kaarten Web SDK

Als de kaart niet meteen nodig is, laadt u de Azure Kaarten Web-SDK lui totdat deze nodig is. Dit vertraagt het laden van de JavaScript- en CSS-bestanden die worden gebruikt door de Azure Kaarten Web SDK totdat dat nodig is. Een veelvoorkomend scenario waarbij dit gebeurt, is wanneer de kaart wordt geladen in een tabblad of flyoutvenster dat niet wordt weergegeven bij het laden van pagina's.

Het codevoorbeeld Lazy Load the Map laat zien hoe u het laden van de Azure Kaarten Web SDK kunt vertragen totdat er op een knop wordt gedrukt. Zie Lazy Load the Map sample code voor de broncode.

Een tijdelijke aanduiding voor de kaart toevoegen

Als het even duurt voordat de kaart wordt geladen vanwege netwerkbeperkingen of andere prioriteiten in uw toepassing, kunt u een kleine achtergrondafbeelding toevoegen aan de kaart div als tijdelijke aanduiding voor de kaart. Hiermee wordt de ongeldigheid van de kaart div gevuld terwijl deze wordt geladen.

Initiële kaartstijl en cameraopties instellen bij initialisatie

Vaak willen apps de kaart laden op een specifieke locatie of stijl. Soms wachten ontwikkelaars totdat de kaart is geladen (of wachten op de ready gebeurtenis) en vervolgens de setCamera of setStyle functies van de kaart gebruiken. Dit duurt vaak langer om naar de gewenste eerste kaartweergave te gaan, omdat veel resources standaard worden geladen voordat de resources die nodig zijn voor de gewenste kaartweergave worden geladen. Een betere aanpak is om de gewenste kaartcamera en stijlopties door te geven aan de kaart bij het initialiseren ervan.

Gegevensbronnen optimaliseren

De web-SDK heeft twee gegevensbronnen,

• GeoJSON-bron: De DataSource klasse beheert onbewerkte locatiegegevens in geoJSON-indeling lokaal. Geschikt voor kleine tot middelgrote gegevenssets (meer dan honderdduizenden functies).
• Vectortegelbron: De VectorTileSource klasse laadt gegevens die zijn opgemaakt als vectortegels voor de huidige kaartweergave, op basis van het tegelsysteem voor kaarten. Ideaal voor grote tot enorme gegevenssets (miljoenen of miljarden functies).

Op tegels gebaseerde oplossingen gebruiken voor grote gegevenssets

Als u met grotere gegevenssets met miljoenen functies werkt, kunt u het beste optimale prestaties bereiken door de gegevens beschikbaar te maken met behulp van een oplossing aan de serverzijde, zoals vector- of rasterafbeeldingtegelservice.
Vectortegels zijn geoptimaliseerd om alleen de gegevens te laden die worden weergegeven met de geometrieën die zijn geknipt naar het focusgebied van de tegel en gegeneraliseerd zodat deze overeenkomen met de resolutie van de kaart voor het zoomniveau van de tegel.

Het Azure Kaarten Creator-platform haalt gegevens op in vectortegelindeling. Andere gegevensindelingen kunnen gebruikmaken van hulpprogramma's zoals Tippe resource. Zie voor meer informatie over het werken met vectortegels de Readme in Mapbox awesome-vector-tegels in GitHub.

Het is ook mogelijk om een aangepaste service te maken waarmee gegevenssets worden weergegeven als rasterafbeeldingstegels aan de serverzijde en de gegevens worden geladen met behulp van de TileLayer-klasse in de kaart-SDK. Dit biedt uitzonderlijke prestaties omdat de kaart maximaal een paar tientallen afbeeldingen hoeft te laden en te beheren. Er zijn echter enkele beperkingen met het gebruik van rastertegels omdat de onbewerkte gegevens niet lokaal beschikbaar zijn. Een secundaire service is vaak vereist om elk type interactie-ervaring mogelijk te maken, bijvoorbeeld om erachter te komen op welke vorm een gebruiker heeft geklikt. Daarnaast is de bestandsgrootte van een rastertegel vaak groter dan een gecomprimeerde vectortegel die gegeneraliseerde en geoptimaliseerde geometrieën op zoomniveau bevat.

Zie Een gegevensbron maken voor meer informatie over gegevensbronnen.

Meerdere gegevenssets combineren tot één vectortegelbron

Hoe minder gegevensbronnen de kaart moet beheren, hoe sneller alle functies kunnen worden verwerkt die moeten worden weergegeven. Het combineren van twee vectortegelbronnen vermindert met name het aantal HTTP-aanvragen voor het ophalen van de tegels in de helft en de totale hoeveelheid gegevens is iets kleiner omdat er slechts één bestandsheader is.

Het combineren van meerdere gegevenssets in één vectortegelbron kan worden bereikt met behulp van een hulpprogramma zoals Tippe compute. Gegevenssets kunnen worden gecombineerd tot één functieverzameling of worden gescheiden in afzonderlijke lagen binnen de vectortegel, ook wel bronlagen genoemd. Wanneer u een vectortegelbron verbindt met een renderinglaag, geeft u de bronlaag op die de gegevens bevat die u met de laag wilt weergeven.

Het aantal vernieuwingen van canvassen verminderen vanwege gegevensupdates

Er zijn verschillende manieren waarop gegevens in een DataSource klasse kunnen worden toegevoegd of bijgewerkt. De volgende lijst bevat de verschillende methoden en enkele overwegingen om goede prestaties te garanderen.

• De functie gegevensbronnen add kan worden gebruikt om een of meer functies toe te voegen aan een gegevensbron. Telkens wanneer deze functie wordt aangeroepen, wordt een kaartcanvas vernieuwd. Als u veel functies toevoegt, combineert u deze in een matrix of functieverzameling en geeft u ze één keer door aan deze functie in plaats van een gegevensset te herhalen en deze functie aan te roepen voor elke functie.
• De functie gegevensbronnen setShapes kan worden gebruikt om alle shapes in een gegevensbron te overschrijven. Onder de schermen worden de gegevensbronnen clear en add functies gecombineerd en wordt één kaartcanvas vernieuwd in plaats van twee, wat sneller is. Zorg ervoor dat u deze functie gebruikt wanneer u alle gegevens in een gegevensbron wilt bijwerken.
• De functie gegevensbronnen importDataFromUrl kan worden gebruikt om een GeoJSON-bestand via een URL in een gegevensbron te laden. Zodra de gegevens zijn gedownload, worden deze doorgegeven aan de functie gegevensbronnen add . Als het GeoJSON-bestand wordt gehost op een ander domein, moet u ervoor zorgen dat het andere domein ondersteuning biedt voor aanvragen tussen domeinen (COR's). Als u de gegevens niet naar een lokaal bestand in uw domein kunt kopiëren of een proxyservice maakt waarvoor COR's zijn ingeschakeld. Als het bestand groot is, kunt u het converteren naar een vectortegelbron.
• Als functies zijn verpakt met de Shape klasse, activeren de addPropertysetCoordinates, en setProperties functies van de shape allemaal een update in de gegevensbron en een kaartcanvasvernieuwing. Alle functies die door de gegevensbronnen getShapes en getShapeById functies worden geretourneerd, worden automatisch verpakt met de Shape klasse. Als u verschillende shapes wilt bijwerken, kunt u ze sneller converteren naar JSON met behulp van de functie gegevensbronnen toJson , de GeoJSON bewerken en deze gegevens vervolgens doorgeven aan de functie gegevensbronnen setShapes .

Vermijd het aanroepen van de gegevensbronnen om een duidelijke functie onnodig aan te roepen

Als u de duidelijke functie van de DataSource klasse aanroept, wordt het kaartcanvas vernieuwd. Als de clear functie meerdere keren achter elkaar wordt aangeroepen, kan er een vertraging optreden terwijl de kaart wacht tot elke vernieuwing plaatsvindt.

Dit is een veelvoorkomend scenario in toepassingen die de gegevensbron wissen, nieuwe gegevens downloaden, de gegevensbron opnieuw wissen en vervolgens de nieuwe gegevens aan de gegevensbron toevoegen. Afhankelijk van de gewenste gebruikerservaring zijn de volgende alternatieven beter.

• Wis de gegevens voordat u de nieuwe gegevens downloadt en geef de nieuwe gegevens door aan de gegevensbronnen add of setShapes functie. Als dit de enige gegevensset op de kaart is, is de kaart leeg terwijl de nieuwe gegevens worden gedownload.
• Download de nieuwe gegevens en geef deze door aan de functie gegevensbronnen setShapes . Hiermee worden alle gegevens op de kaart vervangen.

Ongebruikte functies en eigenschappen verwijderen

Als uw gegevensset functies bevat die niet in uw app worden gebruikt, verwijdert u deze. Verwijder ook eigenschappen voor functies die niet nodig zijn. Dit heeft verschillende voordelen:

• Vermindert de hoeveelheid gegevens die moet worden gedownload.
• Vermindert het aantal functies dat moet worden doorlopen bij het weergeven van de gegevens.
• Dit kan soms helpen bij het vereenvoudigen of verwijderen van gegevensgestuurde expressies en filters, wat betekent dat er minder verwerking nodig is tijdens het renderen.

Wanneer functies talloze eigenschappen of inhoud hebben, is het veel beter om te beperken wat er wordt toegevoegd aan de gegevensbron tot alleen de eigenschappen die nodig zijn voor rendering en om een afzonderlijke methode of service te hebben voor het ophalen van de andere eigenschap of inhoud wanneer dat nodig is. Als u bijvoorbeeld een eenvoudige kaart hebt die locaties op een kaart weergeeft wanneer u op een aantal gedetailleerde inhoud klikt, wordt weergegeven. Als u gegevensgestuurde stijl wilt gebruiken om aan te passen hoe de locaties op de kaart worden weergegeven, laadt u alleen de eigenschappen die nodig zijn in de gegevensbron. Als u de gedetailleerde inhoud wilt weergeven, gebruikt u de id van de functie om de andere inhoud afzonderlijk op te halen. Als de inhoud op de server wordt opgeslagen, kunt u de hoeveelheid gegevens verminderen die moet worden gedownload wanneer de kaart in eerste instantie wordt geladen met behulp van een service om deze asynchroon op te halen.

Bovendien kan het verminderen van het aantal significante cijfers in de coördinaten van functies ook de gegevensgrootte aanzienlijk verminderen. Het is niet ongebruikelijk dat coördinaten 12 of meer decimalen bevatten; zes decimalen hebben echter een nauwkeurigheid van ongeveer 0,1 meter, wat vaak nauwkeuriger is dan de locatie die de coördinaat vertegenwoordigt (zes decimalen wordt aanbevolen bij het werken met kleine locatiegegevens zoals binnenbouwindelingen). Als u meer dan zes decimalen hebt, is er waarschijnlijk geen verschil in hoe de gegevens worden weergegeven en moet de gebruiker meer gegevens downloaden voor geen extra voordeel.

Hier volgt een lijst met handige hulpprogramma's voor het werken met GeoJSON-gegevens.

Een afzonderlijke gegevensbron gebruiken voor snel veranderende gegevens

Soms is het nodig om snel gegevens op de kaart bij te werken voor zaken zoals het weergeven van live-updates van streaminggegevens of het inschakelen van functies. Wanneer een gegevensbron wordt bijgewerkt, wordt de rendering-engine doorlopen en alle functies in de gegevensbron weergegeven. Verbeter de algehele prestaties door statisch te scheiden van snel veranderende gegevens in verschillende gegevensbronnen, waardoor het aantal functies dat tijdens elke update opnieuw wordt weergegeven, wordt verminderd.

Als u vectortegels met livegegevens gebruikt, kunt u eenvoudig updates ondersteunen door de expires antwoordheader te gebruiken. Standaard worden tegels in een vectortegelbron of rastertegellaag automatisch opnieuw geladen wanneer de expires datum is. De verkeersstroom- en incidenttegels in de kaart gebruiken deze functie om ervoor te zorgen dat nieuwe realtime verkeersgegevens op de kaart worden weergegeven. Deze functie kan worden uitgeschakeld door de serviceoptie Maps refreshExpiredTiles in te stellen op false.

De buffer- en tolerantieopties in GeoJSON-gegevensbronnen aanpassen

De DataSource klasse converteert onbewerkte locatiegegevens naar vectortegels lokaal voor on-the-fly rendering. Deze lokale vectortegels knippen de onbewerkte gegevens af op de grenzen van het tegelgebied met een beetje buffer om de weergave tussen tegels soepel te laten verlopen. Hoe kleiner de buffer optie is, hoe minder overlappende gegevens worden opgeslagen in de lokale vectortegels en hoe beter de prestaties, maar hoe groter de wijziging van renderingartefacten die optreden. Probeer deze optie aan te passen om de juiste combinatie van prestaties te krijgen met minimale renderingartefacten.

De DataSource klasse heeft ook een tolerance optie die wordt gebruikt met het Douglas-Peucker-vereenvoudigingsalgoritmen bij het verminderen van de resolutie van geometrieën voor renderingdoeleinden. Het verhogen van deze tolerantiewaarde vermindert de resolutie van geometrieën en verbetert op zijn beurt de prestaties. Pas deze optie aan om de juiste combinatie van geometrieresolutie en prestaties voor uw gegevensset te krijgen.

De maximale zoomoptie van GeoJSON-gegevensbronnen instellen

De DataSource klasse converteert onbewerkte locatiegegevens naar vectortegels lokaal voor on-the-fly rendering. Dit gebeurt standaard tot zoomniveau 18, op welk moment, wanneer u nader inzoomt, worden gegevens van de tegels die zijn gegenereerd voor zoomniveau 18, gesampt. Dit werkt goed voor de meeste gegevenssets die een hoge resolutie moeten hebben wanneer ze op deze niveaus worden ingezoomd. Wanneer u echter werkt met gegevenssets die waarschijnlijker worden bekeken wanneer u meer uitzoomt, zoals bij het weergeven van de status- of provinciepogonen, stelt u de minZoom optie van de gegevensbron in op een kleinere waarde, zoals 12 het verminderen van de hoeveelheid berekening, het genereren van lokale tegels en het geheugen dat door de gegevensbron wordt gebruikt en de prestaties te verbeteren.

GeoJSON-antwoord minimaliseren

Wanneer u GeoJSON-gegevens van een server laadt via een service of door een plat bestand te laden, moet u ervoor zorgen dat de gegevens worden geminimaliseerd om overbodige spatietekens te verwijderen die de downloadgrootte groter maken dan nodig is.

Toegang krijgen tot onbewerkte GeoJSON met behulp van een URL

Het is mogelijk om GeoJSON-objecten inline op te slaan in JavaScript, maar dit maakt gebruik van meer geheugen als kopieën ervan worden opgeslagen in de variabele die u voor dit object hebt gemaakt en het gegevensbronexemplaren, waarmee deze binnen een afzonderlijke webwerkrol worden beheerd. Maak de GeoJSON beschikbaar voor uw app met behulp van een URL en de gegevensbron laadt één kopie van gegevens rechtstreeks in de webwerkrol voor gegevensbronnen.

Renderinglagen optimaliseren

Azure Maps biedt verschillende lagen voor het weergeven van gegevens op een kaart. Er zijn veel optimalisaties die u kunt gebruiken om deze lagen aan uw scenario aan te passen aan de toenameprestaties en de algehele gebruikerservaring.

Lagen eenmaal maken en opnieuw gebruiken

De Azure Kaarten Web SDK is gegevensgestuurd. Gegevens worden in gegevensbronnen geplaatst, die vervolgens zijn verbonden met renderinglagen. Als u de gegevens op de kaart wilt wijzigen, werkt u de gegevens in de gegevensbron bij of wijzigt u de stijlopties op een laag. Dit is vaak sneller dan verwijderen en vervolgens lagen opnieuw maken met elke wijziging.

Overweeg bellenlaag boven symboollaag

De bellenlaag geeft punten weer als cirkels op de kaart en kan eenvoudig hun radius en kleurstijl hebben met behulp van een gegevensgestuurde expressie. Omdat de cirkel een eenvoudige vorm is voor WebGL om te tekenen, kan de rendering-engine deze sneller weergeven dan een symboollaag, die een afbeelding moet laden en weergeven. Het prestatieverschil van deze twee renderinglagen is merkbaar bij het weergeven van tienduizenden punten.

HTML-markeringen en pop-ups spaarzaam gebruiken

In tegenstelling tot de meeste lagen in het Azure Kaarten-webbesturing die gebruikmaken van WebGL voor rendering, maken HTML-markeringen en pop-ups gebruik van traditionele DOM-elementen voor rendering. Hoe meer HTML-markeringen en pop-ups een pagina hebben toegevoegd, hoe meer DOM-elementen er zijn. De prestaties kunnen afnemen na het toevoegen van enkele honderden HTML-markeringen of pop-ups. Voor grotere gegevenssets kunt u overwegen om uw gegevens te clusteren of een symbool of bellenlaag te gebruiken.

In het pop-upvenster Hergebruiken met codevoorbeeld meerdere pincodes ziet u hoe u één pop-up maakt en opnieuw gebruikt door de inhoud en positie ervan bij te werken. Zie Pop-up opnieuw gebruiken met voorbeeldcode voor meerdere spelden voor de broncode.

Dat gezegd hebbende, als u maar een paar punten hebt om op de kaart weer te geven, kan de eenvoud van HTML-markeringen de voorkeur hebben. Daarnaast kunnen HTML-markeringen eenvoudig worden gesleept als dat nodig is.

Lagen combineren

De kaart kan echter honderden lagen weergeven, hoe meer lagen er zijn, hoe langer het duurt om een scène weer te geven. Een strategie om het aantal lagen te verminderen, is door lagen te combineren die vergelijkbare stijlen hebben of kunnen worden gestijld met behulp van gegevensgestuurde stijlen.

Denk bijvoorbeeld aan een gegevensset waarbij alle functies een isHealthy eigenschap hebben die een waarde van true of falsekan hebben. Als u een bellenlaag maakt die verschillende gekleurde bellen weergeeft op basis van deze eigenschap, kunt u dit op verschillende manieren doen, zoals wordt weergegeven in de volgende lijst, van minst presterend tot meest presterend.

• Splits de gegevens in twee gegevensbronnen op basis van de isHealthy waarde en koppel een bellenlaag met een in code vastgelegde kleuroptie aan elke gegevensbron.
• Plaats alle gegevens in één gegevensbron en maak twee bellenlagen met een in code vastgelegde kleuroptie en een filter op basis van de isHealthy eigenschap.
• Plaats alle gegevens in één gegevensbron, maak één bellenlaag met een case stijlexpressie voor de kleuroptie op basis van de isHealthy eigenschap. Hier volgt een codevoorbeeld dat dit laat zien.

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

Vloeiende animaties voor symboollagen maken

Symboollagen hebben standaard detectie van botsingen ingeschakeld. Deze botsingsdetectie is erop gericht ervoor te zorgen dat er geen twee symbolen overlappen. Het pictogram en de tekstopties van een symboollaag hebben twee opties:

• allowOverlap - geeft aan of het symbool zichtbaar is wanneer het conflicteert met andere symbolen.
• ignorePlacement - geeft aan of de andere symbolen mogen botsen met het symbool.

Beide opties zijn standaard ingesteld false op. Bij het aanbrengen van een symbool worden de berekeningen voor botsingsdetectie uitgevoerd op elk frame van de animatie, waardoor de animatie kan worden vertraagd en er minder vloeiend uitziet. Als u de animatie wilt uitvlakken, stelt u deze opties in op true.

Het codevoorbeeld Simple Symbol Animation demonstreert een eenvoudige manier om een symboollaag te animeren. Zie voorbeeldcode voor eenvoudige symboolanimatie voor de broncode naar dit voorbeeld.

Zoomniveaubereik opgeven

Als uw gegevens voldoen aan een van de volgende criteria, moet u het minimum- en maximum zoomniveau van de laag opgeven, zodat de rendering-engine deze kan overslaan wanneer deze buiten het bereik van het zoomniveau valt.

• Als de gegevens afkomstig zijn van een vectortegelbron, zijn vaak bronlagen voor verschillende gegevenstypen alleen beschikbaar via een bereik van zoomniveaus.
• Als u een tegellaag gebruikt die geen tegels bevat voor alle zoomniveaus 0 tot en met 24 en u wilt dat deze alleen wordt weergegeven op de niveaus waarop deze tegels bevat, en niet probeert u ontbrekende tegels met tegels van andere zoomniveaus in te vullen.
• Als u alleen een laag wilt weergeven op bepaalde zoomniveaus. Alle lagen hebben een minZoom en maxZoom optie waar de laag wordt weergegeven wanneer deze zoomniveaus op basis van deze logica maxZoom > zoom >= minZoomworden weergegeven.

Voorbeeld

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

Tegellaaggrenzen en bronzoombereik opgeven

Tegellagen laden standaard tegels over de hele wereld. Als de tegelservice echter alleen tegels voor een bepaald gebied bevat, probeert de kaart tegels te laden wanneer deze zich buiten dit gebied bevinden. Wanneer dit gebeurt, wordt er een aanvraag voor elke tegel gedaan en wordt gewacht op een antwoord dat kan blokkeren dat andere aanvragen worden gedaan door de kaart en zo het weergeven van andere lagen vertragen. Als u de grenzen van een tegellaag opgeeft, wordt in de kaart alleen tegels aangevraagd die zich binnen dat begrenzingsvak bevinden. Als de tegellaag alleen beschikbaar is tussen bepaalde zoomniveaus, geeft u om dezelfde reden de minimale en maximale bronzoom op.

Voorbeeld

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

Een lege kaartstijl gebruiken wanneer basiskaart niet zichtbaar is

Als een laag op de kaart wordt weergegeven die de basiskaart volledig bedekt, kunt u overwegen de kaartstijl in te blank stellen op of blank_accessible zodanig dat de basiskaart niet wordt weergegeven. Een veelvoorkomend scenario om dit te doen, is wanneer het overlayen van een tegel met een volledige wereldbol geen ondoorzichtigheid of transparant gebied boven de basiskaart heeft.

Probleemloos animatie toevoegen aan afbeeldings- of tegellagen

Als u animatie wilt toepassen op een reeks afbeeldings- of tegellagen op de kaart. Het is vaak sneller om een laag te maken voor elke afbeelding of tegellaag en om de dekking te wijzigen dan de bron van één laag in elk animatieframe bij te werken. Het verbergen van een laag door de dekking in te stellen op nul en een nieuwe laag weer te geven door de dekking in te stellen op een waarde die groter is dan nul, is sneller dan het bijwerken van de bron in de laag. U kunt ook de zichtbaarheid van de lagen in- of uitschakelen, maar zorg ervoor dat u de fadeduur van de laag instelt op nul, anders wordt de laag geactiveerd wanneer deze wordt weergegeven, wat een flikkereffect veroorzaakt omdat de vorige laag zou zijn verborgen voordat de nieuwe laag zichtbaar is.

Detectielogica voor symboollaagconflicten aanpassen

De symboollaag heeft twee opties voor zowel pictogram als tekst die wordt aangeroepen allowOverlap en ignorePlacement. Deze twee opties geven aan of het pictogram of de tekst van een symbool elkaar kan overlappen of overlappen. Wanneer deze zijn ingesteld op false, voert de symboollaag berekeningen uit bij het weergeven van elk punt om te zien of het conflicteert met een ander al gerenderd symbool in de laag en als dit het geval is, geeft u het conflicterende symbool niet weer. Dit is handig om onbelangrijke e-mail op de kaart te verminderen en het aantal weergegeven objecten te verminderen. Door deze opties in te falsestellen, wordt deze logica voor conflictdetectie overgeslagen en worden alle symbolen weergegeven op de kaart. Pas deze optie aan om de beste combinatie van prestaties en gebruikerservaring te krijgen.

Gegevenssets voor grote punten clusteren

Wanneer u met grote sets gegevenspunten werkt, kan het zijn dat wanneer deze op bepaalde zoomniveaus wordt weergegeven, veel van de punten elkaar overlappen en slechts gedeeltelijk zichtbaar zijn, indien helemaal niet. Clustering is het proces van groeperingspunten die dicht bij elkaar staan en die als één gegroepeerd punt vertegenwoordigen. Wanneer de gebruiker inzoomt op de kaart, splitsen clusters zich in hun afzonderlijke punten. Dit kan de hoeveelheid gegevens die moet worden weergegeven aanzienlijk verminderen, de kaart minder overzichtelijk maken en de prestaties verbeteren. De DataSource klasse heeft opties voor het lokaal clusteren van gegevens. Daarnaast hebben veel hulpprogramma's die vectortegels genereren ook clusteropties.

Verhoog bovendien de grootte van de clusterstraal om de prestaties te verbeteren. Hoe groter de clusterstraal, hoe minder geclusterde punten er zijn om bij te houden en weer te geven. Zie Clustering-puntgegevens in de Web SDK voor meer informatie.

Gegewogen geclusterde heatmaps gebruiken

De heatmaplaag kan tienduizenden gegevenspunten gemakkelijk weergeven. Voor grotere gegevenssets kunt u clustering inschakelen op de gegevensbron en een kleine clusterstraal gebruiken en de eigenschap clusters point_count gebruiken als gewicht voor de hoogtetoewijzing. Wanneer de clusterstraal slechts een paar pixels groot is, is er weinig visueel verschil in de weergegeven heatmap. Het gebruik van een grotere clusterstraal verbetert de prestaties meer, maar kan de resolutie van de weergegeven heatmap verminderen.

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

Zie Clustering en de heatmaplaag voor meer informatie.

Afbeeldingsbronnen klein houden

Afbeeldingen kunnen worden toegevoegd aan de afbeeldingsspite van kaarten voor het weergeven van pictogrammen in een symboollaag of patronen in een polygoonlaag. Houd deze afbeeldingen klein om de hoeveelheid gegevens te minimaliseren die moet worden gedownload en de hoeveelheid ruimte die ze in beslag nemen in de afbeeldingsspite van de kaart. Wanneer u een symboollaag gebruikt waarmee het pictogram wordt geschaald met behulp van de size optie, gebruikt u een afbeelding die de maximale grootte is die uw plan weergeeft op de kaart en niet groter. Dit zorgt ervoor dat het pictogram wordt weergegeven met een hoge resolutie terwijl de resources die worden gebruikt, worden geminimaliseerd. Daarnaast kunnen SVG's ook worden gebruikt als een kleinere bestandsindeling voor eenvoudige pictogramafbeeldingen.

Expressies optimaliseren

Gegevensgestuurde stijlexpressies bieden flexibiliteit en mogelijkheden voor het filteren en stylen van gegevens op de kaart. Er zijn veel manieren waarop expressies kunnen worden geoptimaliseerd. Hier volgen enkele tips.

De complexiteit van filters verminderen

Filters doorlopen alle gegevens in een gegevensbron en controleren of elk filter overeenkomt met de logica in het filter. Als filters complex worden, kan dit prestatieproblemen veroorzaken. Enkele mogelijke strategieën om dit aan te pakken, zijn onder andere de volgende.

• Als u vectortegels gebruikt, moet u de gegevens opsplitsen in verschillende bronlagen.
• Als u de DataSource klasse gebruikt, splitst u die gegevens op in afzonderlijke gegevensbronnen. Probeer het aantal gegevensbronnen te verdelen met de complexiteit van het filter. Te veel gegevensbronnen kunnen ook prestatieproblemen veroorzaken, dus mogelijk moet u een aantal tests uitvoeren om erachter te komen wat het beste werkt voor uw scenario.
• Wanneer u een complex filter op een laag gebruikt, kunt u overwegen om meerdere lagen met stijlexpressies te gebruiken om de complexiteit van het filter te verminderen. Vermijd het maken van een aantal lagen met vastgelegde stijlen wanneer stijlexpressies kunnen worden gebruikt als een groot aantal lagen ook prestatieproblemen kunnen veroorzaken.

Zorg ervoor dat expressies geen fouten produceren

Expressies worden vaak gebruikt om code te genereren voor het uitvoeren van berekeningen of logische bewerkingen tijdens het renderen. Net als de code in de rest van uw toepassing, moet u ervoor zorgen dat de berekeningen en logische waarden logisch zijn en niet foutgevoelig zijn. Fouten in expressies veroorzaken problemen bij het evalueren van de expressie, wat kan leiden tot verminderde prestaties en renderingproblemen.

Een veelvoorkomende fout om rekening mee te houden, is het hebben van een expressie die afhankelijk is van een functie-eigenschap die mogelijk niet bestaat voor alle functies. De volgende code gebruikt bijvoorbeeld een expressie om de kleureigenschap van een bellenlaag in te stellen op de myColor eigenschap van een functie.

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

De bovenstaande code werkt prima als alle functies in de gegevensbron een myColor eigenschap hebben en de waarde van die eigenschap een kleur is. Dit is mogelijk geen probleem als u volledige controle hebt over de gegevens in de gegevensbron en weet dat bepaalde functies een geldige kleur hebben in een myColor eigenschap. Als u deze code wilt beveiligen tegen fouten, kan een case expressie worden gebruikt met de has expressie om te controleren of de functie de myColor eigenschap heeft. Als dat het geval is, kan de to-color typeexpressie worden gebruikt om de waarde van die eigenschap te converteren naar een kleur. Als de kleur ongeldig is, kan een terugvalkleur worden gebruikt. De volgende code laat zien hoe u dit doet en stelt de terugvalkleur in op groen.

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

Booleaanse expressies ordenen van de meest specifieke naar minst specifieke

Beperk het totale aantal voorwaardelijke tests dat is vereist bij het gebruik van Booleaanse expressies die meerdere voorwaardelijke tests bevatten door ze van de meeste naar het minst specifieke te rangschikken.

Expressies vereenvoudigen

Expressies kunnen krachtig en soms complex zijn. Hoe eenvoudiger een expressie is, hoe sneller deze wordt geëvalueerd. Als u bijvoorbeeld een eenvoudige vergelijking nodig hebt, is een expressie die beter ['==', ['get', 'category'], 'restaurant'] is dan het gebruik van een overeenkomstexpressie zoals ['match', ['get', 'category'], 'restaurant', true, false]. In dit geval is een expressie nog eenvoudiger ['get','isRestaurant']als de eigenschap die wordt gecontroleerd een booleaanse waarde get is.

Problemen met web-SDK oplossen

Hier volgen enkele tips voor het opsporen van fouten in enkele veelvoorkomende problemen bij het ontwikkelen met de Azure Kaarten Web SDK.

Waarom wordt de kaart niet weergegeven wanneer ik het web besturingselement laad?

Wat u moet controleren:

• Zorg ervoor dat u de verificatieopties in de kaart voltooit. Zonder verificatie wordt op de kaart een leeg canvas geladen en wordt een 401-fout geretourneerd op het netwerktabblad van de ontwikkelhulpprogramma's van de browser.
• Zorg ervoor dat u een internetverbinding hebt.
• Controleer de console op fouten in de ontwikkelhulpprogramma's van de browser. Sommige fouten kunnen ertoe leiden dat de kaart niet wordt weergegeven. Fouten opsporen in uw toepassing.
• Zorg ervoor dat u een ondersteunde browser gebruikt.

Al mijn gegevens worden aan de andere kant van de wereld weergegeven, wat is er aan de hand?

Coördinaten, ook wel posities genoemd, in de Azure Kaarten SDK's zijn afgestemd op de georuimtelijke industriestandaardindeling van [longitude, latitude]. Dezelfde indeling is ook hoe coördinaten worden gedefinieerd in het GeoJSON-schema; de kerngegevens die zijn opgemaakt in de Azure Kaarten SDK's. Als uw gegevens aan de andere kant van de wereld worden weergegeven, is dit waarschijnlijk het gevolg van de omgekeerde lengte- en breedtegraadwaarden in uw coördinaten-/positiegegevens.

Waarom worden HTML-markeringen weergegeven op de verkeerde plaats in het webbesturing?

Wat u moet controleren:

• Als u aangepaste inhoud voor de markering gebruikt, controleert u of de anchor opties pixelOffset juist zijn. Standaard wordt het onderste midden van de inhoud uitgelijnd met de positie op de kaart.
• Zorg ervoor dat het CSS-bestand voor Azure Kaarten is geladen.
• Controleer het DOM-element van de HTML-markering om te zien of CSS van uw app zichzelf heeft toegevoegd aan de markering en van invloed is op de positie ervan.

Waarom worden pictogrammen of tekst in de symboollaag op de verkeerde plaats weergegeven?

Controleer of de anchor opties offset juist zijn geconfigureerd om te worden uitgelijnd met het deel van uw afbeelding of tekst dat u wilt hebben uitgelijnd met de coördinaat op de kaart. Als het symbool alleen niet aanwezig is wanneer de kaart wordt gedraaid, controleert u de rotationAlignment optie. Symbolen worden standaard gedraaid met de maps viewport, die rechtop voor de gebruiker worden weergegeven. Afhankelijk van uw scenario kan het echter wenselijk zijn om het symbool te vergrendelen op de afdrukstand van de kaart door de rotationAlignment optie in te stellen op map.

Als het symbool zich alleen buiten de plaats bevindt wanneer de kaart wordt gegooid/gekanteld, controleert u de pitchAlignment optie. Symbolen blijven standaard rechtop in de viewport van de kaarten wanneer de kaart wordt gegooid of gekanteld. Afhankelijk van uw scenario kan het echter wenselijk zijn om het symbool te vergrendelen op de pitch van de kaart door de pitchAlignment optie in te stellen op map.

Waarom worden mijn gegevens niet weergegeven op de kaart?

Wat u moet controleren:

• Controleer de console in de ontwikkelhulpprogramma's van de browser op fouten.
• Zorg ervoor dat er een gegevensbron is gemaakt en toegevoegd aan de kaart en dat de gegevensbron is verbonden met een renderinglaag die ook aan de kaart is toegevoegd.
• Voeg onderbrekingspunten toe aan uw code en doorloop deze. Zorg ervoor dat gegevens worden toegevoegd aan de gegevensbron en dat de gegevensbron en lagen aan de kaart worden toegevoegd.
• Verwijder gegevensgestuurde expressies uit uw renderinglaag. Het is mogelijk dat een van hen een fout bevat die het probleem veroorzaakt.

Kan ik de Azure Kaarten Web SDK gebruiken in een iframe in een sandbox?

Ja.

Ondersteuning krijgen

Hier volgen de verschillende manieren om ondersteuning te krijgen voor Azure Kaarten, afhankelijk van uw probleem.

Hoe kan ik een gegevensprobleem of een probleem met een adres melden?

Meld problemen met behulp van de feedbacksite van Azure Kaarten. Gedetailleerde instructies over het melden van gegevensproblemen worden gegeven in het artikel Gegevensfeedback geven aan Azure Kaarten.

Notitie

Elk verzonden probleem genereert een unieke URL om het bij te houden. Oplossingstijden variëren, afhankelijk van het probleemtype en de tijd die nodig is om te controleren of de wijziging juist is. De wijzigingen worden weergegeven in de wekelijkse update van renderservices, terwijl andere services zoals geocodering en routering maandelijks worden bijgewerkt.

Hoe kan ik een fout melden in een service of API?

Meld problemen op de help- en ondersteuningspagina van Azure door de knop Een ondersteuningsaanvraag maken te selecteren.

Waar krijg ik technische hulp voor Azure Kaarten?

• Neem contact op met de ondersteuning van Power BI voor vragen met betrekking tot de Azure Kaarten Power BI-visual.

• Neem voor alle andere Azure Kaarten-services contact op met ondersteuning voor Azure.

• Gebruik de Azure Kaarten-ontwikkelaarsforums voor vragen of opmerkingen over specifieke Functies van Azure Kaarten.

Volgende stappen

Zie de volgende artikelen voor meer tips over het verbeteren van de gebruikerservaring in uw toepassing.

Uw toepassing toegankelijk maken

Meer informatie over de terminologie die wordt gebruikt door Azure Kaarten en de georuimtelijke branche.

Woordenlijst voor Azure Kaarten