Usar o módulo Mapas do Azure Mapas InternoUse the Azure Maps Indoor Maps module

O SDK da Web do Azure Mapas inclui o módulo Mapas do Interior do Azure Mapas.The Azure Maps Web SDK includes the Azure Maps Indoor module. O módulo Mapas do Interior do Azure Mapas permite renderizar mapas do interior criados no Criador do Azure Mapas.The Azure Maps Indoor module allows you to render indoor maps created in Azure Maps Creator.

Pré-requisitosPrerequisites

  1. Fazer uma conta do Azure MapasMake an Azure Maps account
  2. Criar um recurso do CriadorCreate a Creator resource
  3. Obter uma chave de assinatura primária, também conhecida como a chave primária ou a chave de assinatura.Obtain a primary subscription key, also known as the primary key or the subscription key.
  4. Obtenha um tilesetId e um statesetId concluindo o tutorial para a criação de mapas do interior.Get a tilesetId and a statesetId by completing the tutorial for creating Indoor maps. Você precisará usar esses identificadores para renderizar mapas do interior com o módulo Mapas do Azure Mapas Interno.You'll need to use these identifiers to render indoor maps with the Azure Maps Indoor Maps module.

Inserir o módulo de Mapas do InteriorEmbed the Indoor Maps module

Você pode instalar e inserir o módulo Mapas do Interior do Azure Mapas de duas maneiras.You can install and embed the Azure Maps Indoor module in one of two ways.

Para usar a versão de Rede de Distribuição de Conteúdo do Azure hospedada globalmente do módulo Mapas do Azure Mapas Interno, referencie as seguintes referências de JavaScript e da folha de estilo no elemento <head> do arquivo HTML:To use the globally hosted Azure Content Delivery Network version of the Azure Maps Indoor module, reference the following JavaScript and Style Sheet references in the <head> element of the HTML file:

<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>

Ou então, você pode baixar o módulo de Mapas do Interior do Azure Mapas.Or, you can download the Azure Maps Indoor module. O módulo de Mapas do Interior do Azure Mapas contém uma biblioteca de clientes para acessar os serviços do Azure Mapas.The Azure Maps Indoor module contains a client library for accessing Azure Maps services. Siga as etapas abaixo para instalar e carregar o módulo de Mapas do Interior em seu aplicativo Web.Follow the steps below to install and load the Indoor module into your web application.

  1. Instale o pacote Azure-Maps-interno.Install the azure-maps-indoor package.

    >npm install azure-maps-control
    >npm install azure-maps-indoor
    
  2. Faça referência ao módulo de Mapas do Interior do Azure Mapas de JavaScript e da folha de estilo do elemento <head> do arquivo HTML:Reference the Azure Maps Indoor module JavaScript and Style Sheet in the <head> element of the HTML file:

    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>
    

Instanciar o objeto MapaInstantiate the Map object

Primeiro, crie um objeto Mapa.First, create a Map object. O objeto Mapa será usado na próxima etapa para instanciar o objeto Gerenciador de Mapas do Interior.The Map object will be used in the next step to instantiate the Indoor Manager object. O código a seguir mostra como instanciar o objeto Mapa:The code below shows you how to instantiate the Map object:

const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13315, 47.63637],
  //or, you can use bounds: [# west, # south, # east, # north] and replace # with your map's bounds
  style: "blank",
  view: 'Auto',
  authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,
});

Instanciar o Gerenciador de Mapas do InteriorInstantiate the Indoor Manager

Para carregar os conjuntos de peças dos mapas do interior e o estilo do mapa das peças, você deve criar uma instância do Gerenciador de Mapas do Interior.To load the indoor tilesets and map style of the tiles, you must instantiate the Indoor Manager. Crie uma instância do Gerenciador de Mapas do Interior fornecendo o objeto Mapa e o tilesetIdcorrespondente.Instantiate the Indoor Manager by providing the Map object and the corresponding tilesetId. Se desejar dar suporte a estilos de mapa dinâmicos, você deverá passar o statesetId.If you wish to support dynamic map styling, you must pass the statesetId. O nome da variável statesetId diferencia maiúsculas de minúsculas.The statesetId variable name is case-sensitive. Seu código deve ser semelhante ao JavaScript abaixo.Your code should like the JavaScript below.

const tilesetId = "";
const statesetId = "";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: "<tilesetId>",
    statesetId: "<statesetId>" // Optional
});

Para habilitar a sondagem de dados de estado fornecidos, você deve fornecer o statesetId e chamar indoorManager.setDynamicStyling(true).To enable polling of state data you provide, you must provide the statesetId and call indoorManager.setDynamicStyling(true). A sondagem de dados de estado permite atualizar dinamicamente o estado das propriedades dinâmicas ou estados.Polling state data lets you dynamically update the state of dynamic properties or states. Por exemplo, um recurso como sala pode ter uma propriedade dinâmica (estado) chamada occupancy.For example, a feature such as room can have a dynamic property (state) called occupancy. Seu aplicativo pode desejar sondar quaisquer alterações de estado para refletir a alteração dentro do mapa Visual.Your application may wish to poll for any state changes to reflect the change inside the visual map. O código abaixo mostra como habilitar a sondagem de estado:The code below shows you how to enable state polling:

const tilesetId = "";
const statesetId = "";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: "<tilesetId>",
    statesetId: "<statesetId>" // Optional
});

if (statesetId.length > 0) {
    indoorManager.setDynamicStyling(true);
}

Controle de Seletor de piso de Mapas do InteriorIndoor Level Picker Control

O controle Seletor de piso de Mapas do Interior permite alterar o piso do mapa renderizado.The Indoor Level Picker control allows you to change the level of the rendered map. Opcionalmente, você pode inicializar o Seletor de piso de Mapas do Interior através do Gerenciador de Mapas do Interior.You can optionally initialize the Indoor Level Picker control via the Indoor Manager. Aqui está o código para inicializar o seletor de controle de piso:Here's the code to initialize the level control picker:

const levelControl = new atlas.control.LevelControl({ position: "top-right" });
indoorManager.setOptions({ levelControl });

Eventos de Mapas do InteriorIndoor Events

O módulo Mapas do Interior do Azure Mapas em uso oferece suporte a eventos do objeto Mapa.The Azure Maps Indoor module supports Map object events. Os ouvintes do objeto Mapa são invocados quando um piso ou uma instalação são alterados.The Map object event listeners are invoked when a level or facility has changed. Se você quiser executar o código quando um piso ou uma instalação tiverem sido alterados, coloque o seu código dentro do ouvinte de eventos.If you want to run code when a level or a facility have changed, place your code inside the event listener. O código a seguir mostra como os ouvintes de evento podem ser adicionados ao objeto Mapa.The code below shows how event listeners can be added to the Map object.

map.events.add("levelchanged", indoorManager, (eventData) => {

  //code that you want to run after a level has been changed
  console.log("The level has changed: ", eventData);
});

map.events.add("facilitychanged", indoorManager, (eventData) => {

  //code that you want to run after a facility has been changed
  console.log("The facility has changed: ", eventData);
});

A variável eventData contém informações sobre o piso ou instalação que invocou o evento levelchanged ou facilitychanged, respectivamente.The eventData variable holds information about the level or facility that invoked the levelchanged or facilitychanged event, respectively. Quando um piso é alterado, o objeto eventData conterá o facilityId, o novo levelNumber e outros metadados.When a level changes, the eventData object will contain the facilityId, the new levelNumber, and other metadata. Quando uma instalação é alterada, o objeto eventData conterá o novo facilityId, o novo levelNumber e outros metadados.When a facility changes, the eventData object will contain the new facilityId, the new levelNumber, and other metadata.

Exemplo: Usar o módulo do Azure Mapas InternoExample: Use the Indoor Maps Module

