Como usar o módulo de E/S Espacial do Azure Maps

Artigo
09/25/2024

O SDK da Web do Azure Maps fornece o módulo E/S espacial, que integra dados espaciais com o SDK da Web do Azure Maps usando JavaScript ou TypeScript. Os recursos robustos deste módulo permitem que os desenvolvedores:

Ler e escrever dados espaciais. Os formatos de ficheiro suportados incluem: ficheiros KML, KMZ, GPX, GeoRSS, GML, GeoJSON e CSV contendo colunas com informação espacial. Também suporta texto conhecido (WKT).
Conecte-se aos serviços do Open Geospatial Consortium (OGC) e integre-se ao SDK da Web do Azure Maps e sobreponha os Serviços de Mapa da Web (WMS) e os Serviços de Mosaico de Mapa da Web (WMTS) como camadas no mapa. Para obter mais informações, consulte Adicionar uma camada de mapa do Open Geospatial Consortium (OGC).
Consultar dados em um Web Feature Service (WFS). Para obter mais informações, consulte Conectar-se a um serviço WFS.
Sobreponha conjuntos de dados complexos que contenham informações de estilo e faça com que sejam renderizados automaticamente. Para obter mais informações, consulte Adicionar uma camada de dados simples.
Aproveite XML de alta velocidade e classes de leitor e gravador de arquivos delimitados. Para obter mais informações, consulte Core IO operations.

Este guia demonstra como integrar e usar o módulo de E/S espacial em uma aplicação Web.

Este vídeo fornece uma visão geral do módulo E/S espacial no SDK da Web do Azure Maps.

Aviso

Utilize apenas dados e serviços que provenham de uma fonte em que confie, especialmente se os referenciar a partir de outro domínio. O módulo de E/S espacial toma medidas para minimizar o risco, no entanto, a abordagem mais segura também é não permitir que nenhum dado perigoso em seu aplicativo para começar.

Pré-requisitos

Uma conta do Azure Maps
Uma chave de subscrição

Instalando o módulo de E/S espacial

Você pode carregar o módulo de E/S espacial do Azure Maps usando uma das duas opções:

A CDN do Azure hospedada globalmente para o módulo de E/S espacial do Azure Maps. Para essa opção, você adiciona uma referência ao JavaScript no <head> elemento do arquivo HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
O código-fonte do azure-maps-spatial-io pode ser carregado localmente e, em seguida, hospedado com seu aplicativo. Este pacote também inclui definições TypeScript. Para essa opção, use o seguinte comando para instalar o pacote:
```
npm install azure-maps-spatial-io
```
Em seguida, use uma declaração de importação para adicionar o módulo a um arquivo de origem:
```
import * as spatial from "azure-maps-spatial-io";
```
Para saber mais, consulte Como usar o pacote npm de controle de mapa do Azure Maps.

Usando o módulo de E/S espacial

Crie um novo arquivo HTML.

Carregue o SDK da Web do Azure Maps e inicialize o controle de mapa. Consulte o guia de controle de mapa do Azure Maps para obter detalhes. Depois de concluir esta etapa, seu arquivo HTML deverá ter esta aparência:

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

Carregue o módulo de E/S espacial do Azure Maps. Para este exercício, use a CDN para o módulo de E/S espacial do Azure Maps. Adicione a seguinte referência ao <head> elemento do seu ficheiro HTML:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inicialize um datasourcee adicione a fonte de dados ao mapa. Inicialize um layere adicione a fonte de dados à camada de mapa. Em seguida, renderize a fonte de dados e a camada. Antes de rolar para baixo para ver o código completo na próxima etapa, pense nos melhores lugares para colocar a fonte de dados e os trechos de código de camada. Lembre-se de que, antes de manipularmos programaticamente o mapa, devemos esperar até que o recurso do mapa esteja pronto.
```
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);
```

Seu código HTML agora deve se parecer com o código a seguir. Este exemplo demonstra como exibir os dados de recurso de um arquivo XML em um mapa.

Nota

Este exemplo 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>

Lembre-se de substituir <Your Azure Maps Key> pela sua chave de subscrição. Você deve ver resultados semelhantes à seguinte imagem em seu arquivo HTML:

Próximos passos

O recurso que demonstramos é apenas um dos muitos recursos disponíveis no módulo Spatial IO. Leia os seguintes guias para aprender a usar outras funcionalidades no módulo E/S espacial:

Adicionar uma camada de dados simples

Ler e gravar dados espaciais

Adicionar uma camada de mapa OGC

Conectar-se a um serviço WFS

Aproveite as operações principais

Detalhes do formato de dados suportado

Consulte a documentação de E/S Espaciais do Azure Maps:

Pacote de E/S Espaciais do Azure Maps

Partilhar via

Como usar o módulo de E/S Espacial do Azure Maps

Pré-requisitos

Instalando o módulo de E/S espacial

Usando o módulo de E/S espacial

Próximos passos

Comentários

Recursos adicionais