Использование модуля azure Карты помещений Карты с пользовательскими стилями (предварительная версия)

Статья
01/04/2024

Веб-пакет SDK для Azure Карты включает модуль Карты помещений, позволяющий отображать карты помещений, созданные в службах Azure Карты Creator.

При создании крытый карты с помощью Azure Карты Creator применяются стили по умолчанию. Azure Карты Creator теперь поддерживает настройку стилей различных элементов ваших карт помещений с помощью REST API стилей или редактора визуального стиля.

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

Учетная запись Azure Карты
Ресурс Создателя Карты Azure
Ключ подписки
Псевдоним конфигурации карты или идентификатор. Дополнительные сведения см. в api конфигурации карты.

Совет

Если вы никогда не использовали Azure Карты Creator для создания крытый карты, вы можете найти создателя, чтобы создать учебник по картам помещений.

Конфигурация alias карты (илиmapConfigurationId) необходима для отрисовки карт помещений с пользовательскими стилями с помощью модуля azure Карты помещений Карты.

Внедрение модуля схем помещений

Вы можете установить и внедрить модуль схем помещений Azure Maps одним из двух способов.

Чтобы использовать глобально размещенную версию azure сеть доставки содержимого модуля Azure Карты помещении, см. следующие script и stylesheet ссылки в <head> элементе HTML-файла:

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

Или же скачайте модуль схем помещений Azure Maps. Модуль схем помещений Azure Maps содержит клиентскую библиотеку для доступа к службам Azure Maps. Ниже показано, как установить и загрузить модуль "Крытый" в веб-приложение.

Установите последний пакет azure-maps-indoor.
```
>npm install azure-maps-indoor
```
Импортируйте javaScript модуля Azure Карты помещений в исходном файле:
```
import * as indoor from "azure-maps-indoor";
```
Кроме того, необходимо внедрить таблицу стилей CSS для правильного отображения различных элементов управления. Если вы используете пакет JavaScript для упаковки зависимостей и упаковки кода, ознакомьтесь с документацией пакета по его завершении. Для Webpack обычно это делается с помощью сочетания style-loader и css-loader документации, доступной в стиле-загрузчике.

Чтобы начать, установите загрузчик стилей и css-loader:
```
npm install --save-dev style-loader css-loader
```
В исходном файле импортируйте atlas-indoor.min.css:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Затем добавьте загрузчики в часть правил модуля конфигурации Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Дополнительные сведения см. в статье "Использование пакета npm для управления картой Azure Карты".

Задайте домен и создайте экземпляр объекта Map

Задайте домен карты с префиксом, соответствующим расположению ресурса Creator, US или EU, например:

atlas.setDomain('us.atlas.microsoft.com');

Дополнительные сведения см. в статье о географическом область службы Azure Карты.

Затем создайте экземпляр объекта Map с объектом конфигурации карты, заданным alias для конфигурации карты или mapConfigurationId свойством, а затем задайте значение styleAPIVersion2023-03-01-preview.

Объект Map мы применим на следующем шаге, чтобы создать экземпляр объекта диспетчера схем помещений. В следующем коде показано, как создать экземпляр объекта Map с styleAPIVersionmapConfigurationнабором доменов и сопоставить его.

const subscriptionKey = "<Your Azure Maps Subscription Key>";
const region = "<Your Creator resource region: us or eu>"  
const mapConfiguration = "<map configuration alias or ID>"  
atlas.setDomain(`${region}.atlas.microsoft.com`);

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
  authOptions: { 
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,

  mapConfiguration: mapConfiguration,
  styleAPIVersion: '2023-03-01-preview'
});

Создание экземпляра диспетчера схем помещений

Чтобы загрузить стиль схемы помещений плиток, необходимо создать экземпляр диспетчера помещений. Создайте экземпляр диспетчера помещений, предоставив объект Map. Если вам нужна поддержка динамических стилей карты, передайте также statesetId. В имени переменной statesetId учитывается регистр. Код должен выглядеть следующим фрагментом кода JavaScript:

const statesetId = "<statesetId>";

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

Чтобы разрешить получение предоставляемых данных о состоянии, передайте statesetId и вызовите indoorManager.setDynamicStyling(true). Опрос для получения данных о состоянии позволяет динамически обновлять состояние динамических свойств (состояний). Например, для компонента комнаты может существовать динамическое свойство (состояние) с именем occupancy. Приложение может выполнять опрос для получения сведений об изменениях состояния, чтобы отражать изменения на визуальной карте. В следующем коде показано, как включить опрос состояния:

const statesetId = "<statesetId>";

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

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

Элемент управления Indoor Level Picker (Выбор этажа помещения)

Элемент управления Indoor Level Picker (Выбор этажа помещения) позволяет переключать уровни на отображаемой карте. Для необязательного элемента управления Indoor Level Picker (Выбор этажа помещения) можно создать экземпляр через диспетчер схем помещений. В следующем примере кода инициализируется средство выбора этажа:

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

События схемы помещений

Модуль схем помещений Azure Maps поддерживает события объекта Map. Прослушиватели событий объекта Map вызываются при изменении этажа или строения. Если вы хотите выполнять определенный код при изменении этажа и (или) строения, поместите этот код в прослушиватель событий. Приведенный ниже пример кода демонстрирует, как добавить прослушиватели событий в объект Map.

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

Переменная eventData содержит сведения об этаже или строении, которые вызвали событие levelchanged или facilitychanged, соответственно. При изменении eventData уровня объект содержит facilityIdновые levelNumberи другие метаданные. При изменении eventData объекта объект содержит новые, новые facilityIdlevelNumberи другие метаданные.

Пример: настраиваемая стилизация: использование конфигурации карты в WebSDK (предварительная версия)

При создании крытый карты с помощью Azure Карты Creator применяются стили по умолчанию. Azure Карты Creator теперь также поддерживает настройку стилей помещений. Дополнительные сведения см. в статье "Создание пользовательских стилей для карт помещений". Creator также предлагает редактор визуального стиля.

Чтобы создать пользовательские стили, следуйте инструкциям по созданию пользовательских стилей в помещении. Запишите псевдоним конфигурации карты после сохранения изменений.
С помощью параметра сети доставки содержимого Azure установите модуль схем помещений Azure Maps.
Создание HTML-файла
В заголовке HTML см. таблицу стилей и таблицу стилей модуля Azure Карты помещении.
Задайте домен карты с префиксом, соответствующим расположению ресурса Creator: atlas.setDomain('us.atlas.microsoft.com'); если ресурс Creator был создан в регионе США или atlas.setDomain('eu.atlas.microsoft.com'); был создан ресурс Creator в регионе ЕС.
Инициализируйте объект Map. Объект Map поддерживает следующие параметры:
- Subscription key— это ключ подписки Azure Карты.
- center определяет широту и долготу, соответствующие центру схемы помещения. Задайте значение center, если не будет указано значение bounds. Поддерживается следующий формат center: [-122.13315, 47.63637].
- bounds определяет наименьший возможный прямоугольник, который охватывает все данные элементов карты. Задайте значение bounds, если не будет указано значение center. Чтобы получить сведения о границах карты, вызовите API списка фрагментов карты. API списка фрагментов карты возвращает bbox, значение которого можно анализировать и присваивать bounds. Формат должен выглядеть следующим образом bounds: [# запад, # юг, # восток, # север].
- mapConfiguration Идентификатор или псевдоним конфигурации карты, определяющий настраиваемые стили, которые необходимо отобразить на карте, используйте идентификатор конфигурации карты или псевдоним из шага 1.
- style позволяет задать начальный стиль из отображаемой конфигурации карты. Если этот параметр не задан, используется конфигурация конфигурации карты по умолчанию.
- zoom позволяет указать минимальный и максимальный уровни масштабирования для схемы.
- styleAPIVersion: передайте "2023-03-01-preview" (которая требуется, пока пользовательская стилизация находится в общедоступной предварительной версии)
Затем создайте модуль "Крытый диспетчер" с элементом управления "Выбор уровня помещений", созданный в составе параметров диспетчера помещений, при необходимости задайте statesetId этот параметр.
Добавьте прослушиватели событий объекта Map.

Совет

Конфигурация карты ссылается на нее mapConfigurationId с помощью или alias . Каждый раз, когда вы редактируете или изменяете конфигурацию карты, его идентификатор изменяется, но его псевдоним остается неизменным. Рекомендуется ссылаться на конфигурацию карты по его псевдониму в приложениях. Дополнительные сведения см . в статье о конфигурации карты.

Теперь файл должен выглядеть примерно так:

<!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/3/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.css" type="text/css"/>

    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/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 Subscription Key>";
      const mapConfig = "<Your map configuration id or alias>";
      const statesetId = "<Your statesetId>";
      const region = "<Your Creator resource region: us or eu>"    
      atlas.setDomain(`${region}.atlas.microsoft.com`);

      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
        authOptions: { 
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey
        },
        zoom: 19,

        mapConfiguration: mapConfig,
        styleAPIVersion: '2023-03-01-preview'
      });

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

      const indoorManager = new atlas.indoor.IndoorManager(map, {
        levelControl: levelControl, //level picker
        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>

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

indoor map image

Демонстрация динамической карты помещений с доступным исходным кодом см. в статье Creator Indoor Карты в [примерах Карты Azure].

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

Ознакомьтесь с интерфейсами API, которые имеют отношение к модулю схем помещений Azure Maps:

Требования к пакету рисунков

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

Дополнительные сведения о добавлении данных к схеме:

Динамические стили для схем помещений

Примеры кода