Usar o módulo de E/S Espacial do Azure Mapas

Artigo
03/03/2025

O módulo de E/S Espacial do Azure Mapas , que integra dados espaciais com o SDK da Web do Azure Mapas usando JavaScript ou TypeScript. Este guia demonstra como integrar e usar o módulo de E/S espacial em um aplicativo Web.

Você pode usar os recursos robustos neste módulo para:

Ler e gravar dados espaciais. Você pode usar formatos de arquivo que incluem:
- Keyhole Markup Language (KML).
- KML compactado (KMZ).
- GPX (Formato GPS Exchange).
- GeoRSS (Really Simple Syndication Geográfico).
- GML (Linguagem de Marcação de Geografia).
- GeoJSON (Geographic JavaScript Object Notation).
- WKT (Texto Bem Conhecido).
- Valores separados por vírgulas (CSV) quando as colunas incluem informações espaciais.
Conectar aos serviços OGC (Open Geospatial Consortium) e integrá-los ao SDK da Web do Azure Mapas. Você também pode sobrepor o WMS (Serviços do Mapa da Web) e WMTS (Serviços de Blocos de Mapa da Web) como camadas no mapa. Para obter mais informações, confira Adicionar uma camada do mapa do OGC (Open Geospatial Consortium).
Consultar dados em um Serviço de Recurso da Web (WFS). Para saber mais, confira Conectar-se ao serviço WFS.
Sobrepor conjuntos de dados complexos que contêm informações de estilo e fazer com que eles sejam renderizados automaticamente. Para obter mais informações, confira Adicionar uma camada de dados simples.
Use XML de alta velocidade e o leitor de arquivo delimitado e classes de gravador. Para obter mais informações, confira Operações de E/S básicas.

O vídeo a seguir fornece uma visão geral do módulo de E/S espacial no SDK da Web do Azure Mapas.

Aviso

Use dados e serviços somente de uma fonte que você confia, especialmente se os dados forem referenciados de outro domínio. O módulo de E/S Espacial executa etapas para minimizar o risco, mas você não deve permitir nenhum dado perigoso em seu aplicativo, independentemente disso.

Pré-requisitos

Uma Conta do Azure Mapas
Uma chave de assinatura

Instalar o módulo de E/S espacial

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

A primeira opção é usar a rede de distribuição de conteúdo do Azure, hospedada globalmente do módulo de E/S Espacial do Azure Mapas. Use a seguinte marca de script no elemento <head> do arquivo HTML para adicionar a referência:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Com a segunda opção, você pode carregar o código-fonte para azure-maps-spatial-io localmente e hospedá-lo com seu aplicativo. Esse pacote também inclui definições de TypeScript. Use o seguinte comando para instalar o pacote :
```
npm install azure-maps-spatial-io
```
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 obter mais informações, confira Como usar o pacote npm de controle de mapas do Azure Mapas.

Implementar o módulo de E/S espacial

Criar um novo arquivo HTML.

Carregue o SDK da Web do Azure Mapas e inicialize o controle de mapa. Consulte o guia de Controle de Mapeamento do Azure Mapas para obter detalhes. O arquivo HTML deve ter a seguinte aparência:

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

Carregue o módulo de E/S Espacial do Azure Mapas e use a rede de distribuição de conteúdo para o módulo de E/S Espacial do Azure Mapas. Adicione a referência abaixo ao elemento <head> do seu arquivo HTML:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Inicialize uma fonte de dados e adicione-a ao mapa.
Inicialize uma camada de dados simples e adicione a fonte de dados a ela.
Renderize a camada de dados.
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. Aguarde até que os recursos do mapa estejam prontos antes de manipular o mapa programaticamente.
```
var datasource, layer;
```
Encontre os melhores locais para colocar os snippets de código.
```
//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);
```

O código HTML será parecido com o seguinte: O código de exemplo mostra como exibir os dados de recursos de um arquivo XML em um mapa.

Observação

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

Lembre-se de substituir <Your Azure Maps Key> por sua chave de assinatura. Seu arquivo HTML deve incluir uma imagem semelhante a esta:

Esse artigo descreve apenas um dos muitos recursos disponíveis no módulo de E/S espacial. Para saber mais sobre outras pessoas, leia os seguintes guias:

Compartilhar via

Usar o módulo de E/S Espacial do Azure Mapas

Pré-requisitos

Instalar o módulo de E/S espacial

Implementar o módulo de E/S espacial

Comentários

Recursos adicionais

Compartilhar via

Usar o módulo de E/S Espacial do Azure Mapas

Pré-requisitos

Instalar o módulo de E/S espacial

Implementar o módulo de E/S espacial

Conteúdo relacionado

Comentários

Recursos adicionais