Condividi tramite

Esercitazione: Eseguire la migrazione di un'app Web da Bing Maps

  • Articolo

Le app Web che usano Bing Maps spesso usano Bing Maps V8 JavaScript SDK. Azure Maps Web SDK è l'SDK basato su Azure idoneo per la migrazione. Web SDK di Mappe di Azure consente di personalizzare le mappe interattive con contenuto e immagini personali per la visualizzazione in applicazioni Web o per dispositivi mobili. Questo controllo usa WebGL, consentendo di eseguire il rendering di set di dati di grandi dimensioni con prestazioni elevate. Sviluppare con questo SDK usando JavaScript o TypeScript. Questa esercitazione illustra come:

  • Caricare una mappa
  • Localizzare una mappa
  • Aggiungere puntine, polilinee e poligoni.
  • Visualizzare informazioni in un popup o in una casella informativa
  • Caricare e visualizzare dati KML e GeoJSON
  • Puntine cluster
  • Sovrapporre un livello tessera
  • Visualizzare i dati sul traffico
  • Aggiungere un overlay sul terreno

Se si sviluppa con un framework JavaScript, può risultare utile uno dei progetti open source seguenti:

Prerequisiti

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

Supporto delle funzionalità principali

La tabella seguente elenca le principali funzionalità dell'API di Bing Maps V8 JavaScript SDK e il supporto di un'API simile in Azure Maps Web SDK.

Funzionalità di Bing Maps Modulo di Bing Maps Supporto di Azure Maps Web SDK
Puntine ✓
Raggruppamento di puntine Microsoft.Maps.Clustering ✓ Raggruppamento di puntine
Polilinee e poligoni ✓
Overlay sul terreno ✓
Mappe termiche Microsoft.Maps.HeatMap ✓ Aggiungere una mappa termica
Livelli tessera ✓
Livello KLM Microsoft.Maps.GeoXml ✓ Modulo di IO spaziale
Livello contorno Microsoft.Maps.Contour ✓ Esempi di codice del livello di contorno
Livello contenitori per dati Microsoft.Maps.DataBinning ✓ Incluso nel modulo Origine dati a griglia di Mappe di Azure open source
Livello tessera animata ✓ Incluso nel modulo di animazione open source di Mappe di Azure
Strumenti di disegno Microsoft.Maps.DrawingTools ✓ Aggiungere strumenti di disegno
Servizio di geocodifica Microsoft.Maps.Search ✓ API Ricerca o REST SDK
Servizio Indicazioni Microsoft.Maps.Directions ✓ API Route
Servizio Matrice di distanze ✓ API Matrice di route
Servizio di dati spaziali Microsoft.Maps.SpatialDataService N/D
Immagini satellitari/aeree ✓ Scegliere uno stile mappa
Immagini di viste aeree N/D
Immagini di viste a livello strada N/D
Supporto di GeoJSON Microsoft.Maps.GeoJson ✓
Supporto di GeoXML Microsoft.Maps.GeoXml ✓ Modulo di IO spaziale
Supporto di Well-Known Text Microsoft.Maps.WellKnownText ✓ Modulo di IO spaziale
Piante dell'interno Microsoft.Maps.VenueMaps ✓ Creator
Flusso del traffico Microsoft.Maps.Traffic ✓ Controllo del traffico
Matematica spaziale Microsoft.Maps.SpatialMath ✓ esempi atlas.math o turf js
Stili di mappa personalizzati Parziale, Scegliere uno stile mappa

Mappe di Azure più moduli open source per Web SDK che ne estendono le funzionalità.

Differenze significative tra i Web SDK

Di seguito sono riportate alcune delle principali differenze tra Bing Maps SDK e Azure Maps Web SDK da tenere presenti:

  • Oltre a fornire un endpoint ospitato per l'accesso ad Azure Maps Web SDK, è disponibile un pacchetto npm per incorporare Web SDK nelle app, se si preferisce. Per altre informazioni, vedere Usare il controllo mappa di Mappe di Azure. Questo pacchetto include anche le definizioni TypeScript.
  • Bing Maps include due rami ospitati dell'SDK, Release e Experimental. Il ramo Experimental può ricevere più aggiornamenti al giorno quando viene implementato un nuovo sviluppo. Mappe di Azure ospita solo un ramo Release, mentre le funzionalità sperimentali vengono create come moduli personalizzati nel progetto di esempi di codice di Mappe di Azure open source. Bing Maps aveva anche un ramo bloccato che veniva aggiornato con una minore frequenza, riducendo in tal modo il rischio di modifiche di rilievo dovute a una versione. In Mappe di Azure è possibile usare il modulo npm e puntare a qualsiasi versione secondaria precedente.

Suggerimento

