Реализация динамического стиля для карт создателя (Предварительная версия)Implement dynamic styling for Creator (Preview) indoor maps

Важно!

Службы Creator Azure Maps в настоящее время доступны в общедоступной предварительной версии.Azure Maps Creator services are currently in public preview. Эта предварительная версия предоставляется без соглашения об уровне обслуживания и не рекомендована для использования рабочей среде.This preview version is provided without a service level agreement, and it's not recommended for production workloads. Некоторые функции могут не поддерживаться или их возможности могут быть ограничены.Certain features might not be supported or might have constrained capabilities. Дополнительные сведения см. в статье Дополнительные условия использования предварительных выпусков Microsoft Azure.For more information, see Supplemental Terms of Use for Microsoft Azure Previews.

Служба состояния признаков Azure Maps Creator позволяет применять стили на основе динамических свойств признаков схем помещений.Azure Maps Creator Feature State service lets you apply styles based on the dynamic properties of indoor map data features. Например, можно отобразить конференц-залы в определенном цвете в зависимости от состояния заполнения.For example, you can render facility meeting rooms with a specific color to reflect occupancy status. В этой статье мы покажем, как динамически преобразовывать для просмотра признаки схемы с помощью службы состояния признаков и веб-модуля схем помещений.In this article, we'll show you how to dynamically render indoor map features with the Feature State service and the Indoor Web Module.

Предварительные требованияPrerequisites

  1. Создайте учетную запись службы Azure Maps.Create an Azure Maps account
  2. Получите первичный ключ подписки, который иногда называется первичным ключом или ключом подписки.Obtain a primary subscription key, also known as the primary key or the subscription key.
  3. Создание ресурса создателя (Предварительная версия)Create a Creator (Preview) resource
  4. Скачайте пример пакета рисунков.Download the sample Drawing package.
  5. Создайте схему помещения, чтобы получить tilesetId и statesetId.Create an indoor map to obtain a tilesetId and statesetId.
  6. Выполните сборку веб-приложения по инструкциям, описанным в статье Использование модуля схем помещений.Build a web application by following the steps in How to use the Indoor Map module.

В этом руководстве используется приложение Postman, но вы можете выбрать другую среду разработки API.This tutorial uses the Postman application, but you may choose a different API development environment.

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

После выполнения предварительных требований у вас должно быть простое веб-приложение, настроенное с использованием ключа подписки, tilesetId и statesetId.Once you complete the prerequisites, you should have a simple web application configured with your subscription key, tilesetId, and statesetId.

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

Для реализации динамического стиля, на признак, такой как конференц-зал или переговорная, нужно ссылаться по его идентификатору (id).To implement dynamic styling, a feature, such as a meeting or conference room, must be referenced by its feature id. Используя значение id признака, можно обновить его динамическое свойство или состояние.You'll use the feature id to update the dynamic property or state of that feature. Для просмотра признаков, определенных в наборе данных, можно использовать один из следующих методов.To view the features defined in a dataset, you can use one of the following methods:

  • API WFS (Web Feature Service).WFS API (Web Feature Service). Наборы данных можно запрашивать с помощью API WFS.Datasets can be queried using the WFS API. WFS соответствует признакам API Открытого геопространственного консорциума.WFS follows the Open Geospatial Consortium API Features. API WFS удобно использовать для запросов к признакам в наборе данных.The WFS API is helpful for querying features within a dataset. Например, WFS можно использовать для поиска всех конференц-залов среднего размера на конкретном этаже здания.For example, you can use WFS to find all mid-size meeting rooms of a given facility and floor level.

  • Реализуйте настроенный код, позволяющий выбирать признаки на схеме с помощью веб-приложения.Implement customized code that allows a user to select features on a map using your web application. В этой статье мы будем использовать этот вариант.In this article, we'll make use of this option.

Следующий скрипт реализует событие щелчка мыши.The following script implements the mouse click event. Код извлекает значение id признака на основе точки, в которой находился указатель при щелчке.The code retrieves the feature id based on the clicked point. В приложении можно вставить код под блоком кода Indoor Manager.In your application, you can insert the code below your Indoor Manager code block. Запустите приложение и проверьте консоль, чтобы получить значение id признака в точке, в которой находился указатель при щелчке.Run your application and check the console to obtain the feature id of the clicked point.

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

    var result = features.reduce(function (ids, feature) {
        if (feature.layer.id == "indoor_unit_office") {
            console.log(feature);
        }
    }, []);
});

По инструкциям из руководства Создание схемы помещения вы настроили набор состояний функции, чтобы принимать обновления состояния для occupancy.The Create an indoor map tutorial configured the feature stateset to accept state updates for occupancy.

В следующем разделе для офиса UNIT26 будет задано состояние заполнения true.In the next section, we'll set the occupancy state of office UNIT26 to true. А для офиса UNIT27 будет задано состояние false.while office UNIT27 will be set to false.

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

Теперь мы обновим состояние двух офисов (UNIT26 и UNIT27):We'll now update the state of the two offices, UNIT26 and UNIT27:

  1. В приложении Postman выберите New (Создать).In the Postman application, select New. В окне Create New (Создание) выберите Request (Запрос).In the Create New window, select Request. Введите имя запроса и выберите коллекцию.Enter a Request name and select a collection. Щелкните Сохранить.Click Save

  2. Чтобы обновить состояние, используйте API обновления состояний признаков.Use the Feature Update States API to update the state. Передайте идентификатор набора состояний и UNIT26 для одного из двух офисов.Pass the stateset ID, and UNIT26 for one of the two units. Добавьте ключ подписки на Azure Maps.Append your Azure Maps subscription key. Ниже приведен URL-адрес запроса POST для обновления состояния:Here's the URL of a POST request to update the state:

    https://atlas.microsoft.com/featureState/state?api-version=1.0&statesetID={statesetId}&featureID=UNIT26&subscription-key={Azure-Maps-Primary-Subscription-key}
    
  3. В заголовках запроса POST установите для параметра Content-Type значение application/json.In the Headers of the POST request, set Content-Type to application/json. В тексте запроса POST напишите следующий код JSON с обновлениями признаков.In the BODY of the POST request, write the following JSON with the feature updates. Обновление будет сохранено только в том случае, если отметка времени публикации будет позже метки времени, используемой в предыдущих запросах на обновление состояния признака для того же значения ID признака.The update will be saved only if the posted time stamp is after the time stamp used in previous feature state update requests for the same feature ID. Передайте значение occupied для параметра keyName, чтобы обновить его.Pass the "occupied" keyName to update its value.

    {
        "states": [
            {
                "keyName": "occupied",
                "value": true,
                "eventTimestamp": "2019-11-14T17:10:20"
            }
        ]
    }
    
  4. Повторите шаги 2 и 3 для UNIT27, используя следующий код JSON.Redo step 2 and 3 using UNIT27, with the following JSON.

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

Визуализация динамических стилей на схемеVisualize dynamic styles on a map

Веб-приложение, которое вы ранее открыли в браузере, теперь должно отображать обновленное состояние для признаков схемы.The web application you previously opened in a browser should now reflect the updated state of the map features. Объект UNIT27(151) должен отображаться зеленым цветом, а UNIT26(157) — красным.UNIT27(151) should appear green and UNIT26(157) should appear red.

Свободное помещение выделено зеленым, а занятое помещение — красным

Дальнейшие действияNext steps

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

См. ссылки на API, упомянутые в этой статье:See to the references for the APIs mentioned in this article:

Data — Upload Preview (Данные — предварительная версия отправки)Data Upload