Condividi tramite

Usare il modulo I/O spaziale di Mappe di Azure

Il modulo Spatial IO di Mappe di Azure integra i dati spaziali con l'SDK Web Mappe di Azure utilizzando JavaScript o TypeScript. Questa guida illustra come integrare e usare il modulo I/O spaziale in un'applicazione Web.

È possibile usare le funzionalità affidabili in questo modulo per:

  • Leggere e scrivere dati spaziali. È possibile usare i formati di file che includono:
    • Keyhole Markup Language (KML).
    • KML compresso (KMZ).
    • Gps Exchange Format (GPX).
    • Geographic Really Simple Syndication (GeoRSS).
    • Geography Markup Language (GML).
    • Notazione dell'oggetto JavaScript geografico (GeoJSON).
    • Well-Known Text (WKT).
    • Valori delimitati da virgole (CSV) quando le colonne includono informazioni spaziali.
  • Connettersi ai servizi OGC (Open Geospatial Consortium) e integrarsi con Mappe di Azure Web SDK. È anche possibile sovrapporre Web Map Services (WMS) e Web Map Tile Services (WMTS) come livelli sulla mappa. Per altre informazioni, vedere Aggiungi un livello di mappa da Open Geospatial Consortium (OGC).
  • Eseguire query sui dati in un'istanza di Web Feature Service (WFS). Per ulteriori informazioni, vedere Connettersi a un servizio WFS.
  • Sovrapporre set di dati complessi che contengono informazioni sullo stile, che possono essere visualizzate automaticamente. Per altre informazioni, vedere Aggiungere un livello di dati semplice.
  • Usare il lettore di file XML e delimitati a velocità elevata e le classi di writer. Per altre informazioni, vedere Operazioni di I/O di base.

Il video seguente offre una panoramica del modulo I/O spaziale in Mappe di Azure Web SDK.


Avviso

Usare i dati e i servizi solo da un'origine attendibile, soprattutto se si fa riferimento ai dati da un altro dominio. Il modulo I/O spaziale esegue operazioni per ridurre al minimo i rischi, ma non è consigliabile consentire dati pericolosi nell'applicazione indipendentemente.

Prerequisiti

Installare il modulo I/O spaziale

È possibile caricare il modulo I/O spaziale Mappe di Azure usando una delle due opzioni seguenti:

  • La prima opzione consiste nell'usare la rete di distribuzione di contenuti di Azure ospitata a livello globale per il modulo I/O spaziale Mappe di Azure. Usare il tag script seguente nell'elemento <head> del file HTML per aggiungere il riferimento:

    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

  • Con la seconda opzione, è possibile caricare il codice sorgente per azure-maps-spatial-io in locale e ospitarlo con l'app. Questo pacchetto include anche le definizioni TypeScript. Usare il comando seguente per installare il pacchetto :

    npm install azure-maps-spatial-io

    Usare una dichiarazione di importazione per aggiungere il modulo in un file di origine:

    import * as spatial from "azure-maps-spatial-io";

    Per maggiori informazioni, vedere come utilizzare il pacchetto npm per il controllo delle mappe di Azure Maps.

Implementare il modulo I/O spaziale

  1. Creare un nuovo file HTML.

  2. Caricare Azure Maps Web SDK e inizializzare il controllo mappa. Per informazioni dettagliate, vedere la guida al controllo della mappa di Azure Maps. Il file HTML dovrebbe essere simile al seguente:

    <!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that the web page looks good on all screen sizes. -->
    <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.js"></script>

    <script type='text/javascript'>

        var map;

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

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

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

                // Write your code here to make sure it runs once the map resources are ready.

            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>

</html>

  3. Caricare il modulo I/O spaziale Mappe di Azure e usare la rete per la distribuzione di contenuti per il modulo I/O spaziale Mappe di Azure. Aggiungere il riferimento seguente all'elemento <head> del file HTML:

    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

  4. Creare prima di tutto un'origine dati e aggiungerla alla mappa.

  5. Inizializzare un livello di dati semplice e aggiungervi l'origine dati.

  6. Eseguire il rendering dello strato dati.

  7. Prima di scorrere verso il basso per visualizzare il codice completo nella fase successiva, individuate le posizioni migliori per inserire i frammenti di codice della sorgente dati e del livello. Attendere che le risorse della mappa siano pronte prima di modificare la mappa a livello di codice.

    var datasource, layer;

    Trovare le posizioni migliori per inserire i frammenti di codice.

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

  8. Il codice HTML dovrebbe essere simile al seguente. Il codice di esempio mostra come visualizzare i dati delle funzionalità di un file XML in una mappa.

    Nota

    Questo esempio usa Route66Attractions.xml.

    <!DOCTYPE html>
<html>
<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensure that the web page looks good on all screen sizes. -->
    <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.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 GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
                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 an XML file from a URL or pass in a raw XML string.
                atlas.io.read('Route66Attractions.xml').then(r => {
                    if (r) {
                        //Add the feature data to the data source.
                        datasource.add(r);

                        //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='GetMap()'>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

  9. Ricordarsi di sostituire <Your Azure Maps Key> con la chiave di sottoscrizione. Il file HTML deve includere un'immagine simile alla seguente:

    Screenshot che mostra l'esempio di dati spaziali in una mappa.

Contenuto correlato

Questo articolo descrive solo una delle numerose funzionalità disponibili nel modulo I/O spaziale. Per altre informazioni su altri utenti, leggere le guide seguenti: