Uso del módulo de mapas de Azure Maps Indoor

Artículo
09/03/2021
7 minutos para leer

El SDK web de Azure Maps incluye el módulo de Azure Maps Indoor. El módulo Indoor de Azure Maps permite representar mapas de interiores creados en servicios de Azure Maps Creator.

Prerrequisitos

Cree una cuenta de Azure Maps.
Cree un recurso de Creator.
Obtenga una clave de suscripción principal, también conocida como clave principal o clave de suscripción.
Complete el tutorial de creación de planos interiores para obtener tilesetId y statesetId. Deberá utilizar estos identificadores para representar planos interiores con el módulo de mapas de Azure Maps Indoor.

Inserción del módulo de mapas de Indoor

Puede instalar e insertar el módulo de Azure Maps Indoor de una de estas dos maneras.

Para usar la versión de Azure Content Delivery Network hospedada globalmente del módulo de Azure Maps Indoor, consulte las siguientes referencias de la hoja de estilos y JavaScript en el elemento <head> del archivo HTML:

<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/indoor/0.1/atlas-indoor.min.js"></script>

También puede descargar el módulo de Azure Maps Indoor. El módulo de Azure Maps Indoor contiene una biblioteca cliente para tener acceso a los servicios de Azure Maps. Siga los pasos que se indican a continuación para instalar y cargar el módulo de Indoor en la aplicación web.

Descargue el paquete azure-maps-indoor.
```
>npm install azure-maps-indoor
```

Haga referencia a la hoja de estilos y JavaScript del módulo de Azure Maps Indoor en el elemento <head> del archivo HTML:

<link rel="stylesheet" href="node_modules/azure-maps-indoor/dist/atlas-indoor.min.css" type="text/css" />
<script src="node_modules/azure-maps-indoor/dist/atlas-indoor.min.js"></script>

Creación de una instancia del objeto de mapa

En primer lugar, cree un objeto de mapa. El objeto de mapa se usará en el paso siguiente para crear una instancia del objeto de Indoor Manager. En el código siguiente se muestra cómo crear una instancia del objeto de mapa:

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

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13203, 47.63645],
  //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,
});

Creación de una instancia de Indoor Manager

Para cargar el conjunto de mosaicos de interior y el estilo de mapa de los mosaicos, debe crear una instancia de Indoor Manager. Para crear una instancia de Indoor Manager, proporcione el objeto de mapa y el tilesetId correspondiente. Si quiere admitir el estilo de mapa dinámico, debe pasar el statesetId. El nombre de la variable statesetId distingue mayúsculas de minúsculas. El código debe ser como el JavaScript siguiente.

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

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

Para habilitar el sondeo de los datos de estado que facilite, debe proporcionar statesetId y llamar a indoorManager.setDynamicStyling(true). El sondeo de los datos de estado le permite actualizar dinámicamente el estado de las propiedades dinámicas o los estados. Por ejemplo, una característica como una sala puede tener una propiedad dinámica (estado) denominada occupancy. Es posible que la aplicación quiera sondear los cambios de estado para reflejar el cambio en el mapa visual. En el código siguiente se muestra cómo habilitar el sondeo de estado:

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

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

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

Configuración geográfica (opcional)

En esta guía se da por supuesto que ha creado el servicio Creator en el Estados Unidos. Si este es el caso, puede omitir esta sección. Sin embargo, si el servicio Creator se creó en Europa, agregue el código siguiente:

  indoorManager.setOptions({ geography: 'eu' });.

Control de selector de nivel de Indoor

El control de selector de nivel de Indoor le permite cambiar el nivel del mapa representado. Opcionalmente, puede inicializar el control de selector de nivel de Indoor a través de Indoor Manager. Este es el código para inicializar el selector de control de nivel:

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

Eventos de Indoor

El módulo de Azure Maps Indoor admite eventos de objeto de mapa. Los clientes de escucha de eventos de objeto de mapa se invocan cuando cambia un nivel o una instalación. Si quiere ejecutar código cuando cambie un nivel o una instalación, coloque el código dentro del cliente de escucha de eventos. En el código siguiente se muestra cómo se pueden agregar clientes de escucha de eventos al objeto de mapa.

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);
});

La variable eventData contiene información sobre el nivel o la instalación que invocó el evento levelchanged o facilitychanged, respectivamente. Cuando un nivel cambia, el objeto eventData incluye facilityId, el nuevo levelNumber y otros metadatos. Cuando una instalación cambia, el objeto eventData incluye el nuevo facilityId, el nuevo levelNumber y otros metadatos.

Ejemplo: Uso del módulo de mapas de Indoor

En este ejemplo se muestra cómo usar el módulo de Azure Maps Indoor en la aplicación web. Aunque el ejemplo está limitado en el ámbito, trata los aspectos básicos de lo que necesita para empezar a usar el módulo de Azure Maps Indoor. El código HTML completo está después de estos pasos.

Use la opción de Azure Content Delivery Network para instalar el módulo de Azure Maps Indoor.
Cree un archivo HTML.
En el encabezado HTML, haga referencia a los estilos de la hoja de estilos y JavaScript del módulo de Azure Maps Indoor.
Inicialice un objeto de mapa. El objeto de mapa admite las siguientes opciones:
- Subscription key es la clave de suscripción principal de Azure Maps.
- center define la latitud y la longitud de la ubicación del centro del plano interior. Proporcione un valor para center si no quiere proporcionar un valor para bounds. El formato debe mostrarse como center: [-122.13315, 47.63637].
- bounds es la forma rectangular más pequeña que incluye los datos del mapa de conjunto de mosaicos. Establezca un valor para bounds si no quiere establecer un valor para center. Puede buscar los límites del mapa mediante una llamada a Tileset List API. Tileset List API devuelve bbox, que puede analizar y asignar a bounds. El formato debe aparecer como bounds: [# west, # south, # east, # north].
- style le permite establecer el color del fondo. Para mostrar un fondo blanco, defina style como "en blanco".
- zoom permite especificar los niveles mínimo y máximo de zoom para el mapa.
A continuación, cree el módulo de Indoor Manager. Asigne tilesetId de Azure Maps Indoor y, opcionalmente, agregue statesetId.
Cree una instancia del control de selector de nivel de Indoor.
Agregue clientes de escucha de eventos de objeto de mapa.

Ahora el archivo debería ser similar al HTML siguiente.

<!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: levelControl, //level picker
        tilesetId: tilesetId,
        statesetId: 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 el plano interior, cárguelo en un explorador web. Debería mostrarse la imagen siguiente. Si hace clic en la característica de hueco de escalera, el selector de nivel aparecerá en la esquina superior derecha.

imagen de plano interior