Реализация динамического стиля для схем помещений Creator

Статья
11/08/2023

Вы можете использовать службу "Состояние функций создателя" Azure Карты для применения стилей, основанных на динамических свойствах функций данных карты в помещении. Например, можно отобразить конференц-залы в определенном цвете в зависимости от состояния заполнения. В этой статье объясняется, как динамически преобразовывать для просмотра признаки схемы с помощью службы состояния функции и веб-модуля схем помещений.

Необходимые компоненты

statesetId. Дополнительные сведения см. в разделе "Создание набора состояний компонентов".
Веб-приложение. Дополнительные сведения см. в разделе "Использование модуля схемы помещений".

В этой статье используется приложение Postman , но вы можете выбрать другую среду разработки API.

Реализация динамического стиля

После завершения предварительных требований у вас должно быть простое веб-приложение, настроенное с помощью ключа подписки, и statesetId.

Выбор функций

Вы ссылаетесь на функцию, например собрание или конференц-зал, по его идентификатору для реализации динамического стиля. Используйте идентификатор компонента для обновления динамического свойства или состояния этой функции. Чтобы просмотреть функции, определенные в наборе данных, используйте один из следующих методов:

API WFS (Web Feature Service). Используйте API WFS для запроса наборов данных. WFS соответствует признакам API Открытого геопространственного консорциума. API WFS удобно использовать для запросов к признакам в наборе данных. Например, WFS можно использовать для поиска всех конференц-залов среднего размера на конкретном этаже здания.
Реализуйте настраиваемый код, который пользователь может использовать для выбора функций на карте с помощью веб-приложения, как показано в этой статье.

Следующий скрипт реализует событие щелчка мыши. Код извлекает идентификатор компонента на основе нажатой точки. В приложении можно вставить код после блока кода Indoor Manager. Запустите приложение, а затем проверка консоли, чтобы получить идентификатор функции выбранной точки.

/* 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, "unit");

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

По инструкциям из руководства Создание схемы помещения вы настроили набор состояний функции, чтобы принимать обновления состояния для occupancy.

В следующем разделе описано, как указать состояние занятости офиса trueUNIT26 и офисfalseUNIT27.

Указание состояния заполнения

Обновите состояние двух офисов UNIT26 и UNIT27:

В приложении Postman выберите New (Создать).
В окне Create New (Создание) выберите HTTP Request (HTTP-запрос).
Введите имя запроса, например Отправка данных методом POST Data Upload.
Введите следующий URL-адрес API состояний обновления компонентов (замените {Azure-Maps-Subscription-key} ключ подписки Azure Карты и statesetId ):statesetId
```
https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
```
Выберите вкладку Headers (Заголовки).
В поле KEY (КЛЮЧ) выберите Content-Type. В поле VALUE (ЗНАЧЕНИЕ) выберите application/json.
Выберите вкладку Body (Текст).
В раскрывающихся списках выберите raw и JSON.
Скопируйте следующий стиль JSON и вставьте его в окно Body (Основной текст).
```
{
    "states": [
        {
            "keyName": "occupied",
            "value": true,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}
```
Важно!

Обновление будет сохранено только в том случае, если метка времени размещена после метки времени, используемой в предыдущих запросах на обновление состояния компонента для того же идентификатора компонента.

Измените URL-адрес, который использовался на шаге 7, заменив UNIT26 на UNIT27.

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

Скопируйте следующий стиль JSON и вставьте его в окно Body (Основной текст).

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

Визуализация динамических стилей на схеме

Веб-приложение, которое вы ранее открыли в браузере, теперь должно отображать обновленное состояние для признаков схемы.

Офис UNIT27(142) должен отображаться зеленым цветом.
Офис UNIT26(143) должен отображаться красным цветом.

Free room in green and Busy room in red

Ознакомьтесь с демонстрацией в реальном времени

Следующие шаги

Дополнительные сведения см. в следующих материалах:

[Что такое Azure Карты Creator?]

Creator для схем помещений