Partilhar via

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

  • Artigo

O módulo E/S Espacial do Azure Maps integra dados espaciais com o SDK da Web do Azure Maps usando JavaScript ou TypeScript. Este guia demonstra como integrar e usar o módulo de E/S espacial em uma aplicação Web.

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

  • Ler e escrever dados espaciais. Você pode usar formatos de arquivo que incluem:
    • Linguagem de marcação Keyhole (KML).
    • KML compactado (KMZ).
    • Formato de troca GPS (GPX).
    • Distribuição geográfica realmente simples (GeoRSS).
    • Linguagem de marcação geográfica (GML).
    • Notação geográfica de objeto JavaScript (GeoJSON).
    • Texto Bem Conhecido (WKT).
    • Valores separados por vírgulas (CSV) quando as colunas incluem informações espaciais.
  • Conecte-se aos serviços do Open Geospatial Consortium (OGC) e integre-se ao SDK da Web do Azure Maps. Você também pode sobrepor Serviços de Mapa da Web (WMS) e 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 contêm informações de estilo, que podem ser renderizadas automaticamente. Para obter mais informações, consulte Adicionar uma camada de dados simples.
  • Use XML de alta velocidade e classes de leitor e gravador de arquivos delimitados. Para obter mais informações, consulte Core IO operations.

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


Aviso

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

Pré-requisitos

Instalar o módulo E/S espacial

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

  • A primeira opção é usar a rede de entrega de conteúdo do Azure hospedada globalmente para o módulo de E/S espacial do Azure Maps. Use a seguinte marca de script no <head> elemento 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. Este pacote também inclui definições 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 saber mais, consulte Como usar o pacote npm de controle de mapa do Azure Maps.

Implementar o módulo de E/S espacial

  1. Crie um novo arquivo HTML.

  2. 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. Seu arquivo HTML deve ter esta 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>

  3. Carregue o módulo E/S Espacial do Azure Maps e use a rede de entrega de conteúdo para o módulo 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>

  4. Inicialize uma fonte de dados e adicione-a ao mapa.

  5. Inicialize uma camada de dados simples e adicione a fonte de dados a ela.

  6. Renderize a camada de dados.

  7. Antes de rolar para baixo para ver o código completo na próxima etapa, determine os melhores locais para colocar os trechos de código da fonte de dados e da camada. Aguarde até que os recursos do mapa estejam prontos antes de manipular o mapa programaticamente.

    var datasource, layer;

    Encontre os melhores lugares para colocar os trechos 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);

  8. Seu código HTML deve ter a seguinte aparência. O código de exemplo mostra como exibir os dados de feição 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">

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

  9. Lembre-se de substituir <Your Azure Maps Key> pela sua chave de subscrição. Seu arquivo HTML deve incluir uma imagem parecida com esta:

    Captura de ecrã a mostrar o exemplo de Dados Espaciais num mapa.

Conteúdos relacionados

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