Como usar o módulo e/s espacial do mapas do AzureHow to use the Azure Maps Spatial IO module

O SDK da Web do Azure Maps fornece o módulo de e/s espacial, que integra dados espaciais com o SDK da Web do Azure Maps usando JavaScript ou TypeScript.The Azure Maps Web SDK provides the Spatial IO module, which integrates spatial data with the Azure Maps web SDK using JavaScript or TypeScript. Os recursos robustos deste módulo permitem aos desenvolvedores:The robust features in this module allow developers to:

Neste guia, aprenderemos como integrar e usar o módulo de e/s espacial em um aplicativo Web.In this guide, we'll learn how to integrate and use the Spatial IO module in a web application.

Este vídeo fornece uma visão geral do módulo de e/s espacial no SDK da Web do Azure Maps.This video provides an overview of Spatial IO module in the Azure Maps Web SDK.


Aviso

Use apenas dados e serviços que sejam de uma fonte confiável, especialmente se fizer referência a ele de outro domínio.Only use data and services that are from a source you trust, especially if referencing it from another domain. O módulo de e/s espacial executa etapas para minimizar o risco. no entanto, a abordagem mais segura não é permitir que todos os dados do danagerous em seu aplicativo comecem.The spatial IO module does take steps to minimize risk, however the safest approach is too not allow any danagerous data into your application to begin with.

Pré-requisitosPrerequisites

Antes de poder usar o módulo de e/s espacial, você precisará fazer uma conta do Azure Maps e obter a chave de assinatura primária para sua conta.Before you can use the Spatial IO module, you'll need to make an Azure Maps account and get the primary subscription key for your account.

Instalando o módulo de e/s espacialInstalling the Spatial IO module

Você pode carregar o módulo e/s espacial do Azure Maps usando uma das duas opções:You can load the Azure Maps spatial IO module using one of the two options:

  • A CDN do Azure hospedada globalmente para o módulo de e/s espacial do Azure Maps.The globally hosted Azure CDN for the Azure Maps spatial IO module. Para essa opção, você adiciona uma referência ao JavaScript no <head> elemento do arquivo HTML.For this option, you add a reference to the JavaScript in the <head> element of the HTML file.

    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
    
  • O código-fonte para Azure-Maps-espacial-Io pode ser carregado localmente e, em seguida, hospedado com seu aplicativo.The source code for azure-maps-spatial-io can be loaded locally, and then hosted with your app. Esse pacote também inclui definições de TypeScript.This package also includes TypeScript definitions. Para essa opção, use o seguinte comando para instalar o pacote:For this option, use the following command to install the package:

    npm install azure-maps-spatial-io
    

    Em seguida, adicione uma referência ao JavaScript no <head> elemento do documento HTML:Then, add a reference to the JavaScript in the <head> element of the HTML document:

    <script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
    

Usando o módulo de e/s espacialUsing the Spatial IO module

  1. Criar um novo arquivo HTML.Create a new HTML file.

  2. Carregue o SDK da Web do Azure Maps e inicialize o controle de mapa.Load the Azure Maps Web SDK and initialize the map control. Consulte o guia de controle do mapa do Azure Maps para obter os detalhes.See the Azure Maps map control guide for the details. Depois de concluir esta etapa, o arquivo HTML deverá ter esta aparência:Once you're done with this step, your HTML file should look like this:

    <!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>
    
  3. Carregue o módulo de e/s espacial do Azure Maps.Load the Azure Maps spatial IO module. Para este exercício, use a CDN para o módulo de e/s espacial do mapas do Azure.For this exercise, use the CDN for the Azure Maps spatial IO module. Adicione a referência abaixo ao <head> elemento do seu arquivo HTML:Add the reference below to the <head> element of your HTML file:

    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
    
  4. Inicialize um datasource e adicione a fonte de dados ao mapa.Initialize a datasource, and add the data source to the map. Inicialize um layer e adicione a fonte de dados à camada do mapa.Initialize a layer, and add the data source to the map layer. Em seguida, processe a fonte de dados e a camada.Then, render both the data source and the layer. 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.Before you scroll down to see the full code in the next step, think about the best places to put the data source and layer code snippets. Lembre-se de que, antes de manipular programaticamente o mapa, devemos aguardar até que o recurso de mapa esteja pronto.Recall that, before we programmatically manipulate the map, we should wait until the map resource are ready.

    var datasource, layer;
    

    eand

    //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);
    
  5. Juntando tudo isso, o código HTML deve ser semelhante ao código a seguir.Putting it all together, your HTML code should look like the following code. Este exemplo demonstra como ler um arquivo XML de uma URL.This sample demonstrates how to read an XML file from a URL. Em seguida, carregue e exiba os dados de recurso do arquivo no mapa.Then, load and display the file's feature data on the map.

    <!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>
    
  6. Lembre-se de substituir <Your Azure Maps Key> pela sua chave primária.Remember to replace <Your Azure Maps Key> with your primary key. Abra o arquivo HTML e você verá resultados semelhantes à imagem a seguir:Open your HTML file, and you'll see results similar to the following image:

    Exemplo de dados espaciais

Próximas etapasNext steps

O recurso que demonstramos aqui é apenas um dos muitos recursos disponíveis no módulo de e/s espacial.The feature we demonstrated here is only one of the many features available in the Spatial IO module. Leia os guias abaixo para saber como usar outras funcionalidades no módulo de e/s espacial:Read the guides below to learn how to use other functionalities in the Spatial IO module:

Consulte a documentação de e/s espacial do Azure Maps:Refer to the Azure Maps Spatial IO documentation: