Использование модуля схем помещений Azure MapsUse the Azure Maps Indoor Maps module

Важно!

Службы 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.

Веб-пакет SDK Azure Maps включает модуль схем помещений.The Azure Maps Web SDK includes the Azure Maps Indoor module. Модуль Azure Mapsной части позволяет визуализировать карты, созданные в службах Azure Maps Creator (Предварительная версия)The Azure Maps Indoor module allows you to render indoor maps created in Azure Maps Creator services (Preview)

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

  1. Создайте учетную запись службы Azure MapsMake an Azure Maps account
  2. Создание ресурса создателя (Предварительная версия)Create a Creator (Preview) resource
  3. Получите первичный ключ подписки, который иногда называется первичным ключом или ключом подписки.Obtain a primary subscription key, also known as the primary key or the subscription key.
  4. Получите tilesetId и statesetId, выполнив инструкции из руководства по созданию схем помещений.Get a tilesetId and a statesetId by completing the tutorial for creating Indoor maps. Эти идентификаторы вам потребуются для отрисовки схем помещений в модуле схем помещений Azure Maps.You'll need to use these identifiers to render indoor maps with the Azure Maps Indoor Maps module.

Внедрение модуля схем помещенийEmbed the Indoor Maps module

Вы можете установить и внедрить модуль схем помещений Azure Maps одним из двух способов.You can install and embed the Azure Maps Indoor module in one of two ways.

Чтобы использовать для модуля схем помещений Azure Maps глобально размещенную версию сети доставки содержимого Azure, добавьте ссылки на следующие ресурсы JavaScript и таблиц стилей в элементе <head> HTML-файла:To use the globally hosted Azure Content Delivery Network version of the Azure Maps Indoor module, reference the following JavaScript and Style Sheet references in the <head> element of the HTML file:

<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>

Или же скачайте модуль схем помещений Azure Maps.Or, you can download the Azure Maps Indoor module. Модуль схем помещений Azure Maps содержит клиентскую библиотеку для доступа к службам Azure Maps.The Azure Maps Indoor module contains a client library for accessing Azure Maps services. Выполните следующие действия, чтобы установить и загрузить модуль схем помещений в веб-приложение:Follow the steps below to install and load the Indoor module into your web application.

  1. Установите пакет Azure-Maps-помещений.Install the azure-maps-indoor package.

    >npm install azure-maps-indoor
    
  2. Укажите ссылки на ресурсы JavaScript и таблиц стилей для модуля схем помещений Azure Maps в элементе <head> HTML-файла:Reference the Azure Maps Indoor module JavaScript and Style Sheet in the <head> element of the HTML file:

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

Создайте экземпляр объекта Map.Instantiate the Map object

Для начала создайте объект Map.First, create a Map object. Объект Map мы применим на следующем шаге, чтобы создать экземпляр объекта диспетчера схем помещений.The Map object will be used in the next step to instantiate the Indoor Manager object. В приведенном ниже коде показано, как создать экземпляр объекта Map.The code below shows you how to instantiate the Map object:

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

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's bounds
  style: "blank",
  view: 'Auto',
  authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,
});

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

Чтобы загрузить фрагменты карты помещений и стили карты для этих фрагментов, вам потребуется экземпляр диспетчера схем помещений.To load the indoor tilesets and map style of the tiles, you must instantiate the Indoor Manager. Создайте экземпляр диспетчера схем помещений, предоставив ему объект Map и соответствующий tilesetId.Instantiate the Indoor Manager by providing the Map object and the corresponding tilesetId. Если вам нужна поддержка динамических стилей карты, передайте также statesetId.If you wish to support dynamic map styling, you must pass the statesetId. В имени переменной statesetId учитывается регистр.The statesetId variable name is case-sensitive. Вы получите такой код JavaScript, как показано ниже.Your code should like the JavaScript below.

const tilesetId = "";
const statesetId = "";

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

Чтобы разрешить получение предоставляемых данных о состоянии, передайте statesetId и вызовите indoorManager.setDynamicStyling(true).To enable polling of state data you provide, you must provide the statesetId and call indoorManager.setDynamicStyling(true). Опрос для получения данных о состоянии позволяет динамически обновлять состояние динамических свойств (состояний).Polling state data lets you dynamically update the state of dynamic properties or states. Например, для компонента комнаты может существовать динамическое свойство (состояние) с именем occupancy.For example, a feature such as room can have a dynamic property (state) called occupancy. Приложение может выполнять опрос для получения сведений об изменениях состояния, чтобы отражать изменения на визуальной карте.Your application may wish to poll for any state changes to reflect the change inside the visual map. Следующий пример кода демонстрирует поддержку опроса состояний:The code below shows you how to enable state polling:

const tilesetId = "";
const statesetId = "";

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

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

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

Элемент управления Indoor Level Picker (Выбор этажа помещения) позволяет переключать уровни на отображаемой карте.The Indoor Level Picker control allows you to change the level of the rendered map. Для необязательного элемента управления Indoor Level Picker (Выбор этажа помещения) можно создать экземпляр через диспетчер схем помещений.You can optionally initialize the Indoor Level Picker control via the Indoor Manager. В следующем примере кода инициализируется средство выбора этажа:Here's the code to initialize the level control picker:

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

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

Модуль схем помещений Azure Maps поддерживает события объекта Map.The Azure Maps Indoor module supports Map object events. Прослушиватели событий объекта Map вызываются при изменении этажа или строения.The Map object event listeners are invoked when a level or facility has changed. Если вы хотите выполнять определенный код при изменении этажа и (или) строения, поместите этот код в прослушиватель событий.If you want to run code when a level or a facility have changed, place your code inside the event listener. Приведенный ниже пример кода демонстрирует, как добавить прослушиватели событий в объект Map.The code below shows how event listeners can be added to the Map object.

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, соответственно.The eventData variable holds information about the level or facility that invoked the levelchanged or facilitychanged event, respectively. При изменении этажа объект eventData будет содержать facilityId, новое значение levelNumber и другие метаданные.When a level changes, the eventData object will contain the facilityId, the new levelNumber, and other metadata. При изменении строения объект eventData будет содержать новые значения facilityId и levelNumber, а также другие метаданные.When a facility changes, the eventData object will contain the new facilityId, the new levelNumber, and other metadata.

Пример Использование модуля схем помещенийExample: Use the Indoor Maps Module

В этом примере показано, как использовать в приложении модуль схем помещений Azure Maps.This example shows you how to use the Azure Maps Indoor module in your web application. Несмотря на ограниченные возможности этого примера, он охватывает все основные сведения, позволяющие начать работу с модулем схем помещений Azure Maps.Although the example is limited in scope, it covers the basics of what you need to get started using the Azure Maps Indoor module. После этих этапов приводится полный готовый код HTML.The complete HTML code is below these steps.

  1. С помощью параметра сети доставки содержимого Azure установите модуль схем помещений Azure Maps.Use the Azure Content Delivery Network option to install the Azure Maps Indoor module.

  2. Создание HTML-файлаCreate a new HTML file

  3. В заголовке HTML-файла укажите ссылки на ресурсы JavaScript и таблиц стилей для модуля схем помещений Azure Maps.In the HTML header, reference the Azure Maps Indoor module JavaScript and style sheet styles.

  4. Инициализируйте объект Map.Initialize a Map object. Объект Map поддерживает следующие параметры:The Map object supports the following options:

    • Subscription key содержит первичный ключ подписки на Azure Maps.Subscription key is your Azure Maps primary subscription key.
    • center определяет широту и долготу, соответствующие центру схемы помещения.center defines a latitude and longitude for your indoor map center location. Задайте значение center, если не будет указано значение bounds.Provide a value for center if you don't want to provide a value for bounds. Поддерживается следующий формат center: [-122.13315, 47.63637].Format should appear as center: [-122.13315, 47.63637].
    • bounds определяет наименьший возможный прямоугольник, который охватывает все данные элементов карты.bounds is the smallest rectangular shape that encloses the tileset map data. Задайте значение bounds, если не будет указано значение center.Set a value for bounds if you don't want to set a value for center. Чтобы получить сведения о границах карты, вызовите API списка фрагментов карты.You can find your map bounds by calling the Tileset List API. API списка фрагментов карты возвращает bbox, значение которого можно анализировать и присваивать bounds.The Tileset List API returns the bbox, which you can parse and assign to bounds. Формат должен выглядеть следующим образом bounds : [# Западная, # Южный, # Восток, # Север].Format should appear as bounds: [# west, # south, # east, # north].
    • style позволяет установить цвет фона.style allows you to set the color of the background. Чтобы отобразить белый фон, определите для style значение "blank".To display a white background, define style as "blank".
    • zoom позволяет указать минимальный и максимальный уровни масштабирования для схемы.zoom allows you to specify the min and max zoom levels for your map.
  5. Теперь создайте модуль диспетчера схем помещений.Next, create the Indoor Manager module. Назначьте для схемы помещения Azure Maps значение tilesetId. При желании добавьте statesetId.Assign the Azure Maps Indoor tilesetId, and optionally add the statesetId.

  6. Создайте экземпляр элемента управления Indoor Level Picker (Выбор этажа помещения).Instantiate the Indoor Level Picker control.

  7. Добавьте прослушиватели событий объекта Map.Add Map object event listeners.

Теперь файл должен содержать примерно такой HTML-код:Your file should now look similar to the HTML below.

<!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, //level picker
        tilesetId,
        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>

Чтобы просмотреть созданную схему, загрузите ее в веб-браузер.To see your indoor map, load it into a web browser. Она должна выглядеть так, как на изображении ниже.It should appear like the image below. Если щелкнуть компонент лестницы, справа в верхнем углу появится средство выбора этажа.If you click on the stairwell feature, the level picker will appear in the upper right-hand corner.

Изображение схемы помещения

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

Ознакомьтесь с интерфейсами API, которые имеют отношение к модулю схем помещений Azure Maps:Read about the APIs that are related to the Azure Maps Indoor module:

Дополнительные сведения о добавлении данных к схеме:Learn more about how to add more data to your map: