Usare il modulo I/O spaziale Mappe di Azure

Articolo
02/25/2025

Il modulo I/O spaziale Mappe di Azure integra i dati spaziali con Mappe di Azure Web SDK usando 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).
- Diffusione geografica davvero semplice (GeoRSS).
- Geography Markup Language (GML).
- Notazione dell'oggetto JavaScript geografico (GeoJSON).
- Testo noto (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 Aggiungere un livello mappa da Open Geospatial Consortium (OGC).
Eseguire query sui dati in un'istanza di Web Feature Service (WFS). Per altre informazioni, vedere Connettersi a un'istanza di Web Feature Service (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 classi xml e writer delimitate e XML ad alta velocità. 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

Un account Mappe di Azure
Una chiave di sottoscrizione

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 usare il pacchetto npm del controllo mappa di Mappe di Azure.

Implementare il modulo I/O spaziale

Creare un nuovo file HTML.

Caricare Azure Maps Web SDK e inizializzare il controllo mappa. Per informazioni dettagliate, vedere la guida al controllo mappa Mappe di Azure. 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>

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>
```
Inizializzare un'origine dati e aggiungerla alla mappa.
Inizializzare un livello dati semplice e aggiungervi l'origine dati.
Eseguire il rendering del livello dati.
Prima di scorrere verso il basso per visualizzare il codice completo nel passaggio successivo, determinare le posizioni migliori per inserire i frammenti di codice dell'origine 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);
```

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>

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

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

Condividi tramite

Usare il modulo I/O spaziale Mappe di Azure

Prerequisiti

Installare il modulo I/O spaziale

Implementare il modulo I/O spaziale

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Usare il modulo I/O spaziale Mappe di Azure

Prerequisiti

Installare il modulo I/O spaziale

Implementare il modulo I/O spaziale

Contenuto correlato

Commenti e suggerimenti

Risorse aggiuntive