Procedure consigliate per Web SDK di Mappe di Azure

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

Web SDK di Mappe di Azure offre un canvas 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 altri. Questo articolo contiene le procedure consigliate, i suggerimenti e i consigli per ottimizzare le prestazioni e creare un'esperienza utente senza problemi.

In genere, quando si cerca di migliorare le prestazioni della mappa, è consigliabile cercare modi per ridurre il numero di livelli e origini nonché 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, consultare le procedure consigliate per l'autenticazione e l'autorizzazione.

Usare le versioni più recenti di Mappe di Azure

Gli SDK di Mappe di Azure vengono sottoposti a test di sicurezza regolari insieme a qualsiasi libreria di dipendenze esterna usata dagli SDK. Tutti i problemi di sicurezza noti vengono corretti in modo tempestivo e rilasciati in produzione. Se l'applicazione punta alla versione principale più recente della versione ospitata di Web SDK di Mappe di Azure, riceve automaticamente tutti gli aggiornamenti della versione secondaria che includono le correzioni correlate alla sicurezza.

Se si usa il self-hosting di Web SDK di Mappe di Azure tramite il modulo npm, assicurarsi di usare il simbolo dell'accento circonflesso (^) in combinazione con il numero di versione del pacchetto npm di Mappe di Azure nel file package.json 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 di Mappe di Azure. Per altre informazioni, vedere azure-maps-control nella documentazione su npm.

Ottimizzare il carico iniziale della mappa

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

Osservare l'evento ready delle mappe

Analogamente, quando la mappa viene caricata spesso all'inizio, è 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 sia pronta per l'interazione prima di provare a eseguire il rendering dei propri dati. È possibile attendere due eventi: un evento load e un evento ready. L'evento load viene attivato al termine del caricamento della visualizzazione della mappa iniziale e di ogni tessera. Se viene visualizzato un errore "Caricamento stile non completato", è consigliabile usare l'evento load e attendere il completamento del caricamento dello stile.

L'evento ready viene generato quando sono presenti le risorse minime della mappa 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 ready può spesso essere generato in metà tempo rispetto all'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 lazy di Web SDK di Mappe di Azure

Se la mappa non è necessaria immediatamente, eseguire il caricamento lazy di Web SDK di Mappe di Azure fino a quando è necessario. Questo ritarda il caricamento dei file JavaScript e CSS usati dal Web SDK di 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 durante il caricamento della pagina.

L'esempio di codice Caricamento lazy della mappa mostra come ritardare il caricamento del Web SDK di Mappe di Azure fino a quando non viene premuto un pulsante. Per il codice sorgente, vedere Codice sorgente del caricamento lazy della mappa.

Aggiungere un segnaposto per la mappa

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

Impostazione delle opzioni iniziali dello stile della mappa e della fotocamera per l'inizializzazione

Spesso le app vogliono caricare la mappa in una posizione o con uno stile specifico. In alcuni casi gli sviluppatori attendono il caricamento della mappa (o attendono l'evento ready ) e successivamente usano le funzioni setCamera o setStyle della mappa. Questo spesso richiede più tempo per arrivare alla visualizzazione iniziale desiderata della mappa perché molte risorse vengono caricate per impostazione predefinita prima del caricamento delle risorse necessarie per la visualizzazione desiderata della mappa. 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 classe DataSource gestisce i dati località non elaborati in formato GeoJSON in locale. È idonea per set di dati di piccole e medie dimensioni (oltre a centinaia di migliaia di funzionalità).
• Origine della tessera vettoriale: la classe VectorTileSource carica i dati formattati come tessere vettoriali per la visualizzazione della mappa corrente, in base al sistema di tessere delle mappe. Ideale per set di dati di grandi dimensioni (milioni o miliardi di funzionalità).

Usare soluzioni basate sulle tessere 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 tessere di immagini raster o vettoriali.
Le tessere vettoriali sono ottimizzati per caricare solo i dati che si trovano nella visualizzazione con le geometrie ritagliate nell'area di interesse della tessera e generalizzate in modo che corrispondano alla risoluzione della mappa per il livello di zoom del tessera.

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

È anche possibile creare un servizio personalizzato che esegue il rendering dei set di dati come tessere 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 relative all'uso di tessere 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 una tessera raster sono spesso maggiori di quelle una tessera vettoriale compressa che contiene geometrie ottimizzate per il livello di zoom e generalizzate.

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

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

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

È possibile combinare più set di dati in una singola origine di tessera vettoriale usando uno strumento come Tippecanoe. I set di dati possono essere combinati in una singola raccolta di funzionalità o in livelli separati all'interno della tessera vettoriale nota come livelli di origine. Quando si connette un'origine della tessere vettoriale 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 del canvas causati da aggiornamenti dei dati

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

• La funzione add delle origini dati può essere usata per aggiungere una o più funzionalità a un'origine dati. Ogni volta che questa funzione viene chiamata attiva un aggiornamento del canvas della mappa. Se si aggiungono molte funzionalità, combinarle in una matrice o in una raccolta di funzionalità e passarle in questa funzione una sola volta, anziché eseguire un ciclo su un set di dati e chiamare questa funzione per ogni funzionalità.
• La funzione setShapes delle origini dati può essere usata per sovrascrivere tutte le forme in un'origine dati. Dietro le quinte, combina insieme le funzioni clear e add delle origini dati ed esegue un singolo aggiornamento del canvas della 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 importDataFromUrl delle origini dati può essere usata per caricare un file GeoJSON tramite un URL in un'origine dati. Dopo aver scaricato i dati, questi vengono passati alla funzione add delle origini dati. Se il file GeoJSON è ospitato in un dominio diverso, assicurarsi che l'altro dominio supporti le richieste tra domini (CORS). Altrimenti copia dei dati in un file locale nel dominio o creare un servizio proxy con COR abilitato. Se il file è di grandi dimensioni, è consigliabile convertirlo in un'origine della tessera vettoriale.
• Se le funzionalità vengono incluse nella classe Shape, le funzioni addProperty, setCoordinates e setProperties della forma attivano tutte un aggiornamento nell'origine dati e un aggiornamento del canvas della mappa. Tutte le funzionalità restituite dalle funzioni getShapes e getShapeById delle origini dati vengono automaticamente incluse nella classe Shape. Se si vogliono aggiornare più forme, è più veloce convertirle in JSON usando la funzione toJson delle origini dati, modificando GeoJSON, quindi passando questi dati nella funzione setShapes delle origini dati.

Evitare di chiamare la funzione clear delle origini dati inutilmente

La chiamata alla funzione clear della classe DataSource causa un aggiornamento del canvas della mappa. Se la funzione clear viene chiamata più volte in una riga, può verificarsi un ritardo mentre la mappa attende il completamento di 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 anella funzione add o setShapes delle origini dati. Se questo è l'unico set di dati sulla mappa, la mappa è vuota durante il download dei nuovi dati.
• Scaricare i nuovi dati e quindi passarli nella funzione setShapes delle origini dati. 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 durante il rendering dei dati.
• Può talvolta semplificare o rimuovere le espressioni e i filtri basati sui dati, il che significa che è necessaria una minore elaborazione in fase di rendering.

Quando le funzionalità hanno numerose proprietà o contenuti, è molto più efficiente limitare gli elementi che vengono aggiunti all'origine dati solo agli elementi necessari per il rendering e avere un metodo o un servizio separato per il recupero delle altre proprietà o contenuti quando necessari. Ad esempio, se si dispone di una semplice mappa che mostra le località su una mappa quando selezionate, viene visualizzato un gruppo di contenuti dettagliati. Se si vuole usare lo stile basato sui dati per personalizzare la modalità di rendering delle località 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 gli altri contenuti. 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 località di piccole dimensioni, 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.

Di seguito è riportato 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 esegue un ciclo e il rendering di tutte le funzionalità nell'origine dati. Migliorare le prestazioni complessive separando i dati statici con una 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 tessere vettoriali con dati in tempo reale, un modo semplice per supportare gli aggiornamenti consiste nell'usare l'intestazione della risposta expires. Per impostazione predefinita, qualsiasi origine della tessera vettoriale o livello della tessera raster ricarica automaticamente le tessere quando la data expires. Il flusso del traffico e le tessere degli eventi imprevisti nella mappa usano questa funzionalità per garantire che nella mappa vengano visualizzati dati sul traffico in tempo reale aggiornati. Questa funzionalità può essere disabilitata impostando l'opzione del refreshExpiredTiles servizio delle mappe su false.

Modificare le opzioni di buffer e tolleranza nelle origini dati GeoJSON

La classe DataSource converte i dati di posizione non elaborati in tessere vettoriali locali per il rendering in tempo reale. Queste tessere vettoriali locali ritagliano i dati non elaborati ai limiti dell'area della tessera con un po' di buffer per garantire un rendering uniforme tra le tessere. Più piccola è l'opzione buffer, minore è il numero di dati sovrapposti che vengono archiviati nelle tessere vettoriali locali e migliori saranno le prestazioni, tuttavia, maggiore è la modifica degli artefatti di rendering che si verificano. Provare a modificare questa opzione per ottenere la giusta combinazione di prestazioni con artefatti di rendering minimi.

La classe DataSource include 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 giusta combinazione di risoluzione e prestazioni della geometria per il set di dati.

Impostare l'opzione di ingrandimento massimo delle origini dati GeoJSON

La classe DataSource converte i dati di posizione non elaborati in tessere vettoriali locali per il rendering in tempo reale. Per impostazione predefinita, esegue questa operazione fino al livello di zoom 18, a quel punto, quando viene eseguito lo zoom più vicino, campiona i dati delle tessere generati per il livello di zoom 18. Questo è adatto alla maggior parte dei set di dati che devono avere una risoluzione elevata quando si esegue l'ingrandimento 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 esempio 12 si riduce il calcolo della quantità, la generazione di tessere locali che si verifica e la memoria usata dall'origine dati e si 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 al 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 ruolo di lavoro separato. Esporre GeoJSON all'app usando invece un URL e l'origine dati carica una singola copia dei dati direttamente nel ruolo di lavoro 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, all'aumento delle prestazioni e all'esperienza utente complessiva.

Creare livelli una sola volta e riutilizzarli

Web SDK di 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, aggiornarli dati nell'origine dati o modificare le opzioni di stile in un livello. Questo è spesso più veloce rispetto alla rimozione e successivamente alla nuova creazione di livelli con ogni modifica.

Prendere in considerazione il livello bolla 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 da disegnare per WebGL, il motore di rendering è in grado di eseguirne il rendering più velocemente rispetto a 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 gli indicatori HTML e i popup con moderazione

A differenza della maggior parte dei livelli nel controllo Web di Mappe di Azure, dove per il rendering viene usato WebGL, gli indicatori HTML usano elementi DOM tradizionali. Di conseguenza, più si aggiungono indicatori HTML a una pagina, più elementi DOM saranno disponibili. Le prestazioni possono calare dopo aver aggiunto alcune centinaia di indicatori HTML o popup. Per set di dati più grandi, prendere in considerazione il clustering dei dati o l'uso di un livello simbolo o bolla.

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

Detto questo, se sulla mappa sono presenti solo alcuni punti di rendering, la semplicità degli indicatori HTML potrebbe essere preferibile. Inoltre, gli indicatori 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 per cui è possibile definire lo stile usando gli stili basati sui dati.

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

• Suddividere i dati in due origini dati in base al valore isHealthy e associare un livello bolla con un'opzione di colore hardcoded a ogni origine dati.
• Inserire tutti i dati in una singola origine dati e creare due livelli bolla con un'opzione di colore hardcoded e un filtro basato sulla proprietà isHealthy.
• Inserire tutti i dati in una singola origine dati, creare un singolo livello bolla con un'espressione di stile case per l'opzione colore in base alla proprietà isHealthy. Ecco un esempio di codice di dimostrazione.

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, nei livelli simboli è abilitato il rilevamento delle collisioni. Il rilevamento delle collisioni mira a garantire che i simboli non si sovrappongano. L'icona e le opzioni di testo di un livello simbolo hanno due opzioni:

• allowOverlap: specifica se il simbolo è visibile quando entra in collisione con altri simboli.
• ignorePlacement: specifica se agli altri simboli è consentito entrare in collisione con il simbolo.

Entrambe queste opzioni sono impostate su false 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 Semplice animazione del simbolo illustra un modo semplice per animare un livello simbolo. Per il codice sorgente di questo esempio, vedere Esempio di codice Semplice animazione del simbolo.

Specificare l'intervallo del livello di zoom

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

• Se i dati provengono da un'origine di tessere 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 tessera che non include tessere per tutti i livelli di zoom da 0 a 24 e si vuole eseguire il rendering solo ai livelli in cui ci sono tessere e non provare a inserire le tessere mancanti da 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 si trova tra questi livelli di zoom in base alla 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 tessera e l'intervallo di zoom di origine

Per impostazione predefinita, i livelli tessera caricano le tessere in tutto il mondo. Tuttavia, se il servizio tessere dispone solo di tessere per un'area specifica, la mappa tenta di caricare le tessere all'esterno di questa area. In questo caso, viene effettuata una richiesta per ogni tessera 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 tessera, la mappa richiede solo tessere che si trovano all'interno di tale rettangolo di selezione. Inoltre, se il livello tessera è disponibile solo tra determinati livelli di zoom, specificare lo zoom minimo e massimo dell'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
});

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

Se un livello è sovrapposto alla mappa e 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 tessera a del globo completo che non ha opacità o un'area trasparente sulla mappa di base.

Animare uniformemente i livelli di immagine o tessera

Se si desidera applicare l'animazione attraverso una serie di livelli di immagine o tessera sulla mappa, spesso è più veloce creare un livello per ogni livello di immagine o tessera e modificare l'opacità che aggiornare l'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 è un'operazione più veloce dell'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, altrimenti si anima il livello quando lo si visualizza, e questo causa un effetto di sfarfallio perché il livello precedente è nascosto prima che il nuovo livello diventi 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 essere sovrapposti. Se impostato su false, il livello simbolo esegue calcoli durante 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 esegue il rendering del simbolo in 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 delle collisioni viene ignorata e viene eseguito il rendering di tutti i simboli sulla mappa. Modificare questa opzione per ottenere la migliore combinazione di prestazioni ed esperienza utente.

Set di dati di punti 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 siano visibili solo in parte, se presenti. Il clustering è un processo di raggruppamento dei punti che sono vicini e li rappresentano come un singolo punto in cluster. Quando l'utente ingrandisce la mappa, i cluster si scompongono 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 classe DataSource include opzioni per il clustering dei dati in locale. Inoltre, molti strumenti che generano tessere vettoriali hanno anche opzioni di clustering.

Aumentare inoltre le dimensioni del raggio del cluster per migliorare le prestazioni. Maggiore è il raggio del cluster, minore è il numero di punti raggruppati di cui necessario tenere traccia ed eseguire il rendering. Per altre informazioni, vedere Dati del punto di clustering nell'SDK Web.

Usare mappe termiche raggruppate in cluster ponderate

Il livello mappa termica può eseguire facilmente il rendering di decine di migliaia di punti dati. Per i set di dati di dimensioni maggiori, è consigliabile abilitare il clustering nell'origine dati e usare un raggio di cluster di piccole dimensioni e la proprietà point_count dei cluster come peso per la mappa dell'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 del cluster più grande 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 livello di mappe termiche.

Mantenere le risorse immagine di piccole dimensioni

Le immagini possono essere aggiunte allo sprite dell'immagine delle mappe per il rendering delle icone in un livello simbolo o dei modelli in un livello poligono. Mantenere queste immagini piccole per ridurre al minimo la quantità di dati da scaricare e la quantità di spazio che occupano nello sprite dell'immagine delle mappe. Quando si usa un livello simbolo che ridimensiona l'icona usando l'opzione size, usare un'immagine che sia la dimensione massima che si prevede di visualizzare sulla mappa e non una dimensione 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

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

Ridurre la complessità dei filtri

I filtri eseguono un ciclo su tutti i dati in un'origine dati e verificano 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 tessere vettoriali, suddividere i dati in livelli origine diversi.
• Se si usa la classe DataSource, suddividere i dati in origini dati separate. Provare a bilanciare il numero di origini dati con la complessità del filtro. Un numero elevato di origini dati può 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. Anche se si evita di creare un gruppo di livelli con stili hardcoded quando le espressioni di stile possono essere usate come un numero elevato di livelli può causare problemi di prestazioni.

