Cómo usar el módulo de E/S espacial Azure Maps

Artículo
10/23/2023

El SDK web de Azure Maps proporciona el módulo de E/S espacial, que integra los datos espaciales con el SDK web de Azure Maps mediante JavaScript o TypeScript. Las eficaces características de este módulo permiten a los desarrolladores:

Lectura y escritura de datos espaciales. Entre otros, estos son los formatos de archivos admitidos: Archivos KML, KMZ, GPX, GeoRSS, GML, GeoJSON y CSV que contengan columnas con información espacial. También admite el texto Well-Known Text (WKT).
Conectarse a los servicios de Open Geospatial Consortium (OGC), integrar con el SDK web de Azure Maps y superponer Web Map Services (WMS) y Web Map tile Services (WMTS) como capas en el mapa. Para más información, consulte Adición de una capa de mapa desde Open Geospatial Consortium (OGC).
Consultar los datos en Web Feature Service (WFS). Para más información, consulte Conexión a un servicio WFS.
Superponer los conjuntos de datos complejos que contienen información de estilo y hacer que se representen automáticamente. Para más información, consulte Adición de una capa de datos sencilla.
Aprovechar las clases de lector y escritor de archivos XML y delimitados de alta velocidad. Para más información, consulte Operaciones de E/S principales.

Esta guía muestra cómo integrar y usar el módulo E/S espacial en una aplicación web.

En este vídeo se proporciona información general del módulo de E/S espacial en el SDK web de Azure Maps.

Advertencia

Use solo los datos y servicios que procedan de un origen de confianza, sobre todo si se hace referencia a él desde otro dominio. El módulo de E/S espacial lleva a cabo pasos para minimizar el riesgo; sin embargo, el método más seguro consiste en no permitir que se inicien datos peligrosos en la aplicación.

Requisitos previos

Una cuenta de Azure Maps
Una clave de suscripción

Instalación del módulo de E/S espacial

Puede cargar el módulo de E/E espacial de Azure Maps mediante una de las dos opciones:

Azure CDN hospedado globalmente para el módulo de E/S espacial de Azure Maps. Para esta opción, se agrega una referencia a JavaScript en el elemento <head> del archivo HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
El código fuente para azure-maps-spatial-io se puede cargar localmente y, después, hospedarse con la aplicación. Este paquete también incluye las definiciones de TypeScript. Para esta opción, use el siguiente comando para instalar el paquete:
```
npm install azure-maps-spatial-io
```
Después, use una declaración de importación para agregar el módulo a un archivo de código fuente:
```
import * as spatial from "azure-maps-spatial-io";
```
Para más información, consulte Cómo usar el paquete npm de control de mapa de Azure Maps.

Uso del módulo de E/S espacial

Cree un archivo HTML.

Cargue el SDK web de Azure Maps e inicialice el control de mapas. Consulte en la guía Uso del control de mapa de Azure Maps los detalles. Una vez que haya terminado este paso, el archivo HTML debe tener la siguiente apariencia:

<!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>

Cargue el módulo de E/S espacial de Azure Maps. Para este ejercicio, use la red CDN para el módulo de E/S espacial de Azure Maps. Agregue la siguiente referencia al elemento <head> del archivo HTML:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inicialice un elemento datasource y agregue el origen de datos al mapa. Inicialice un elemento layer y agregue el origen de datos a la capa de mapa. A continuación, represente tanto el origen de datos como la capa. Antes de desplazarse hacia abajo para ver el código completo en el paso siguiente, piense en los mejores lugares donde colocar los fragmentos de código de la capa y el origen de datos. Recuerde que, antes de manipular el mapa mediante programación, deberíamos esperar hasta que el recurso de mapa esté listo.
```
var datasource, layer;
```
y
```
//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);
```

El código HTML debería tener un aspecto parecido al siguiente. En este ejemplo se muestra cómo mostrar los datos de características de un archivo XML en un mapa.

Nota:

En este ejemplo se 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>

Recuerda reemplazar <Your Azure Maps Key> por la clave de suscripción. Debería ver resultados similares a la siguiente imagen en el archivo HTML:

Pasos siguientes

La característica que hemos mostrado es solo una de las muchas disponibles en el módulo de E/S espacial. Lea las siguientes guías para obtener información sobre cómo usar otras funciones del módulo de E/S espacial:

Adición de una capa de datos simple

Lectura y escritura de datos espaciales

Adición de una capa de mapa de OGC

Conexión a un servicio WFS

Aprovechamiento de las operaciones básicas

Detalles de formatos de datos admitidos

Consulte la documentación del módulo de E/S espacial de Azure Maps:

Paquete de E/S espacial de Azure Maps