Este exemplo mostra como usar o módulo Mapas do Azure Mapas Interno em seu aplicativo Web.This example shows you how to use the Azure Maps Indoor module in your web application. Embora o exemplo seja limitado em escopo, ele aborda as noções básicas do que você precisa para começar a usar o módulo Mapas do Interior do Azure Mapas.Although the example is limited in scope, it covers the basics of what you need to get started using the Azure Maps Indoor module. O código HTML completo está abaixo dessas etapas.The complete HTML code is below these steps.

  1. Use a opção de Rede de Distribuição de Conteúdo do Azure para instalar o módulo Mapas do Azure Mapas Interno.Use the Azure Content Delivery Network option to install the Azure Maps Indoor module.

  2. Criar um novo arquivo HTMLCreate a new HTML file

  3. No cabeçalho do HTML, faça referência aos estilos de JavaScript e folha de estilo do módulo Mapas do Interior do Azure Mapas.In the HTML header, reference the Azure Maps Indoor module JavaScript and style sheet styles.

  4. Inicialize um objeto Mapa.Initialize a Map object. O objeto Mapa oferece suporte para as seguintes opções:The Map object supports the following options:

    • Subscription key é a sua chave de assinatura primária do Azure Mapas.Subscription key is your Azure Maps primary subscription key.
    • center define uma latitude e longitude para o centro do mapa do interior.center defines a latitude and longitude for your indoor map center location. Forneça um valor para center se você não quiser fornecer um valor para bounds.Provide a value for center if you don't want to provide a value for bounds. O formato deve ser exibido como center: [-122.13315, 47.63637].Format should appear as center: [-122.13315, 47.63637].
    • bounds é a menor forma retangular que inclui os dados de mapa do conjunto de peças.bounds is the smallest rectangular shape that encloses the tileset map data. Defina um valor para bounds se você não quiser definir um valor para center.Set a value for bounds if you don't want to set a value for center. Você pode encontrar os limites do mapa chamando a API de lista de conjunto de peças.You can find your map bounds by calling the Tileset List API. A API de lista de conjunto de peças retorna o bbox, que você pode analisar e atribuir a bounds.The Tileset List API returns the bbox, which you can parse and assign to bounds. O formato deve aparecer como bounds : [# West, # Sul, # East, # Norte].Format should appear as bounds: [# west, # south, # east, # north].
    • style permite definir a cor da tela de fundo.style allows you to set the color of the background. Para exibir uma tela de fundo branca, defina style como “em branco”.To display a white background, define style as "blank".
    • zoom permite especificar os níveis de zoom mínimo e máximo para o mapa.zoom allows you to specify the min and max zoom levels for your map.
  5. Em seguida, crie o módulo Gerenciador de Mapas do Interior.Next, create the Indoor Manager module. Atribua o tilesetId do módulo Mapas do Interior do Azure Mapas e, opcionalmente, adicione o statesetId.Assign the Azure Maps Indoor tilesetId, and optionally add the statesetId.

  6. Crie uma instância para o controle Seletor de piso do Mapa do Interior.Instantiate the Indoor Level Picker control.

  7. Adicione ouvintes do evento do objeto Mapa.Add Map object event listeners.

Seu arquivo agora deve ter aparência semelhante à do HTML abaixo.Your file should now look similar to the HTML below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Indoor Maps App</title>
    
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>

    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
      
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #map-id {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map-id"></div>
    <script>
      const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";
      const tilesetId = "<your tilesetId>";
      const statesetId = "<your statesetId>";

      const map = new atlas.Map("map-id", {
        //use your facility's location
        center: [-122.13315, 47.63637],
        //or, you can use bounds: [# west, # south, # east, # north] and replace # with your Map bounds
        style: "blank",
        view: 'Auto',
        authOptions: { 
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey
        },
        zoom: 19,
      });

      const levelControl = new atlas.control.LevelControl({
        position: "top-right",
      });

      const indoorManager = new atlas.indoor.IndoorManager(map, {
        levelControl, //level picker
        tilesetId,
        statesetId, //optional
      });

      if (statesetId.length > 0) {
        indoorManager.setDynamicStyling(true);
      }

      map.events.add("levelchanged", indoorManager, (eventData) => {
        //put code that runs after a level has been changed
        console.log("The level has changed:", eventData);
      });

      map.events.add("facilitychanged", indoorManager, (eventData) => {
        //put code that runs after a facility has been changed
        console.log("The facility has changed:", eventData);
      });
    </script>
  </body>
</html>

Para ver seu mapa do interior, carregue-o em um navegador da Web.To see your indoor map, load it into a web browser. Ele deve aparecer como a imagem abaixo.It should appear like the image below. Se você clicar no recurso escada, o seletor de piso será exibido no canto superior direito.If you click on the stairwell feature, the level picker will appear in the upper right-hand corner.

imagem de mapa do interior

Próximas etapasNext steps

Leia sobre as APIs relacionadas ao módulo de Mapas do Interior do Azure Mapas:Read about the APIs that are related to the Azure Maps Indoor module:

Saiba mais sobre como adicionar mais dados ao seu mapa:Learn more about how to add more data to your map: