Come usare il modulo di I/O spaziale di Mappe di Azure

Articolo
09/28/2024

Azure Maps Web SDK fornisce il modulo I/O spaziale, che integra i dati spaziali con Azure Maps Web SDK usando JavaScript o TypeScript. Le funzionalità affidabili di questo modulo consentono agli sviluppatori di:

Leggere e scrivere dati spaziali. I formati di file supportati includono i file KML, KMZ, GPX, GeoRSS, GML, GeoJSON e CSV contenenti colonne con informazioni spaziali. Supporta anche il formato WKT (Well-Known Text).
Connettersi ai servizi di Open Geospatial Consortium (OGC) e integrarsi con Azure Maps Web SDK e 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 ed eseguirne automaticamente il rendering. Per altre informazioni, vedere Aggiungere un livello di dati semplice.
Sfruttare il lettore di file XML e delimitati a velocità elevata e le classi del writer. Per altre informazioni, vedere Operazioni di I/O di base.

Questa guida illustra come integrare e usare il modulo I/O spaziale in un'applicazione Web.

Questo video offre una panoramica del modulo I/O spaziale in Azure Maps Web SDK.

Avviso

Usare solo i dati e i servizi provenienti da un'origine attendibile, soprattutto se si fa riferimento a tali dati da un altro dominio. Il modulo I/O spaziale esegue operazioni per ridurre al minimo i rischi, ma l'approccio più sicuro consiste nel non consentire innanzitutto dati pericolosi nell'applicazione.

Prerequisiti

Un account Mappe di Azure
Una chiave di sottoscrizione

Installazione del modulo I/O spaziale

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

Rete CDN di Azure ospitata a livello globale per il modulo I/O spaziale di Mappe di Azure. Per questa opzione, aggiungere un riferimento a JavaScript nell'elemento <head> del file HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Il codice sorgente per azure-maps-spatial-io può essere caricato in locale e quindi ospitato con l'app. Questo pacchetto include anche le definizioni TypeScript. Per questa opzione, usare il comando seguente per installare il pacchetto:
```
npm install azure-maps-spatial-io
```
Usare quindi 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.

Uso del 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 Controllo mappa di Mappe di Azure. Al termine di questo passaggio, il file HTML sarà simile al seguente:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <meta charset="utf-8">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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 di Mappe di Azure. Per questo esercizio, usare la rete CDN per il modulo I/O spaziale di 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 datasourcee aggiungere l'origine dati alla mappa. Inizializzare layere aggiungere l'origine dati al livello della mappa. Eseguire quindi il rendering dell'origine dati e del livello. Prima di scorrere verso il basso per visualizzare il codice completo nel passaggio successivo, valutare le posizioni migliori per inserire i frammenti di codice dell'origine dati e del livello. Tenere presente che, prima di modificare la mappa a livello di codice, è necessario attendere che la risorsa della mappa sia pronta.
```
var datasource, layer;
```
e
```
//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 ora essere simile al codice seguente. In questo esempio viene illustrato 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">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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. I risultati dovrebbero essere simili all'immagine seguente nel file HTML:

Passaggi successivi

La funzionalità illustrata è solo una delle numerose funzionalità disponibili nel modulo I/O spaziale. Leggere le guide seguenti per ottenere informazioni su come usare altre funzionalità nel modulo I/O spaziale:

Aggiungere un livello di dati semplice

Leggere e scrivere dati spaziali

Aggiungere un livello mappa OGC

Connettersi a un servizio WFS

Sfruttare le operazioni principali

Dettagli sul formato dati supportato

Fare riferimento alla documentazione di I/O spaziale di Mappe di Azure:

Pacchetto di I/O spaziale di Mappe di Azure

Condividi tramite

Come usare il modulo di I/O spaziale di Mappe di Azure

Prerequisiti

Installazione del modulo I/O spaziale

Uso del modulo I/O spaziale

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive