Procedure consigliate per Mappe di Azure Web SDK

Questo documento è incentrato sulle procedure consigliate per Mappe di Azure Web SDK, ma molte delle procedure consigliate e delle ottimizzazioni descritte possono essere applicate a tutti gli altri SDK Mappe di Azure.

L'SDK Web di Mappe di Azure offre un'area di disegno potente per il rendering di set di dati spaziali di grandi dimensioni in molti modi diversi. In alcuni casi, esistono diversi modi per eseguire il rendering dei dati allo stesso modo, ma a seconda delle dimensioni del set di dati e della funzionalità desiderata, un metodo potrebbe offrire prestazioni migliori rispetto ad altre. Questo articolo illustra procedure consigliate e suggerimenti e consigli per ottimizzare le prestazioni e creare un'esperienza utente fluida.

In genere, quando si cerca di migliorare le prestazioni della mappa, cercare modi per ridurre il numero di livelli e origini e la complessità dei set di dati e degli stili di rendering usati.

Procedure consigliate per la sicurezza

Per altre informazioni sulle procedure consigliate per la sicurezza, vedere Procedure consigliate per l'autenticazione e l'autorizzazione.

Usare le versioni più recenti di Mappe di Azure

Gli SDK Mappe di Azure vengono sottoposti a test di sicurezza regolari insieme a qualsiasi libreria di dipendenze esterna usata dagli SDK. Qualsiasi problema di sicurezza noto viene risolto in modo tempestivo e rilasciato nell'ambiente di produzione. Se l'applicazione punta alla versione principale più recente della versione ospitata di Mappe di Azure Web SDK, riceve automaticamente tutti gli aggiornamenti della versione secondaria che includono correzioni correlate alla sicurezza.

Se l'SDK Web di Mappe di Azure viene self-hosting tramite il modulo npm, assicurarsi di usare il simbolo di cursore (^) in combinazione con il numero di versione del pacchetto npm Mappe di Azure nel package.json file in modo che punti alla versione secondaria più recente.

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

Suggerimento

Usare sempre la versione più recente del controllo npm Mappe di Azure. Per altre informazioni, vedere azure-maps-control nella documentazione di npm.

Ottimizzare il carico iniziale della mappa

Quando si carica una pagina Web, una delle prime operazioni da eseguire consiste nell'avviare il rendering di un elemento il prima possibile in modo che l'utente non stia fissando una schermata vuota.

Guarda l'evento pronto per le mappe

Analogamente, quando la mappa viene inizialmente caricata spesso, è consigliabile caricarvi i dati il più rapidamente possibile, in modo che l'utente non guardi una mappa vuota. Poiché la mappa carica le risorse in modo asincrono, è necessario attendere che la mappa sia pronta per l'interazione con prima di provare a eseguire il rendering dei propri dati. Esistono due eventi che è possibile attendere, un load evento e un ready evento. L'evento di caricamento verrà generato dopo che la mappa ha completato completamente il caricamento della visualizzazione mappa iniziale e ogni riquadro della mappa è stato caricato. Se viene visualizzato un errore "Style is not done loading", devi usare l'evento load e attendere il caricamento completo dello stile.

L'evento pronto viene generato quando le risorse della mappa minime necessarie per iniziare a interagire con la mappa. Più precisamente, l'evento ready viene attivato quando la mappa carica i dati di stile per la prima volta. L'evento pronto può spesso essere generato nella metà del tempo dell'evento di caricamento e quindi consente di iniziare a caricare i dati nella mappa prima. Evitare di apportare modifiche allo stile o alla lingua della mappa in questo momento, in quanto ciò può attivare un ricaricamento dello stile.

Caricamento differita dell'SDK Web Mappe di Azure

Se la mappa non è necessaria immediatamente, caricare il Mappe di Azure Web SDK fino a quando non è necessario. Questo ritarda il caricamento dei file JavaScript e CSS usati dall'SDK Web Mappe di Azure fino a quando necessario. Uno scenario comune in cui ciò si verifica è quando la mappa viene caricata in una scheda o in un pannello a comparsa che non viene visualizzato al caricamento della pagina.

L'esempio di codice Lazy Load the Map mostra come ritardare il caricamento del Mappe di Azure Web SDK finché non viene premuto un pulsante. Per il codice sorgente, vedere Lazy Load the Map sample code (Caricare il codice di esempio mappa).

Aggiungere un segnaposto per la mappa

Se il caricamento della mappa richiede tempo a causa di limitazioni di rete o altre priorità all'interno dell'applicazione, è consigliabile aggiungere una piccola immagine di sfondo alla mappa div come segnaposto per la mappa. In questo modo viene riempito il vuoto della mappa div durante il caricamento.

Impostare le opzioni iniziali dello stile della mappa e della fotocamera per l'inizializzazione

Spesso le app vogliono caricare la mappa in una posizione o uno stile specifici. A volte gli sviluppatori attendono il caricamento della mappa (o l'attesa dell'evento ready ) e quindi usano le setCamera funzioni o setStyle della mappa. Questo spesso richiede più tempo per arrivare alla visualizzazione mappa iniziale desiderata perché molte risorse finiscono per essere caricate per impostazione predefinita prima del caricamento delle risorse necessarie per la visualizzazione mappa desiderata. Un approccio migliore consiste nel passare le opzioni desiderate per la fotocamera della mappa e lo stile nella mappa durante l'inizializzazione.

Ottimizzare le origini dati

Web SDK ha due origini dati,

• Origine GeoJSON: la DataSource classe gestisce i dati di posizione non elaborati in formato GeoJSON in locale. Buona per set di dati di piccole e medie dimensioni (verso l'alto di centinaia di migliaia di funzionalità).
• Origine riquadro vettoriale: la VectorTileSource classe carica i dati formattati come riquadri vettoriali per la visualizzazione mappa corrente, in base al sistema di affiancamento delle mappe. Ideale per set di dati di grandi dimensioni (milioni o miliardi di funzionalità).

Usare soluzioni basate su riquadri per set di dati di grandi dimensioni

Se si usano set di dati di dimensioni maggiori contenenti milioni di funzionalità, il modo consigliato per ottenere prestazioni ottimali consiste nell'esporre i dati usando una soluzione lato server, ad esempio un servizio di riquadri di immagini raster o vettoriali.
I riquadri vettoriali sono ottimizzati per caricare solo i dati visualizzati con le geometrie ritagliate nell'area messa a fuoco del riquadro e generalizzate in modo che corrispondano alla risoluzione della mappa per il livello di zoom del riquadro.

La piattaforma Mappe di Azure Creator recupera i dati in formato riquadro vettoriale. Altri formati di dati possono usare strumenti come Tippecanoe. Per altre informazioni sull'uso di riquadri vettoriali, vedere il file leggimi Mapbox awesome-vector-tiles in GitHub.

È anche possibile creare un servizio personalizzato che esegue il rendering dei set di dati come riquadri di immagini raster sul lato server e caricare i dati usando la classe TileLayer nell'SDK della mappa. Ciò garantisce prestazioni eccezionali perché la mappa deve solo caricare e gestire al massimo poche decine di immagini. Esistono tuttavia alcune limitazioni con l'uso di riquadri raster, perché i dati non elaborati non sono disponibili in locale. Un servizio secondario è spesso necessario per attivare qualsiasi tipo di esperienza di interazione, ad esempio scoprire la forma su cui un utente ha fatto clic. Inoltre, le dimensioni del file di un riquadro raster sono spesso maggiori di un riquadro vettoriale compresso che contiene geometrie ottimizzate per il livello di zoom e generalizzato.

Per altre informazioni sulle origini dati, vedere Creare un'origine dati.

Combinare più set di dati in un'unica origine di riquadri vettoriali

Meno origini dati è necessario gestire la mappa, più velocemente può elaborare tutte le funzionalità da visualizzare. In particolare, quando si tratta di origini di riquadri, la combinazione di due origini di riquadri vettoriali riduce il numero di richieste HTTP per recuperare i riquadri in metà e la quantità totale di dati sarebbe leggermente inferiore perché esiste una sola intestazione di file.

È possibile combinare più set di dati in una singola origine di riquadri vettoriali usando uno strumento come Tippecanoe. I set di dati possono essere combinati in una singola raccolta di funzionalità o separati in livelli separati all'interno del riquadro vettoriale noto come livelli di origine. Quando si connette un'origine di riquadri vettoriali a un livello di rendering, è necessario specificare il livello di origine che contiene i dati di cui si vuole eseguire il rendering con il livello.

Ridurre il numero di aggiornamenti dell'area di disegno a causa di aggiornamenti dei dati

Esistono diversi modi in cui è possibile aggiungere o aggiornare i dati in una DataSource classe. L'elenco seguente illustra i diversi metodi e alcune considerazioni per garantire prestazioni ottimali.

• La funzione origini dati add può essere usata per aggiungere una o più funzionalità a un'origine dati. Ogni volta che questa funzione viene chiamata attiva un aggiornamento dell'area di disegno mappa. Se si aggiungono molte funzionalità, combinarle in una matrice o in una raccolta di funzionalità e passarle a questa funzione una sola volta, anziché scorrere un set di dati e chiamare questa funzione per ogni funzionalità.
• La funzione origini dati setShapes può essere utilizzata per sovrascrivere tutte le forme in un'origine dati. Sotto le quinte, combina le origini clear dati e add le funzioni insieme e esegue un singolo aggiornamento dell'area di disegno mappa invece di due, che è più veloce. Assicurarsi di usare questa funzione quando si desidera aggiornare tutti i dati in un'origine dati.
• La funzione origini dati importDataFromUrl può essere usata per caricare un file GeoJSON tramite un URL in un'origine dati. Dopo il download dei dati, i dati vengono passati alla funzione origini dati add . Se il file GeoJSON è ospitato in un dominio diverso, assicurarsi che l'altro dominio supporti le richieste tra domini (COR). Se non considera la copia dei dati in un file locale nel dominio o la creazione di un servizio proxy con COR abilitato. Se il file è di grandi dimensioni, è consigliabile convertirlo in un'origine riquadro vettoriale.
• Se le funzionalità vengono incluse nella Shape classe , addPropertysetCoordinates, e setProperties della forma attivano tutti un aggiornamento nell'origine dati e un aggiornamento dell'area di disegno mappa. Tutte le funzionalità restituite dalle origini getShapes dati e getShapeById dalle funzioni vengono automaticamente incluse nella Shape classe . Se si vogliono aggiornare più forme, è più veloce convertirle in JSON usando la funzione origini dati toJson , modificando GeoJSON, quindi passando questi dati alla funzione origini dati setShapes .

Evitare di chiamare la funzione chiara delle origini dati inutilmente

La chiamata alla funzione clear della classe causa un aggiornamento dell'area di disegno mappa DataSource . Se la clear funzione viene chiamata più volte in una riga, può verificarsi un ritardo mentre la mappa attende che si verifichi ogni aggiornamento.

Si tratta di uno scenario comune nelle applicazioni che cancellano l'origine dati, scaricano nuovi dati, cancellano nuovamente l'origine dati e quindi aggiungono i nuovi dati all'origine dati. A seconda dell'esperienza utente desiderata, le alternative seguenti sarebbero migliori.

• Cancellare i dati prima di scaricare i nuovi dati, quindi passare i nuovi dati alle origini dati add o setShapes alla funzione. Se si tratta dell'unico set di dati sulla mappa, la mappa è vuota durante il download dei nuovi dati.
• Scaricare i nuovi dati e quindi passarli alla funzione origini dati setShapes . In questo modo vengono sostituiti tutti i dati sulla mappa.

Rimuovere le funzionalità e le proprietà inutilizzate

Se il set di dati contiene funzionalità che non verranno usate nell'app, rimuoverle. Analogamente, rimuovere tutte le proprietà sulle funzionalità non necessarie. Ciò comporta diversi vantaggi:

• Riduce la quantità di dati da scaricare.
• Riduce il numero di funzionalità che devono essere sottoposte a ciclo continuo durante il rendering dei dati.
• Può talvolta semplificare o rimuovere espressioni e filtri basati sui dati, il che significa meno elaborazione necessaria in fase di rendering.

Quando le funzionalità hanno numerose proprietà o contenuto, è molto più efficiente limitare ciò che viene aggiunto all'origine dati solo a quelli necessari per il rendering e avere un metodo o un servizio separato per il recupero dell'altra proprietà o contenuto quando necessario. Ad esempio, se si dispone di una semplice mappa che visualizza le posizioni su una mappa quando si fa clic su una serie di contenuti dettagliati viene visualizzato. Se si vuole usare lo stile basato sui dati per personalizzare la modalità di rendering delle posizioni sulla mappa, caricare solo le proprietà necessarie nell'origine dati. Quando si desidera visualizzare il contenuto dettagliato, usare l'ID della funzionalità per recuperare separatamente l'altro contenuto. Se il contenuto viene archiviato nel server, è possibile ridurre la quantità di dati da scaricare quando la mappa viene inizialmente caricata usando un servizio per recuperarla in modo asincrono.

Inoltre, la riduzione del numero di cifre significative nelle coordinate delle funzionalità può anche ridurre significativamente le dimensioni dei dati. Non è raro che le coordinate contengano 12 o più posizioni decimali; Tuttavia, sei posizioni decimali hanno un'accuratezza di circa 0,1 metri, che è spesso più precisa della posizione rappresentata dalla coordinata (sei posizioni decimali è consigliato quando si usano dati di posizione piccoli, ad esempio layout di edifici interni). La presenza di più di sei cifre decimali probabilmente non farà alcuna differenza nel modo in cui viene eseguito il rendering dei dati e richiede all'utente di scaricare più dati senza alcun vantaggio aggiuntivo.

Ecco un elenco di strumenti utili per l'uso dei dati GeoJSON.

Usare un'origine dati separata per modificare rapidamente i dati

In alcuni casi è necessario aggiornare rapidamente i dati sulla mappa per elementi come la visualizzazione degli aggiornamenti live dei dati di streaming o delle funzionalità di animazione. Quando un'origine dati viene aggiornata, il motore di rendering scorre ed esegue il rendering di tutte le funzionalità nell'origine dati. Migliorare le prestazioni complessive separando i dati statici dalla rapida modifica dei dati in origini dati diverse, riducendo il numero di funzionalità di cui viene eseguito il rendering durante ogni aggiornamento.

Se si usano riquadri vettoriali con dati in tempo reale, un modo semplice per supportare gli aggiornamenti consiste nell'usare l'intestazione della expires risposta. Per impostazione predefinita, qualsiasi origine di riquadri vettoriali o livello riquadro raster ricarica automaticamente i riquadri quando la expires data. Il flusso del traffico e i riquadri degli eventi imprevisti nella mappa usano questa funzionalità per garantire che nella mappa vengano visualizzati nuovi dati sul traffico in tempo reale. Questa funzionalità può essere disabilitata impostando l'opzione del servizio mappe refreshExpiredTiles su false.

Modificare le opzioni di buffer e tolleranza nelle origini dati GeoJSON

La DataSource classe converte i dati di posizione non elaborati in riquadri vettoriali locali per il rendering in tempo reale. Questi riquadri vettoriali locali ritagliano i dati non elaborati ai limiti dell'area del riquadro con un po' di buffer per garantire un rendering uniforme tra i riquadri. Più piccola è l'opzione buffer , il minor numero di dati sovrapposti viene archiviato nei riquadri vettoriali locali e le prestazioni migliori, tuttavia, maggiore è la modifica degli artefatti di rendering che si verificano. Provare a modificare questa opzione per ottenere la combinazione corretta di prestazioni con elementi di rendering minimi.

La DataSource classe ha anche un'opzione tolerance usata con l'algoritmo di semplificazione Douglas-Peucker quando si riduce la risoluzione delle geometrie a scopo di rendering. L'aumento di questo valore di tolleranza riduce la risoluzione delle geometrie e a sua volta migliora le prestazioni. Modificare questa opzione per ottenere la combinazione corretta di risoluzione e prestazioni della geometria per il set di dati.

Impostare l'opzione max zoom delle origini dati GeoJSON

La DataSource classe converte i dati di posizione non elaborati in riquadri vettoriali locali per il rendering in tempo reale. Per impostazione predefinita, questa operazione viene eseguita fino al livello di zoom 18, a quel punto, quando viene eseguito lo zoom più vicino, vengono campionati i dati dei riquadri generati per il livello di zoom 18. Questo funziona bene per la maggior parte dei set di dati che devono avere una risoluzione elevata quando si esegue lo zoom avanti a questi livelli. Tuttavia, quando si usano set di dati con maggiore probabilità di visualizzazione quando si esegue lo zoom indietro, ad esempio quando si visualizzano i poligoni dello stato o della provincia, impostando l'opzione minZoom dell'origine dati su un valore più piccolo, ad 12 esempio riduce il calcolo della quantità, la generazione di riquadri locali che si verifica e la memoria usata dall'origine dati e aumentano le prestazioni.

Ridurre al minimo la risposta GeoJSON

Quando si caricano dati GeoJSON da un server tramite un servizio o caricando un file flat, assicurarsi di ridurre al minimo i dati per rimuovere i caratteri di spazio non necessari che rendono le dimensioni di download maggiori del necessario.

Accedere a GeoJSON non elaborato usando un URL

È possibile archiviare gli oggetti GeoJSON inline all'interno di JavaScript, ma in questo modo viene usata una quantità maggiore di memoria perché le copie vengono archiviate nella variabile creata per questo oggetto e nell'istanza dell'origine dati, che la gestisce all'interno di un web worker separato. Esporre GeoJSON all'app usando invece un URL e l'origine dati carica una singola copia dei dati direttamente nel web worker delle origini dati.

Ottimizzare i livelli di rendering

Mappe di Azure offre diversi livelli per il rendering dei dati su una mappa. Esistono molte ottimizzazioni che è possibile sfruttare per personalizzare questi livelli in base allo scenario, aumentando le prestazioni e l'esperienza utente complessiva.

Creare livelli una sola volta e riutilizzarli

L'SDK Web Mappe di Azure è basato sui dati. I dati vengono inseriti in origini dati, che vengono quindi connesse ai livelli di rendering. Se si desidera modificare i dati sulla mappa, aggiornare i dati nell'origine dati o modificare le opzioni di stile in un livello. Questo è spesso più veloce rispetto alla rimozione, quindi ricreando i livelli con ogni modifica.

Prendere in considerazione il livello a bolle sul livello simbolo

Il livello bolla esegue il rendering dei punti come cerchi sulla mappa e può avere facilmente il raggio e il colore in stile usando un'espressione guidata dai dati. Poiché il cerchio è una forma semplice per WebGL da disegnare, il motore di rendering è in grado di eseguire il rendering più velocemente di un livello simbolo, che deve caricare ed eseguire il rendering di un'immagine. La differenza di prestazioni di questi due livelli di rendering è evidente quando si esegue il rendering di decine di migliaia di punti.

Usare i marcatori HTML e i popup con moderazione

A differenza della maggior parte dei livelli nel controllo Web Mappe di Azure che usano WebGL per il rendering, i marcatori HTML e i popup usano elementi DOM tradizionali per il rendering. Di conseguenza, più indicatori HTML e popup hanno aggiunto una pagina, più elementi DOM sono presenti. Le prestazioni possono peggiorare dopo l'aggiunta di alcune centinaia di indicatori HTML o popup. Per set di dati di dimensioni maggiori, prendere in considerazione il clustering dei dati o l'uso di un simbolo o di un livello a bolle.

L'esempio di codice Riutilizzo popup con più pin mostra come creare un singolo popup e riutilizzarlo aggiornandone il contenuto e la posizione. Per il codice sorgente, vedere Riutilizzo di popup con più pin di esempio.

Detto questo, se sulla mappa sono presenti solo alcuni punti di rendering, la semplicità dei marcatori HTML potrebbe essere preferibile. Inoltre, i marcatori HTML possono essere facilmente trascinabili se necessario.

Combinare i livelli

La mappa è in grado di eseguire il rendering di centinaia di livelli, ma più livelli ci sono, maggiore è il tempo necessario per eseguire il rendering di una scena. Una strategia per ridurre il numero di livelli consiste nel combinare livelli con stili simili o che possono essere stili basati sui dati.

Si consideri ad esempio un set di dati in cui tutte le funzionalità hanno una isHealthy proprietà che può avere un valore o true false. Se si crea un livello bolla che esegue il rendering di bolle colorate diverse in base a questa proprietà, esistono diversi modi per eseguire questa operazione, come illustrato nell'elenco seguente, dalla meno efficiente alla più efficiente.

• Suddividere i dati in due origini dati in base al isHealthy valore e associare un livello a bolle con un'opzione colore hardcoded a ogni origine dati.
• Inserire tutti i dati in una singola origine dati e creare due livelli a bolle con un'opzione di colore hardcoded e un filtro basato sulla isHealthy proprietà .
• Inserire tutti i dati in una singola origine dati, creare un singolo livello a bolle con un'espressione case di stile per l'opzione di colore in base alla isHealthy proprietà . Di seguito è riportato un esempio di codice che illustra questa operazione.

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

Creare animazioni a livello di simboli uniformi

Per impostazione predefinita, i livelli dei simboli sono abilitati per il rilevamento delle collisioni. Questo rilevamento collisioni mira a garantire che nessun simbolo si sovrapponga. L'icona e le opzioni di testo di un livello simbolo hanno due opzioni,

• allowOverlap - specifica se il simbolo è visibile quando si scontra con altri simboli.
• ignorePlacement - specifica se gli altri simboli possono essere in conflitto con il simbolo.

Entrambe queste opzioni sono impostate false su per impostazione predefinita. Quando si anima un simbolo, i calcoli di rilevamento delle collisioni vengono eseguiti su ogni fotogramma dell'animazione, che può rallentare l'animazione e renderla meno fluida. Per uniformare l'animazione, impostare queste opzioni su true.

L'esempio di codice Simple Symbol Animation illustra un modo semplice per animare un livello simbolo. Per il codice sorgente di questo esempio, vedi Codice di esempio di animazione con simboli semplici.

Specificare l'intervallo di livelli di zoom

Se i dati soddisfano uno dei criteri seguenti, assicurarsi di specificare il livello di zoom minimo e massimo del livello in modo che il motore di rendering possa ignorarlo quando non rientra nell'intervallo di livelli di zoom.

• Se i dati provengono da un'origine di riquadri vettoriali, spesso i livelli di origine per tipi di dati diversi sono disponibili solo tramite un intervallo di livelli di zoom.
• Se si usa un livello riquadro che non include riquadri per tutti i livelli di zoom da 0 a 24 e si vuole che venga eseguito solo il rendering ai livelli in cui dispone di riquadri e non provare a riempire riquadri mancanti con riquadri di altri livelli di zoom.
• Se si vuole eseguire il rendering di un livello solo a determinati livelli di zoom. Tutti i livelli hanno un'opzione minZoom e maxZoom in cui viene eseguito il rendering del livello quando tra questi livelli di zoom in base a questa logica maxZoom > zoom >= minZoom.

Esempio

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

Specificare i limiti del livello riquadro e l'intervallo di zoom di origine

Per impostazione predefinita, i livelli riquadro caricano i riquadri in tutto il mondo. Tuttavia, se il servizio riquadri dispone solo di riquadri per un'area specifica, la mappa tenta di caricare i riquadri all'esterno di questa area. In questo caso, viene effettuata una richiesta per ogni riquadro e si attende una risposta che può bloccare altre richieste effettuate dalla mappa e quindi rallentare il rendering di altri livelli. Se si specificano i limiti di un livello riquadro, la mappa richiede solo riquadri che si trovano all'interno di tale rettangolo di selezione. Inoltre, se il livello riquadro è disponibile solo tra determinati livelli di zoom, specificare lo zoom minimo e massimo di origine per lo stesso motivo.

Esempio

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

Usa uno stile mappa vuoto quando la mappa di base non è visibile

Se un livello è sovrapposto alla mappa che copre completamente la mappa di base, è consigliabile impostare lo stile della mappa su blank o blank_accessible in modo che non venga eseguito il rendering della mappa di base. Uno scenario comune per eseguire questa operazione è quando si sovrappone un riquadro a globo completo in non ha opacità o un'area trasparente sopra la mappa di base.

Animare uniformemente i livelli di immagine o riquadro

Se vuoi animare attraverso una serie di livelli di immagine o riquadro sulla mappa. Spesso è più veloce creare un livello per ogni livello di immagine o riquadro e modificare l'opacità rispetto all'aggiornamento dell'origine di un singolo livello in ogni fotogramma di animazione. Nascondere un livello impostando l'opacità su zero e mostrando un nuovo livello impostandone l'opacità su un valore maggiore di zero è più veloce rispetto all'aggiornamento dell'origine nel livello. In alternativa, è possibile attivare o disattivare la visibilità dei livelli, ma assicurarsi di impostare la durata della dissolvenza del livello su zero, in caso contrario anima il livello durante la visualizzazione, che causa un effetto sfarfallio perché il livello precedente sarebbe stato nascosto prima che il nuovo livello sia visibile.

Modificare la logica di rilevamento delle collisioni del livello simbolo

Il livello simbolo include due opzioni disponibili sia per l'icona che per il testo denominato allowOverlap e ignorePlacement. Queste due opzioni specificano se l'icona o il testo di un simbolo possono sovrapporsi o sovrapporsi. Quando questi sono impostati su false, il livello simbolo esegue calcoli quando si esegue il rendering di ogni punto per verificare se è in collisione con qualsiasi altro simbolo già sottoposto a rendering nel livello e, in caso affermativo, non eseguire il rendering del simbolo di collisione. Ciò è utile per ridurre il disordine sulla mappa e ridurre il numero di oggetti di cui è stato eseguito il rendering. Impostando queste opzioni su false, questa logica di rilevamento collisioni viene ignorata e viene eseguito il rendering di tutti i simboli sulla mappa. Modificare questa opzione per ottenere la migliore combinazione di prestazioni e esperienza utente.

Set di dati di grandi dimensioni del cluster

Quando si utilizzano set di dati di grandi dimensioni, è possibile che quando viene eseguito il rendering a determinati livelli di zoom, molti dei punti si sovrappongono e sono visibili solo parzialmente, se presenti. Il clustering è un processo di raggruppamento dei punti che si avvicinano e li rappresentano come un singolo punto cluster. Man mano che l'utente esegue lo zoom sulla mappa, i cluster si separano nei singoli punti. Ciò può ridurre significativamente la quantità di dati di cui è necessario eseguire il rendering, rendere la mappa meno disordinata e migliorare le prestazioni. La DataSource classe include opzioni per il clustering dei dati in locale. Inoltre, molti strumenti che generano riquadri vettoriali hanno anche opzioni di clustering.

Aumentare inoltre le dimensioni del raggio del cluster per migliorare le prestazioni. Maggiore è il raggio del cluster, meno punti raggruppati è necessario tenere traccia e eseguire il rendering. Per altre informazioni, vedere Clustering point data in The Web SDK (Clustering point data in the Web SDK).

Usare mappe termiche raggruppate ponderate

Il livello mappa termica può eseguire facilmente il rendering di decine di migliaia di punti dati. Per set di dati di dimensioni maggiori, è consigliabile abilitare il clustering nell'origine dati e usare un raggio di cluster di piccole dimensioni e usare la proprietà cluster point_count come peso per la mappa di altezza. Quando la dimensione del raggio del cluster è di pochi pixel, c'è poca differenza visiva nella mappa termica sottoposta a rendering. L'uso di un raggio di cluster più ampio migliora le prestazioni, ma potrebbe ridurre la risoluzione della mappa termica sottoposta a rendering.

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

Per altre informazioni, vedere Clustering e il livello delle mappe termiche.

Mantenere le risorse immagine di piccole dimensioni

Le immagini possono essere aggiunte allo sprite dell'immagine di mappe per il rendering delle icone in un livello simbolo o modelli in un livello poligono. Mantenere queste immagini piccole per ridurre al minimo la quantità di dati che devono essere scaricati e la quantità di spazio che occupano nello sprite dell'immagine di mappe. Quando si usa un livello simbolo che ridimensiona l'icona usando l'opzione size , usare un'immagine che sia la dimensione massima del piano da visualizzare sulla mappa e non più grande. In questo modo, il rendering dell'icona viene eseguito con risoluzione elevata riducendo al minimo le risorse usate. Inoltre, i file SVG possono essere usati anche come formato di file più piccolo per immagini di icone semplici.

Ottimizzare le espressioni

Le espressioni di stile basate sui dati offrono flessibilità e potenza per filtrare e applicare stili ai dati sulla mappa. Esistono molti modi in cui è possibile ottimizzare le espressioni. Ecco alcuni suggerimenti.

Ridurre la complessità dei filtri

I filtri scorrere tutti i dati in un'origine dati e verificare se ogni filtro corrisponde alla logica nel filtro. Se i filtri diventano complessi, questo può causare problemi di prestazioni. Alcune possibili strategie per risolvere questo problema includono quanto segue.

• Se si usano riquadri vettoriali, suddividere i dati in livelli di origine diversi.
• Se si usa la DataSource classe , suddividere i dati in origini dati separate. Provare a bilanciare il numero di origini dati con la complessità del filtro. Troppe origini dati possono causare anche problemi di prestazioni, quindi potrebbe essere necessario eseguire alcuni test per scoprire cosa funziona meglio per lo scenario in uso.
• Quando si usa un filtro complesso su un livello, è consigliabile usare più livelli con espressioni di stile per ridurre la complessità del filtro. Evitare di creare un gruppo di livelli con stili hardcoded quando le espressioni di stile possono essere usate come un numero elevato di livelli può anche causare problemi di prestazioni.

Assicurarsi che le espressioni non generino errori

Le espressioni vengono spesso usate per generare codice per eseguire calcoli o operazioni logiche in fase di rendering. Proprio come il codice nel resto dell'applicazione, assicurarsi che i calcoli e il logico abbiano senso e non siano soggetti a errori. Gli errori nelle espressioni causano problemi durante la valutazione dell'espressione, che possono causare problemi di prestazioni e rendering ridotti.

Un errore comune da tenere presente è la presenza di un'espressione che si basa su una proprietà di funzionalità che potrebbe non esistere in tutte le funzionalità. Ad esempio, il codice seguente usa un'espressione per impostare la proprietà color di un livello a bolle sulla myColor proprietà di una funzionalità.

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

Il codice precedente funziona correttamente se tutte le funzionalità nell'origine dati hanno una myColor proprietà e il valore di tale proprietà è un colore. Questo potrebbe non essere un problema se si dispone di un controllo completo dei dati nell'origine dati e si conoscono per determinate funzionalità un colore valido in una myColor proprietà. Detto questo, per garantire la sicurezza di questo codice dagli errori, è possibile usare un'espressione case con l'espressione has per verificare che la funzionalità abbia la myColor proprietà . In caso affermativo, è possibile usare l'espressione to-color di tipo per provare a convertire il valore di tale proprietà in un colore. Se il colore non è valido, è possibile usare un colore di fallback. Il codice seguente illustra come eseguire questa operazione e imposta il colore di fallback su verde.

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

Ordinare espressioni booleane dalla più specifica alla meno specifica

Ridurre il numero totale di test condizionali necessari quando si usano espressioni booleane che contengono più test condizionali ordinandoli dalla maggior parte alla meno specifica.

Semplificare le espressioni

Le espressioni possono essere potenti e talvolta complesse. Più semplice è un'espressione, più veloce viene valutata. Ad esempio, se è necessario un confronto semplice, un'espressione come ['==', ['get', 'category'], 'restaurant'] sarebbe migliore rispetto all'uso di un'espressione di corrispondenza come ['match', ['get', 'category'], 'restaurant', true, false]. In questo caso, se la proprietà da controllare è un valore booleano, un'espressione get sarà ancora più semplice ['get','isRestaurant'].

Risoluzione dei problemi relativi all'SDK Web

Di seguito sono riportati alcuni suggerimenti per eseguire il debug di alcuni dei problemi comuni riscontrati durante lo sviluppo con Mappe di Azure Web SDK.

Perché la mappa non viene visualizzata quando si carica il controllo Web?

Elementi da controllare:

• Assicurarsi di completare le opzioni di autenticazione nella mappa. Senza autenticazione, la mappa carica un'area di disegno vuota e restituisce un errore 401 nella scheda di rete degli strumenti di sviluppo del browser.
• Assicurarsi di avere una connessione Internet.
• Controllare la presenza di errori degli strumenti di sviluppo del browser nella console. Alcuni errori potrebbero causare il rendering della mappa. Eseguire il debug dell'applicazione.
• Assicurarsi di usare un browser supportato.

Tutti i miei dati vengono visualizzati dall'altra parte del mondo, cosa sta succedendo?

Le coordinate, dette anche posizioni, negli SDK Mappe di Azure sono allineate al formato standard del settore geospaziale di [longitude, latitude]. Questo stesso formato è anche il modo in cui le coordinate vengono definite nello schema GeoJSON; i dati di base formattati all'interno degli SDK di Mappe di Azure. Se i dati vengono visualizzati sul lato opposto del mondo, è molto probabile che i valori di longitudine e latitudine vengano invertiti nelle informazioni sulla coordinata/posizione.

Perché i marcatori HTML vengono visualizzati nella posizione sbagliata nel controllo Web?

Elementi da controllare:

• Se si usa contenuto personalizzato per il marcatore, verificare che le anchor opzioni e pixelOffset siano corrette. Per impostazione predefinita, il centro inferiore del contenuto è allineato alla posizione sulla mappa.
• Assicurarsi che il file CSS per Mappe di Azure sia stato caricato.
• Esaminare l'elemento DOM del marcatore HTML per verificare se un CSS dell'app è stato aggiunto al marcatore e ne influisce sulla posizione.

Perché le icone o il testo nel livello simbolo vengono visualizzati nella posizione sbagliata?

Verificare che le anchor opzioni e offset siano configurate correttamente per allinearsi alla parte dell'immagine o del testo che si desidera allineare alla coordinata sulla mappa. Se il simbolo non è posizionato solo quando la mappa viene ruotata, selezionare l'opzione rotationAlignment . Per impostazione predefinita, i simboli ruotano con il riquadro di visualizzazione mappe, visualizzando verticalmente all'utente. Tuttavia, a seconda dello scenario, potrebbe essere preferibile bloccare il simbolo all'orientamento della mappa impostando l'opzione rotationAlignment su map.

Se il simbolo non è posizionato solo quando la mappa è inclinata o inclinata, selezionare l'opzione pitchAlignment . Per impostazione predefinita, i simboli rimangono in posizione verticale nel riquadro di visualizzazione mappe quando la mappa viene inclinazione o inclinata. Tuttavia, a seconda dello scenario, potrebbe essere preferibile bloccare il simbolo al passo della mappa impostando l'opzione pitchAlignment su map.

Perché nessuno dei miei dati viene visualizzato sulla mappa?

Elementi da controllare:

• Controllare la console negli strumenti di sviluppo del browser per verificare la presenza di errori.
• Assicurarsi che un'origine dati sia stata creata e aggiunta alla mappa e che l'origine dati sia stata connessa a un livello di rendering aggiunto anche alla mappa.
• Aggiungere punti di interruzione nel codice ed eseguirne il passaggio. Assicurarsi che i dati vengano aggiunti all'origine dati e all'origine dati e ai livelli vengano aggiunti alla mappa.
• Provare a rimuovere espressioni guidate dai dati dal livello di rendering. È possibile che uno di essi abbia un errore che causa il problema.

È possibile usare l'SDK Web Mappe di Azure in un iframe in modalità sandbox?

Sì.

Richiedere supporto

Di seguito sono riportati i diversi modi per ottenere supporto per Mappe di Azure a seconda del problema.

Ricerca per categorie segnalare un problema di dati o un problema relativo a un indirizzo?

Segnalare i problemi relativi all'uso del sito di feedback Mappe di Azure. Le istruzioni dettagliate sui problemi relativi ai dati di creazione di report sono disponibili nell'articolo Fornire commenti e suggerimenti sui dati per Mappe di Azure.

Nota

Ogni problema inviato genera un URL univoco per tenerlo traccia. I tempi di risoluzione variano a seconda del tipo di problema e del tempo necessario per verificare che la modifica sia corretta. Le modifiche verranno visualizzate nell'aggiornamento settimanale dei servizi di rendering, mentre altri servizi, ad esempio la geocodifica e il routing, vengono aggiornati mensilmente.

Ricerca per categorie segnalare un bug in un servizio o un'API?

Segnalare i problemi nella pagina Guida e supporto tecnico di Azure selezionando il pulsante Crea una richiesta di supporto.

Dove è possibile ottenere assistenza tecnica per Mappe di Azure?

• Per domande relative all'oggetto visivo di Power BI Mappe di Azure, contattare il supporto tecnico di Power BI.

• Per tutti gli altri servizi di Mappe di Azure, contattare supporto tecnico di Azure.

• Per domande o commenti su funzionalità di Mappe di Azure specifiche, usare i forum per sviluppatori Mappe di Azure.

Passaggi successivi

Per altri suggerimenti su come migliorare l'esperienza utente nell'applicazione, vedere gli articoli seguenti.

Rendere accessibile l'applicazione

Altre informazioni sulla terminologia usata da Mappe di Azure e dal settore geospaziale.

Mappe di Azure glossario