Assicurarsi che le espressioni non generino errori

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

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à del colore di un livello bolla sulla proprietà myColor 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 proprietà myColor e il valore di tale proprietà è un colore. Questo potrebbe non essere un problema se si ha un controllo completo dei dati nell'origine dati e si sa per certo che tutte le funzionalità hanno un colore valido in una proprietà myColor. Ciò premesso, per garantire che questo codice non contenga errori, è possibile usare un'espressione case con l'espressione has per verificare che la funzionalità abbia la proprietà myColor. se ce l'ha, è possibile utilizzare l'espressione di tipo to-color 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 le 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 ordinandole dalla più specifica alla meno specifica.

Semplificare le espressioni

Le espressioni possono essere potenti e talvolta complesse. Le espressioni meno complesse eseguono la valutazione più velocemente. Ad esempio, se è necessario un confronto semplice, un'espressione come ['==', ['get', 'category'], 'restaurant'] sarebbe più adatta 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 sarebbe ancora più semplice ['get','isRestaurant'].

Risoluzione dei problemi di Web SDK

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

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

Verifiche da eseguire:

• Assicurarsi di completare le opzioni di autenticazione nella mappa. Senza autenticazione, la mappa carica un canvas vuoto 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 problemi di rendering della mappa. Eseguire il debug dell'applicazione.
• Assicurarsi di usare un browser supportato.

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

Le coordinate, dette anche posizioni, negli SDK di 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 usati 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 siano stati invertiti nelle informazioni di posizione o nelle coordinate.

Perché gli indicatori HTML vengono visualizzati nella posizione sbagliata nel controllo Web?

Verifiche da eseguire:

• Se si usa contenuto personalizzato per l'indicatore, assicurarsi che le opzioni anchor 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 caricato.
• Esaminare l'elemento DOM dell'indicatore HTML per verificare se un CSS dell'app è stato aggiunto all'indicatore e influisce sulla posizione.

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

Verificare che le opzioni anchor 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 correttamente solo quando la mappa viene ruotata, controllare l'opzione rotationAlignment. Per impostazione predefinita, i simboli ruotano con il riquadro di visualizzazione delle mappe, essendo visualizzato in verticale rispetto 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 correttamente solo quando la mappa viene inclinata, controllare l'opzione pitchAlignment. Per impostazione predefinita, i simboli rimangono in posizione verticale nel riquadro di visualizzazione delle mappe quando la mappa viene inclinata. Tuttavia, a seconda dello scenario, potrebbe essere preferibile bloccare il simbolo sulla rotazione intorno all'asse x della mappa impostando l'opzione pitchAlignment su map.

Perché i dati non vengono visualizzati sulla mappa?

Verifiche da eseguire:

• Controllare la presenza di errori degli strumenti di sviluppo del browser nella console.
• Assicurarsi che un'origine dati sia stata creata e aggiunta alla mappa e che l'origine dati sia connessa a un livello di rendering aggiunto in precedenza alla mappa.
• Aggiungere punti di interruzione nel codice e passare dall'uno all'altro. Assicurarsi che i dati vengano aggiunti all'origine dati e che l'origine dati e i livelli vengano aggiunti alla mappa.
• Provare a rimuovere le espressioni guidate dai dati dal livello di rendering. È possibile che uno di essi contenga un errore che causa il problema.

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

Sì.

Ottenere supporto

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

Come segnalare un problema di dati o un problema relativo a un indirizzo?

Segnalare i problemi usando il sito di feedback di Mappe di Azure. Per istruzioni dettagliate sulla segnalazione dei problemi relativi ai dati, vedere Inviare commenti e suggerimenti sui dati a Mappe di Azure.

Nota

Ogni problema inviato genera un URL univoco per monitorarlo. 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.

Come segnalare un bug in un servizio o un'API?

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

Dove si ottiene assistenza tecnica per Mappe di Azure?

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

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

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

Passaggi successivi

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

Rendere l'applicazione accessibile

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

Glossario di Mappe di Azure