Implementación de estilos dinámicos para planos interiores de Creator

Artículo
11/04/2021
3 minutos para leer

Puede usar el servicio de estado de características de Azure Maps Creator para aplicar estilos basados en las propiedades dinámicas de las características de datos de los mapas de interiores. Por ejemplo, puede representar las salas de reuniones de la instalación con un color específico para reflejar el estado de ocupación. En este artículo, se describe cómo representar dinámicamente las características de los mapas de interiores con el servicio de estado de características y el módulo web de interiores.

Prerrequisitos

Cree una cuenta de Azure Maps
Obtenga una clave de suscripción principal, también conocida como clave principal o clave de suscripción.
Cree un recurso de Creator
Descargue el paquete de dibujos de ejemplo.
Cree un plano interior para obtener un tilesetId y un statesetId.
Cree una aplicación web siguiendo los pasos descritos en Cómo usar el módulo de planos interiores.

En este tutorial se usa la aplicación Postman, pero puede elegir un entorno de desarrollo de API diferente.

Implementación de un estilo dinámico

Cuando haya completado los requisitos previos, tendrá una aplicación web simple configurada con su clave de suscripción, tilesetId y statesetId.

Selección de características

Para implementar los estilos dinámicos, se debe hacer referencia a una característica, como una sala de reuniones o conferencias, por su id de característica. Use el id de característica para actualizar la propiedad dinámica o el estado de esa característica. Para ver las características definidas en un conjunto de datos, puede usar uno de los métodos siguientes:

WFS API (Web Feature Service). Puede usar WFS API para consultar conjuntos de datos. WFS sigue las características de Open Geospatial Consortium API. La API de WFS es útil para consultar características dentro de un conjunto de datos. Por ejemplo, puede usar WFS para buscar todas las salas de reuniones de tamaño medio de una instalación y una planta determinadas.
Implemente código personalizado que un usuario pueda usar para seleccionar características en un mapa mediante la aplicación web. En este artículo, se usa esta opción.

El script siguiente implementa el evento de clic del mouse. El código recupera el id característica según el punto en el que se hizo clic. En la aplicación, puede insertar el código después del bloque de código del administrador de interiores. Ejecute la aplicación y compruebe la consola para obtener el id de característica del punto en el que hizo clic.

/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function(e){

    var features = map.layers.getRenderedShapes(e.position, "indoor");

    features.forEach(function (feature) {
        if (feature.layer.id == 'indoor_unit_office') {
            console.log(feature);
        }
    });
});

El tutorial Creación de un plano interior configuró el conjunto de estados de características para aceptar las actualizaciones de estado de occupancy.

En la siguiente sección, estableceremos el estado de ocupación de la oficina UNIT26 en true, y de la oficina UNIT27 en false.

Establecimiento del estado de ocupación

Ahora actualizaremos el estado de las dos oficinas, UNIT26 y UNIT27:

En la aplicación Postman, seleccione New (Nuevo).
En la ventana Create New (Crear nuevo), seleccione HTTP Request (Solicitud HTTP).
En Nombre de solicitud, escriba un nombre para la solicitud, como POST Data Upload.
Escriba la siguiente dirección URL en Feature Update States API (reemplace {Azure-Maps-Primary-Subscription-key} por su clave de suscripción principal y statesetId por statesetId):
```
https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}
```
Seleccione la pestaña Encabezados.
En el campo CLAVE, seleccione Content-Type. En el campo VALUE, seleccione application/json.
Seleccione la pestaña Cuerpo.
En las listas desplegables, seleccione raw y JSON.
Copie el siguiente estilo JSON y péguelo en la ventana Body:
```
{
    "states": [
        {
            "keyName": "occupied",
            "value": true,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}
```
Importante

La actualización se guardará solo si la marca de tiempo enviada es posterior a la marca de tiempo usada en las solicitudes de actualización de estado de características anteriores para el mismo ID de característica.

Cambie la dirección URL que usó en el paso 7 reemplazando UNIT26 por UNIT27:

https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

Copie el siguiente estilo JSON y péguelo en la ventana Body:

{
    "states": [
        {
            "keyName": "occupied",
            "value": false,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}