Mappe di Azure pubblica sia le versioni minimizzate che non minimizzate dell'SDK. È sufficiente rimuovere .min dai nomi file. La versione non minimizzata è utile per il debug di problemi, ma assicurarsi di usare quella minimizzata in produzione per sfruttare le dimensioni ridotte dei file.

  • Dopo aver creato un'istanza della classe Map in Mappe di Azure, il codice deve attendere l'attivazione dell'evento ready o load delle mappe prima di interagire con la mappa. Questi eventi assicurano che tutte le risorse delle mappe siano caricate e siano pronte per l'accesso.

  • Entrambe le piattaforme usano un sistema di tessere simile per le mappe di base, tuttavia le tessere in Bing Maps sono 256 pixel e sono 512 pixel in Mappe di Azure. Per ottenere la stessa visualizzazione mappa in Mappe di Azure come Bing Maps, sottrarre un livello di zoom in Mappe di Azure.

  • Le coordinate in Bing Maps sono identificate da latitude, longitude, mentre Mappe di Azure usa longitude, latitude. Questo formato è in linea con lo standard [x, y] seguito dalla maggior parte delle piattaforme GIS.

  • Le forme in Azure Maps Web SDK sono basate sullo schema GeoJSON. Le classi helper vengono esposte tramite lo spazio dei nomi atlas.data. È disponibile anche la classe atlas.Shape che è possibile usare per eseguire il wrapping di oggetti GeoJSON e semplificarne l'aggiornamento e la gestione grazie al binding dei dati.

  • Le coordinate in Mappe di Azure sono definite come oggetti Position che possono essere specificati come una semplice matrice di numeri nel formato [longitude, latitude] o new atlas.data.Position(longitude, latitude).

Suggerimento

La classe Position include una funzione helper statica per l'importazione di coordinate in formato latitude, longitude. La funzione atlas.data.Position.fromLatLng può spesso sostituire la funzione new Microsoft.Maps.Location nel codice di Bing Maps.

  • Anziché specificare le informazioni di stile per ogni forma aggiunta alla mappa, Mappe di Azure separa gli stili dai dati. I dati vengono archiviati in origini dati e vengono connessi a livelli di rendering usati da Mappe di Azure per il rendering dei dati. Questo approccio offre un vantaggio significativo in termini di prestazioni. Molti livelli supportano gli stili basati sui dati, eseguiti aggiungendo logica di business alle opzioni di stile del livello che modificano la modalità di rendering delle singole forme all'interno di un livello a seconda delle relative proprietà.
  • Mappe di Azure offre funzioni matematiche spaziali nello spazio dei nomi atlas.math differenti dalle funzioni matematiche spaziali di Bing Mappe. La differenza principale è che Mappe di Azure non fornisce funzioni predefinite per operazioni binarie come union e intersection. Mappe di Azure si basa tuttavia sullo standard GeoJSON aperto e sono disponibili librerie open source. Una delle opzioni più diffuse che funziona bene con Mappe di Azure e offre funzionalità matematiche spaziali è turf js.

Per altre informazioni sulla terminologia relativa a Mappe di Azure, vedere il glossario di Mappe di Azure.

Esempi affiancati di Web SDK

L'elenco seguente è una raccolta di esempi di codice per ogni piattaforma che illustra i casi d'uso comuni per facilitare la migrazione dell'applicazione Web da Bing Maps V8 JavaScript SDK ad Azure Maps Web SDK. Gli esempi di codice relativi alle applicazioni Web sono disponibili in JavaScript. Mappe di Azure fornisce anche le definizioni TypeScript in un modulo npm. Per altre informazioni sulle definizioni TypeScript, vedere Usare il controllo mappa di Mappe di Azure.

Argomenti

Caricare una mappa

Il caricamento di una mappa in entrambi gli SDK implica la stessa serie di passaggi;

  • Aggiungere un riferimento a Map SDK.
  • Aggiungere un tag div al corpo della pagina che funge da segnaposto per la mappa.
  • Creare una funzione JavaScript che viene chiamata dopo il caricamento della pagina.
  • Creare un'istanza della rispettiva classe Map.

Differenze principali

  • Bing Maps richiede che venga specificata una chiave di account nel riferimento allo script dell'API o come opzione di mappa. Le credenziali di autenticazione per Mappe di Azure vengono specificate come opzioni della classe di mappa come autenticazione con chiave condivisa o ID Microsoft Entra.
  • Bing Maps accetta una funzione di callback nel riferimento allo script dell'API, che viene usata per chiamare una funzione di inizializzazione per caricare la mappa. Con Mappe di Azure è necessario usare l'evento OnLoad della pagina.
  • Quando si usa un ID per fare riferimento all'elemento div in cui è eseguito il rendering della mappa, Bing Maps usa un selettore HTML (#myMap), mentre Mappe di Azure usa solo il valore ID (myMap).
  • Le coordinate in Mappe di Azure sono definite come oggetti Position che possono essere specificati come una semplice matrice di numeri nel formato [longitude, latitude].
  • Il livello di zoom in Mappe di Azure è inferiore di un livello rispetto all'esempio di Bing Maps, a causa della differenza tra le dimensioni del sistema di tessere tra le piattaforme.
  • Per impostazione predefinita, Mappe di Azure non aggiunge alcun controllo di spostamento all'area della mappa, ad esempio pulsanti di zoom e pulsanti di stile della mappa. Esistono tuttavia controlli per l'aggiunta della selezione dello stile della mappa, pulsanti di zoom, bussola o controllo rotazione e un controllo dell'inclinazione.
  • In Mappe di Azure viene aggiunto un gestore eventi per monitorare l'evento ready dell'istanza della mappa. Questo viene generato quando la mappa termina il caricamento del contesto WebGL e di tutte le risorse necessarie. Il codice post-caricamento può essere aggiunto in questo gestore eventi.

Gli esempi seguenti illustrano il caricamento di una mappa di base centrata su New York alle coordinate (longitudine: -73.985, latitudine: 40,747) e si trova al livello di zoom 12 in Bing Maps.

Prima: Bing Mappe

Il codice seguente è un esempio di come visualizzare una mappa di Bing Maps centrata e ingrandita su una posizione.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Se si esegue questo codice in un browser è visualizzata una mappa simile all'immagine seguente:

Mappa di Bing Maps

Dopo: Mappe di Azure

Il codice seguente illustra come caricare una mappa con la stessa visualizzazione in Mappe di Azure insieme a un controllo stile mappa e ai pulsanti di zoom.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom and map style controls to top right of map.
                map.controls.add([
                        new atlas.control.StyleControl(),
                        new atlas.control.ZoomControl()
                    ], {
                        position: 'top-right'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Se si esegue questo codice in un browser è visualizzata una mappa simile all'immagine seguente:

Screenshot che mostra una mappa di Mappe di Azure.

Per altre informazioni su come configurare e usare il controllo mappa di Mappe di Azure in un'app Web, vedere Usare il controllo mappa di Mappe di Azure.

Suggerimento

Mappe di Azure pubblica sia le versioni minimizzate che non minimizzate dell'SDK. Rimuovere .min dai nomi file. La versione non minimizzata è utile per il debug di problemi, ma assicurarsi di usare quella minimizzata in produzione per sfruttare le dimensioni ridotte dei file.

Altre risorse

  • Per altre informazioni sui controlli di spostamento di Mappe di Azure per la rotazione e l'inclinazione di una mappa, vedere Aggiungere controlli a una mappa.

Localizzare la mappa

Se i destinatari sono distribuiti in più paesi/aree geografiche o parlano lingue diverse, la localizzazione è importante.

Prima: Bing Mappe

Per localizzare Bing Maps, la lingua e l'area geografica vengono specificate con i parametri setLang e UR aggiunte al riferimento del tag <script> nell'API. Alcune funzionalità di Bing Maps sono disponibili solo in determinati mercati, di conseguenza il mercato dell'utente viene specificato con il parametro setMkt.

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>

Ecco un esempio di Bing Maps con la lingua impostata su fr-FR.

Mappa di Bing Maps localizzata

Dopo: Mappe di Azure

Mappe di Azure offre solo le opzioni per impostare la lingua e la visualizzazione locale della mappa. Non viene usato un parametro relativo al mercato per limitare le funzionalità. È possibile impostare la lingua e la visualizzane locale della mappa in due modi diversi. La prima opzione consiste nell'aggiungere queste informazioni allo spazio dei nomi atlas globale, per cui tutte le istanze dei controlli mappa dell'app usano queste impostazioni per impostazione predefinita. Il codice seguente imposta la lingua su francese (fr-FR) e la visualizzazione locale su "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

La seconda opzione consiste nel passare queste informazioni nelle opzioni della mappa durante il caricamento la mappa, ad esempio:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Nota

Mappe di Azure è in grado di caricare più istanze della mappa nella stessa pagina con impostazioni differenti per lingua e area geografica. È anche possibile aggiornare queste impostazioni nella mappa dopo che è stata caricata. Per un elenco delle lingue supportate in Mappe di Azure, vedere Supporto per la localizzazione in Mappe di Azure.

Di seguito è riportato un esempio di Mappe di Azure con la lingua impostata su "fr" e l'area utente impostata su fr-FR.

Mappa di Mappe di Azure localizzata

Impostare la visualizzazione mappa

Le mappe dinamiche in Mappe di Azure e Bing Maps possono essere spostate a livello di codice in nuove aree geografiche chiamando le funzioni appropriate in JavaScript. L'esempio seguente illustra una mappa che visualizza immagini aeree satellitari, centrate su una posizione con coordinate (longitudine: -111.0225, latitudine: 35.0272) e modificare il livello di zoom su 15 in Bing Maps.

Nota

Bing Maps usa tessere con dimensioni di 256 pixel, mentre Mappe di Azure usa tessere più grandi, da 512 pixel. In questo modo si riduce il numero di richieste di rete necessarie a Mappe di Azure per caricare la stessa area mappa di Bing Maps. Tuttavia, a causa del funzionamento delle piramidi di tessere nei controlli mappa, per ottenere la stessa area visualizzabile come mappa di Bing Maps con le tessere più grandi di Mappe di Azure è necessario sottrarre 1 dal livello di zoom di Bing Maps quando si usa Mappe di Azure.

Prima: Bing Mappe

Il controllo mappa di Bing Maps può essere spostato a livello di codice usando la funzione setView, che consente di specificare il centro della mappa e un livello di zoom.

map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.0272, -111.0225),
    zoom: 15
});

Impostazione della visualizzazione mappa in Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure la posizione della mappa può essere cambiata a livello di codice usando la funzione setCamera della mappa e lo stile della mappa può essere cambiato usando la funzione setStyle. Le coordinate in Mappe di Azure sono espresse nel formato "longitudine, latitudine" e il valore del livello di zoom è inferiore di 1.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite_road_labels'
});

Screenshot che mostra una mappa di Mappe di Azure usando lo stile delle etichette stradali satellite.

Altre risorse

Aggiungere una puntina

In Mappe di Azure è possibile eseguire il rendering dei dati dei punti sulla mappa in differenti modi;

  • Indicatori HTML: il rendering dei punti viene eseguito usando elementi DOM tradizionali. Gli indicatori HTML supportano il trascinamento.
  • Livello simbolo: il rendering dei punti viene eseguito con un'icona e/o un testo all'interno del contesto WebGL.
  • Livello bolla: il rendering dei punti viene eseguito come cerchi sulla mappa. I raggi dei cerchi possono essere ridimensionati in base alle proprietà nei dati.

Il rendering dei livelli simbolo e bolla viene eseguito nel contesto WebGL. Questi livelli possono eseguire il rendering di set di punti grandi sulla mappa. e richiedono che i dati siano archiviati in un'origine dati. È necessario aggiungere le origini dati e i livelli di rendering alla mappa dopo che è stato attivato l'evento ready. Il rendering dei marcatori HTML viene eseguito come elementi DOM all'interno della pagina, senza l'uso di un'origine dati. Maggiore è il numero di elementi DOM della pagina, più lenta sarà la pagina. Se si esegue il rendering di più di qualche centinaio di punti su una mappa, provare a usare uno dei livelli di rendering.

Gli esempi seguenti aggiungono un marcatore alla mappa in corrispondenza (longitudine: -0,2, latitudine: 51,5) con il numero 10 sovrapposto come etichetta.

Prima: Bing Mappe

Con Bing Maps, i marcatori vengono aggiunti alla mappa usando la classe Microsoft.Maps.Pushpin*. Le puntine vengono quindi aggiunte alla mappa usando una di due funzioni.

La prima funzione consiste nel creare un livello, inserire la puntina e quindi aggiungere il livello alla proprietà layers della mappa.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

La seconda consiste nell'aggiungere la puntina usando la proprietà entities della mappa. Questa funzione è contrassegnata come deprecata nella documentazione di Bing Maps V8, ma rimane parzialmente funzionante per gli scenari di base.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

map.entities.add(pushpin);

Aggiunta di puntine in Bing Maps

Dopo: Mappe di Azure con indicatori HTML

In Mappe di Azure i marcatori HTML possono essere usati per visualizzare facilmente un punto sulla mappa e sono consigliati per le app semplici che devono visualizzare solo alcuni punti. Per usare un marcatore HTML, creare un'istanza della classe atlas.HtmlMarker, impostare le opzioni relative al testo e alla posizione, quindi aggiungere il marcatore alla mappa con la funzione map.markers.add.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Screenshot che mostra una mappa di Mappe di Azure con una puntina blu con il numero 10.

Dopo: Mappe di Azure con un livello Simbolo

Quando si usa un livello simbolo, è necessario aggiungere i dati a un'origine dati e collegare l'origine dati al livello. È anche necessario aggiungere l'origine dati e il livello alla mappa dopo che è stato attivato l'evento ready. Per eseguire il rendering di un valore di testo univoco sopra un simbolo, è necessario archiviare le informazioni di testo come proprietà del punto dati e fare riferimento a tale proprietà nell'opzione textField del livello. Questa procedura è più complessa rispetto all'uso degli indicatori HTML, ma offre vantaggi in termini di prestazioni.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Screenshot che mostra una mappa di Mappe di Azure con una puntina blu con il numero 10.

Altre risorse

Aggiungere una puntina personalizzata

È possibile usare immagini personalizzate per rappresentare i punti su una mappa. L'immagine seguente viene usata negli esempi seguenti e usa un'immagine personalizzata per visualizzare un punto sulla mappa a (latitudine: 51,5, longitudine: -0,2) e sfalsa la posizione del marcatore in modo che il punto dell'icona della puntina da disegno sia allineato alla posizione corretta sulla mappa.

Aggiunta di puntine in Mappe di Azure.
yellow-pushpin.png

Prima: Bing Mappe

In Bing Maps viene creato un marcatore personalizzato passando un URL a un'immagine nelle opzioni icon di una puntina da disegno. L'opzione anchor si usa per allineare il punto dell'immagine della puntina con la coordinata sulla mappa. Il valore di ancoraggio in Bing Maps è relativo all'angolo in alto a sinistra dell'immagine.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    icon: 'ylw-pushpin.png',
    anchor: new Microsoft.Maps.Point(5, 30)
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Aggiunta di una puntina personalizzata in Bing Maps

Dopo: Mappe di Azure con indicatori HTML

Per personalizzare un indicatore HTML in Mappe di Azure, è possibile passare un elemento HTML string o HTMLElement nell'opzione htmlContent dell'indicatore. In Mappe di Azure viene usata un'opzione anchor per specificare la posizione relativa dell'indicatore rispetto alla coordinata della posizione usando uno dei nove punti di riferimento definiti: "Al centro", "In alto", "In basso", "A sinistra", "A destra", "In alto a sinistra", "In alto a destra", "In basso a sinistra", "In basso a destra". Il contenuto è ancorato e centrato in corrispondenza del "fondo" per impostazione predefinita. Per semplificare la migrazione del codice da Bing Maps, impostare l'ancoraggio su "in alto a sinistra" e quindi usare l'opzione offset con lo stesso offset usato in Bing Maps. Gli offset in Mappe di Azure sono spostati nella direzione opposta di Bing Maps ed è quindi necessario moltiplicare i valori per -1.

Suggerimento

Aggiungere pointer-events:none come stile nel contenuto HTML per disabilitare il comportamento di trascinamento predefinito in Microsoft Edge che comporta la visualizzazione di un'icona indesiderata.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Screenshot che mostra una mappa di Mappe di Azure di Londra con una puntina gialla.

Dopo: Mappe di Azure con un livello Simbolo

I livelli simbolo in Mappe di Azure supportano anche le immagini personalizzate, ma è prima necessario caricare l'immagine nelle risorse della mappa e assegnarle un ID univoco. Il livello simbolo può quindi fare riferimento a questo ID. È possibile scostare il simbolo affinché sia allineato al punto corretto sull'immagine usando l'opzione offset dell'icona. In Mappe di Azure viene usata un'opzione anchor per specificare la posizione relativa del simbolo rispetto alla coordinata della posizione usando uno dei nove punti di riferimento definiti: "Al centro", "In alto", "In basso", "A sinistra", "A destra", "In alto a sinistra", "In alto a destra", "In basso a sinistra", "In basso a destra". Il contenuto viene ancorato e impostato su "in basso" per impostazione predefinita, che corrisponde alla parte centrale inferiore del contenuto HTML. Per semplificare la migrazione del codice da Bing Maps, impostare l'ancoraggio su "in alto a sinistra" e quindi usare l'opzione offset con lo stesso offset usato in Bing Maps. Gli offset in Mappe di Azure sono spostati nella direzione opposta di Bing Maps ed è quindi necessario moltiplicare i valori per -1.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'ylw-pushpin.png').then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Aggiunta del livello di simboli personalizzato in Bing Maps

Suggerimento

Per creare un rendering dei punti personalizzato e avanzato, usare più livelli di rendering contemporaneamente. Se ad esempio si desidera visualizzare più puntine da disegno con la stessa icona su cerchi colorati diversi, anziché creare più immagini per ogni colore è possibile sovrapporre un livello simbolo su un livello bolla e impostare i livelli affinché facciano riferimento alla stessa origine dati. Questa procedura risulta molto più efficiente rispetto a creare e gestire numerose immagini diverse.

Altre risorse

Aggiungere una polilinea

Le polilinee vengono usate per rappresentare una linea o un percorso sulla mappa. Nell'esempio seguente viene illustrata la creazione di una polilinea tratteggiata sulla mappa.

Prima: Bing Mappe

In Bing Maps la classe Polyline accetta una matrice di posizioni e un set di opzioni.

//Get the center of the map.
var center = map.getCenter();

//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
    ], {
        strokeColor: 'red',
        strokeThickness: 4,
        strokeDashArray: [3, 3]
    });

//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);

Polilinea di Bing Azure

Dopo: Mappe di Azure

In Mappe di Azure le polilinee fanno riferimento agli oggetti LineString o MultiLineString dei termini geospaziali più comuni. È possibile aggiungere questi oggetti a un'origine dati ed eseguirne il rendering usando un livello linea. Le opzioni relative al colore del tratto, allo spessore e alla array di trattini sono quasi identiche tra le due piattaforme.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Screenshot che mostra una mappa di Mappe di Azure con una linea rossa.

Altre risorse

Aggiunta di un poligono

I poligoni vengono usati per rappresentare un'area sulla mappa. Mappe di Azure e Bing Maps offrono un supporto simile per i poligoni. L'esempio seguente illustra come creare un poligono che formi un triangolo basato sulla coordinata centrale della mappa.

Prima: Bing Mappe

In Bing Maps la classe Polygon accetta una matrice di coordinate o anelli di coordinate e un set di opzioni.

//Get the center of the map.
var center = map.getCenter();

//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
        center
    ], {
        fillColor: 'rgba(0, 255, 0, 0.5)',
        strokeColor: 'red',
        strokeThickness: 2
    });

//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);

Poligono di Bing Azure

Dopo: Mappe di Azure

In Mappe di Azure è possibile aggiungere gli oggetti Polygon e MultiPolygon a un'origine dati ed eseguirne il rendering sulla mappa usando i livelli. È possibile eseguire il rendering dell'area di un poligono in un livello poligono. È possibile eseguire il rendering del contorno di un poligono in un livello linea.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Screenshot che mostra una mappa di Mappe di Azure con un triangolo rosso pieno di verde semitrasparente.

Altre risorse

Visualizzare una casella informativa

È possibile visualizzare altre informazioni per un'entità sulla mappa come classe Microsoft.Maps.Infobox in Bing Maps e con la classe atlas.Popup in Mappe di Azure. L'esempio seguente aggiunge una puntina/marcatore alla mappa che, se selezionata, visualizza un infobox/popup.

Prima: Bing Mappe

In Bing Maps la casella informativa viene creata usando il costruttore Microsoft.Maps.Infobox.

//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));

//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
    description: '<div style="padding:5px"><b>Hello World!</b></div>',
    visible: false
});
infobox.setMap(map);

//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
    infobox.setOptions({ visible: true });
});

Casella informativa di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure è possibile usare un popup per visualizzare altre informazioni per una posizione. passando un oggetto string o HTMLElement HTML nell'opzione content della finestra popup. Le finestre popup possono essere visualizzate indipendentemente da qualsiasi forma e richiedono quindi che venga specificato un valore position. Per visualizzare un popup, chiamare la funzione open e passarla nella mappa in cui il popup dovrà essere visualizzato.

//Add a marker to the map that to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:10px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Screenshot che mostra una mappa di Mappe di Azure con un pin blu e un popup che dice hello world.

Nota

Per eseguire la stessa operazione con un livello di simboli, bolle, linee o poligoni, passare il livello nel codice dell'evento maps invece di un marcatore.

Altre risorse

Raggruppamento di puntine

Quando si visualizzano molti punti dati sulla mappa, i punti si sovrappongono, la mappa ha un aspetto disordinato e diventa difficile da visualizzare e usare. Il clustering dei dati dei punti consente di migliorare l'esperienza utente e ottimizzare le prestazioni. Il clustering dei dati dei punti è la combinazione di dati dei punti vicini tra loro e rappresentati sulla mappa come singolo punto dati in cluster. Quando l'utente ingrandisce la mappa, i cluster si scompongono nei singoli punti dati.

L'esempio seguente carica un feed GeoJSON dei dati sismici della settimana precedente e lo aggiungono alla mappa. I cluster vengono rappresentati come cerchi ridimensionati e colorati a seconda del numero di punti in essi contenuti.

Nota

Sono disponibili numerosi algoritmi diversi per il raggruppamento delle puntine. Bing Maps usa una semplice funzione basata su griglia, mentre Mappe di Azure usa un metodo di raggruppamento basato su punti, più avanzato e visivamente accattivante.

Prima: Bing Mappe

In Bing Maps i dati GeoJSON possono essere caricati usando il modulo GeoJSON. Le puntine sono raggruppate caricando l'apposito modulo e usando il livello che contiene.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2
            });

            //Load the GeoJSON and Clustering modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {

                    //Create a ClusterLayer with options and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                        clusteredPinCallback: createCustomClusteredPin,
                        gridSize: 100
                    });

                    map.layers.insert(clusterLayer);
                });
            });
        }

        //A function that defines how clustered pins are rendered.
        function createCustomClusteredPin(cluster) {
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;

            var radius = 20;    //Default radius to 20 pixels.
            var fillColor = 'lime'; 	//Default to lime green.

            if (clusterSize >= 750) {
                radius = 40;   //If point_count >= 750, radius is 40 pixels.
                fillColor = 'red';    //If the point_count >= 750, color is red.
            } else if (clusterSize >= 100) {
                radius = 30;    //If point_count >= 100, radius is 30 pixels.
                fillColor = 'yellow';    //If the point_count >= 100, color is yellow.
            }

            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
                '</svg>'];

            //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Raggruppamento di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure i dati vengono aggiunti e gestiti da un'origine dati. I livelli si connettono alle origini dati ed eseguono il rendering dei dati in essi contenuti. La classe DataSource in Mappe di Azure fornisce numerose opzioni di clustering.

  • cluster: indica all'origine dati di raggruppare i dati dei punti.
  • clusterRadius: raggio in pixel in base a cui raggruppare i punti.
  • clusterMaxZoom: livello massimo di zoom in cui si verifica il raggruppamento. Qualsiasi altro risultato dello zoom comporta il rendering di tutti i punti come simboli.
  • clusterProperties: definisce le proprietà personalizzate che vengono calcolate usando le espressioni in tutti i punti all'interno di ogni cluster e aggiunte alle proprietà di ogni punto del cluster.

Quando il clustering è abilitato, l'origine dati invia i punti dati in cluster e non in cluster ai livelli per il rendering. L'origine dati è in grado di raggruppare centinaia di migliaia di punti dati. Un punto dati in cluster presenta le proprietà seguenti:

Nome proprietà Type Descrizione
cluster boolean Indica se la funzionalità rappresenta un cluster.
cluster_id string È possibile usare un ID unico per il raggruppamento con le classi DataSource getClusterExpansionZoom, getClusterChildren e le funzioni getClusterLeaves.
point_count number Numero di punti contenuti nel cluster.
point_count_abbreviated string Stringa che abbrevia il valore point_count se necessario. Ad esempio, 4.000 diventa 4K.

La classe DataSource dispone della funzione helper seguente per accedere a informazioni aggiuntive su un cluster tramite cluster_id.

Funzione Tipo restituito Descrizione
getClusterChildren(clusterId: number) Promise<Feature<Geometry, any> | Shape> Recupera gli elementi figlio del cluster specificato al livello di zoom successivo. Questi elementi figlio possono essere costituiti da una combinazione di forme e sotto-raggruppamenti. I sottoraggruppamenti sono funzionalità con proprietà che corrispondono alle proprietà del raggruppamento.
getClusterExpansionZoom(clusterId: number) Promise<number> Calcola un livello di zoom in corrispondenza del quale il raggruppamento inizia a espandersi o a scomporsi.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Feature<Geometry, any> | Shape> Recupera tutti i punti in un cluster. Impostare limit per restituire un sottoinsieme di punti e usare offset per spostarsi attraverso i punti.

Quando si esegue il rendering dei dati in cluster sulla mappa, è in genere più facile usare due o più livelli. L'esempio seguente usa tre livelli, un livello bolla per disegnare i cerchi colorati dimensionati in base alle dimensioni dei cluster, un livello simbolo per il rendering delle dimensioni del cluster come testo e un secondo livello simbolo per il rendering dei punti non in cluster. Per altre informazioni sul rendering dei dati in cluster in Mappe di Azure, vedere Clustering di punti dati in Web SDK.

I dati GeoJSON possono essere importati direttamente in Mappe di Azure usando la funzione importDataFromUrl sulla classe DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points inthe cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points that have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Screenshot che mostra una mappa di Mappe di Azure con bolle di colore e dimensioni differenti.

Altre risorse

Aggiungere una mappa termica

Le mappe termiche, note anche come mappe di densità dei punti, sono un tipo di visualizzazione dei dati utilizzate per rappresentare la densità dei dati tramite una gamma di colori. Vengono spesso usate per visualizzare le "aree sensibili" dei dati su una mappa e sono un ottimo modo per eseguire il rendering di set di dati di punti di grandi dimensioni.

Nell'esempio seguente viene caricato un feed GeoJSON di tutti i terremoti dell'ultimo mese dagli USGS, di cui è stato eseguito il rendering come mappa termica.

Prima: Bing Mappe

Per creare una mappa termica in Bing Maps, caricare l'apposito modulo. Allo stesso modo, viene caricato il modulo GeoJSON per aggiungere il supporto di dati GeoJSON.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });

            //Load the GeoJSON and HeatMap modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {

                    //Create a heat map and add it to the map.
                    var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
                        opacity: 0.65,
                        radius: 10
                    });
                    map.layers.insert(heatMap);
                });
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Mappa termica di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure caricare i dati GeoJSON in un'origine dati e connettere l'origine dati a un livello mappa termica. I dati GeoJSON possono essere importati direttamente in Mappe di Azure usando la funzione importDataFromUrl sulla classe DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite_road_labels',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Mappa termica di Mappe di Azure

Altre risorse

Sovrapporre un livello tessera

consentono di sovrapporre immagini di grandi dimensioni che sono state scomposte in immagini a tessere più piccole allineate al sistema a tessere delle mappe. Si tratta di una soluzione comune per sovrapporre immagini di grandi dimensioni o set di dati grandi.

L'esempio seguente mostra la sovrapposizione di un livello di tessere di radar meteo dall'Iowa Environmental Mesonet dell'Iowa State University, che usa lo schema di denominazione X, Y, Zoom.

Prima: Bing Mappe

In Bing Maps è possibile creare livelli di tessere usando la classe Microsoft.Maps.TileLayer.

var weatherTileLayer = new Microsoft.Maps.TileLayer({
    mercator: new Microsoft.Maps.TileSource({
        uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
    })
});
map.layers.insert(weatherTileLayer);

Mappa termica ponderato di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure è possibile aggiungere un livello tessera alla mappa con la stessa procedura usata per qualsiasi altro livello. Viene usato un URL formattato con i segnaposto x, y e zoom. {x}, {y}, {z} indicano al livello dove accedere alle tessere. I livelli tessera di Mappe di Azure supportano anche i segnaposto {quadkey}, {bbox-epsg-3857} e {subdomain}.

Suggerimento

In Mappe di Azure è possibile eseguire il rendering dei livelli sotto altri livelli, inclusi i livelli mappa di base. Spesso è consigliabile eseguire il rendering dei livelli tessera sotto le etichette della mappa in modo che siano facili da leggere. La funzione map.layers.add accetta un secondo parametro che corrisponde all'ID del secondo livello sotto il quale inserire il nuovo livello. Per inserire un livello di tessere sotto le etichette della mappa, è possibile usare il codice seguente:

map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Mappa termica ponderata di Mappe di Azure

Suggerimento

È possibile acquisire le richieste delle tessere tramite l'opzione transformRequest della mappa. Questo consentirà di modificare o aggiungere intestazioni alla richiesta, se necessario.

Altre risorse

Visualizzare i dati sul traffico

I dati sul traffico possono essere sovrapposti sia nelle mappe di Bing che in quelle di Azure.

Prima: Bing Mappe

In Bing Maps i dati sul traffico possono essere sovrapposti alla mappa usando il modulo corrispondente.

Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
    var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
    manager.show();
});

Traffico in Bing Maps

Dopo: Mappe di Azure

Mappe di Azure offre numerose opzioni per la visualizzazione del traffico. Gli eventi del traffico, come strade chiuse e incidenti stradali, possono essere visualizzati come icone sulla mappa. Il flusso del traffico e le strade con codifica a colori possono essere sovrapposti sulla mappa e i colori possono essere modificati in base al limite di velocità previsto, al normale ritardo previsto o al ritardo assoluto. In Mappe di Azure i dati sugli incidenti vengono aggiornati ogni minuti e i dati sul flusso ogni due minuti.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Traffico in Mappe di Azure

Se si seleziona una delle icone del traffico in Mappe di Azure, vengono visualizzate altre informazioni in un popup.

Popup sul traffico di Mappe di Azure

Altre risorse

Aggiungere un overlay sul terreno

Sia Mappe di Azure che Bing Maps supportano la sovrapposizione di immagini con riferimenti geografici sulla mappa, per consentirne lo spostamento e il dimensionamento durante le operazioni di panoramica e zoom sulla mappa. In Bing Maps sono note come overlay sul terreno mentre in Mappe di Azure sono definite livelli immagine. I livelli Immagine sono un'ottima soluzione per la creazione di planimetrie, la sovrapposizione di vecchie mappe o delle immagini da un drone.

Prima: Bing Mappe

Per creare una sovrimpressione a terra in Bing Maps, è necessario specificare l'URL dell'immagine di sovrapposizione e un rettangolo di selezione che associa l'immagine alla mappa. Questo esempio mostra la sovrapposizione di un'immagine mappa di Newark New Jersey del 1922 sulla mappa.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.740, -74.18),
                zoom: 12
            });

            var overlay = new Microsoft.Maps.GroundOverlay({
                //Create a LocationRect from the edges of the bounding box; north, west, south, east.
                bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
                imageUrl: 'newark_nj_1922.jpg'
            });
            map.layers.insert(overlay);
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Se si esegue questo codice in un browser è visualizzata una mappa simile all'immagine seguente:

Overlay sul terreno di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure è possibile sovrapporre le immagini con riferimenti geografici usando la classe atlas.layer.ImageLayer. Questa classe richiede l'URL di un'immagine e un set di coordinate per i quattro angoli dell'immagine. L'immagine deve essere ospitata nello stesso dominio oppure è necessario avere abilitato i criteri di condivisione tra le origini (CORS).

Suggerimento

Se per ogni angolo dell'immagine sono disponibili solo le informazioni relative a nord, sud, est, ovest e rotazione invece delle coordinate, è possibile usare la funzione statica atlas.layer.ImageLayer.getCoordinatesFromEdges.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Screenshot che mostra Mappe di Azure con un'immagine sovrapposta rispetto a essa.

Altre risorse

Aggiungere dati KML alla mappa

Sia Mappe di Azure che Bing Maps consentono di importare e visualizzare dati KML, KMZ, GeoRSS, GeoJSON e Well-Known Text (WKT) sulla mappa. Mappe di Azure supporta anche GPX, GML, file CSV spaziali, Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS) e Web Feature Services (WFS).

Prima: Bing Mappe

Se si esegue questo codice in un browser è visualizzata una mappa simile all'immagine seguente:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
                
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                var callback = function (dataset) {
                    if (dataset.shapes) {
                        var l = new Microsoft.Maps.Layer();
                        l.add(dataset.shapes);
                        map.layers.insert(l);
                    }
                    if (dataset.layers) {
                        for (var i = 0, len = dataset.layers.length; i < len; i++) {
                            map.layers.insert(dataset.layers[i]);
                        }
                    }
                };
                Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
            });                
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

KML di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure, GeoJSON è il formato dati principale usato nel Web SDK, altri formati di dati spaziali possono essere facilmente integrati usando il ​​modulo di IO spaziale. Questo modulo include funzioni sia per la lettura che per la scrittura di dati spaziali, oltre a un semplice livello dati che consente di eseguire facilmente il rendering dei dati da uno di questi formati di dati spaziali. Per leggere i dati in un file di dati spaziali, passare un URL o dati non elaborati come stringa o BLOB nella funzione atlas.io.read. Vengono restituiti tutti i dati analizzati dal file che è possibile aggiungere alla mappa. Il formato KML è un po' più complesso rispetto alla maggior parte dei dati spaziali, perché include molte più informazioni sullo stile. La classe SpatialDataLayer supporta il rendering della maggior parte di questi stili, tuttavia le immagini delle icone devono essere caricate nella mappa prima di caricare i dati delle funzionalità e le sovrapposizioni di base devono essere aggiunte come livelli alla mappa separatamente. Quando si caricano i dati tramite un URL, questo deve essere ospitato in un endpoint abilitato per CORs o è necessario passare un servizio proxy come opzione nella funzione read.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
            
                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('myKMLFile.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parrallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Screenshot che mostra la visualizzazione mappe di Azure di Chicago con linee colorate differenti per le linee ferroviarie che escono dal porto.

Altre risorse

Aggiungere strumenti di disegno

Sia Bing Maps che Mappe di Azure includono un modulo che consente di disegnare e modificare forme sulla mappa tramite il mouse o un altri dispositivi di input. Entrambe le piattaforme supportano il disegno di puntine, linee e poligoni. Mappe di Azure offre anche opzioni per il disegno di cerchi e rettangoli.

Prima: Bing Mappe

In Bing Maps il modulo DrawingTools viene caricato usando la funzione Microsoft.Maps.loadModule. Una volta caricato, è possibile creare un'istanza della classe DrawingTools e chiamare la funzione showDrawingManager per aggiungere una barra degli strumenti alla mappa.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
    var map, drawingManager;

    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '<Your Bing Maps Key>'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editting on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
            });
        });
    }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Strumenti di disegno di Bing Maps

Dopo: Mappe di Azure

In Mappe di Azure il modulo di strumenti di disegno deve essere caricato caricando i file JavaScript e CSS a cui è necessario fare riferimento nell'app. Una volta caricata la mappa, è possibile creare un'istanza della classe DrawingManager e un'istanza di DrawingToolbar collegata.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
    
    <script type='text/javascript'>
        var map, drawingManager;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Screenshot che mostra gli strumenti di disegno di Mappe di Azure.

Suggerimento

Nei livelli di Mappe di Azure gli strumenti di disegno offrono molte possibilità per il disegno di forme. Ad esempio, quando si disegna un poligono, l'utente può fare clic per aggiungere ogni punto oppure tenere premuto il pulsante del mouse e trascinarlo per disegnare un tragitto. Questa funzionalità può essere modificata con l'opzione interactionType di DrawingManager.

Altre risorse

Risorse aggiuntive

Esaminare i moduli open source di Azure Maps Web SDK. Questi moduli offrono più funzionalità e sono completamente personalizzabili.

Esaminare gli esempi di codice correlati alla migrazione di altre funzionalità di Bing Maps:

Visualizzazioni di dati

Livello contorno

Servizi

Cercare i punti di interesse

Ottenere informazioni su una coordinata (geocodifica inversa)

Visualizzare le indicazioni stradali da A a B

Cercare suggerimenti automatici con l'interfaccia utente di JQuery

Altre informazioni su Azure Maps Web SDK.

Come usare il controllo mappa

Come usare il modulo Strumenti di disegno

Esempi di codice

Documentazione di riferimento per l'API del servizio Azure Maps Web SDK

Passaggi successivi

Altre informazioni sulla migrazione da Bing Maps a Mappe di Azure.

Eseguire la migrazione di un servizio Web