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

Artículo
08/18/2021
5 minutos para leer

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:

Leer y escribir datos de archivos espaciales comunes. 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) e integre con el SDK web de Azure Maps. Superponer Web Mapping Services (WMS) y Web Map tile Services (WMTS) como capas en el mapa.
Consultar los datos en Web Feature Service (WFS).
Superponer los conjuntos de datos complejos que contienen información de estilo y hacer que se representen automáticamente usando el mínimo código.
Aprovechar las clases de lector y escritor de archivos XML y delimitados de alta velocidad.

En esta guía, aprenderá a integrar y usar el módulo de 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.

Prerrequisitos

Para poder usar el módulo de E/S espacial, deberá crear una cuenta Azure Maps y obtener la clave de suscripción principal de la cuenta.

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
```
A continuación, agregue una referencia al código JavaScript en el elemento <head> del documento HTML:
```
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
```

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 IE 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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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"></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);
```

En suma, el archivo HTML debería ser parecido al código siguiente. Este ejemplo muestra cómo leer un archivo XML desde una dirección URL. A continuación, cargue y muestre los datos de las características del archivo en el mapa.

<!DOCTYPE html>
<html>

<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensures that IE 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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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('superCoolKmlFile.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"></div>
</body>

</html>

No olvide reemplazar <Your Azure Maps Key> por la clave principal. Abra el archivo HTML y verá resultados similares a la siguiente imagen:

Pasos siguientes

La característica que hemos mostrado aquí es solo una de las muchas disponibles en el módulo de E/S espacial. Lea las guías siguientes para obtener información sobre cómo usar otras funcionalidades 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

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

Valore su experiencia

Prerrequisitos

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

Uso del módulo de E/S espacial

Pasos siguientes