Použití modulu Azure Mapy Indoor Mapy s vlastními styly (Preview)

Článek
01/04/2024

Sada Azure Mapy Web SDK obsahuje vnitřní Mapy modul, který umožňuje vykreslovat vnitřní mapy vytvořené ve službách Azure Mapy Creator.

Když vytvoříte vnitřní mapu pomocí Azure Mapy Creatoru, použijí se výchozí styly. Azure Mapy Creator teď také podporuje přizpůsobení stylů různých prvků vnitřních map pomocí rozhraní REST API stylu nebo editoru vizuálního stylu.

Požadavky

Účet Azure Mapy
Prostředek Azure Mapy Creator
Klíč předplatného
Alias nebo ID konfigurace mapy Další informace najdete v tématu rozhraní API pro konfiguraci mapování.

Tip

Pokud jste k vytvoření vnitřní mapy nikdy nepoužívali Azure Mapy Creator, může vám pomoct kurz vytvoření vnitřních map Pomocí Creatoru.

Konfigurace alias mapy (nebomapConfigurationId) se vyžaduje k vykreslení vnitřních map s vlastními styly prostřednictvím modulu Azure Mapy Indoor Mapy.

Vložení modulu Vnitřní Mapy

Modul Azure Mapy Indoor můžete nainstalovat a vložit jedním ze dvou způsobů.

Pokud chcete použít globálně hostované verze Azure Content Delivery Network modulu Azure Mapy Indoor, projděte si následující script odkazy a stylesheet odkazy v <head> elementu souboru 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>

Nebo si můžete stáhnout modul Azure Mapy Indoor. Modul Azure Mapy Indoor obsahuje klientskou knihovnu pro přístup ke službám Azure Mapy. Následující kroky ukazují, jak nainstalovat a načíst modul Indoor do webové aplikace.

Nainstalujte nejnovější balíček azure-maps-indoor.
```
>npm install azure-maps-indoor
```
Naimportujte JavaScript modulu Azure Mapy Indoor do zdrojového souboru:
```
import * as indoor from "azure-maps-indoor";
```
Pro správné zobrazení různých ovládacích prvků byste také museli vložit šablonu stylů CSS. Pokud ke sbalování závislostí a zabalení kódu používáte javascriptový bundler, přečtěte si dokumentaci k vašemu bundleru, jak se to dělá. U webpacku se obvykle provádí prostřednictvím kombinace style-loader a css-loader dokumentace, která je k dispozici ve stylu zavaděče.

Začněte instalací zavaděče stylu a zavaděče css:
```
npm install --save-dev style-loader css-loader
```
Ve zdrojovém souboru importujte atlas-indoor.min.css:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Potom přidejte zavaděče do části pravidel modulu konfigurace webpacku:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Další informace najdete v tématu Použití balíčku npm pro ovládací prvek mapy Azure Mapy.

Nastavení domény a vytvoření instance objektu Map

Nastavte doménu mapy s předponou odpovídající umístění prostředku Tvůrce, USEUnebo například:

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

Další informace najdete v geografickém rozsahu služby Azure Mapy.

Dále vytvořte instanci objektu Mapy s objektem konfigurace mapy nastaveným na aliasmapConfigurationId nebo vlastnost vaší konfigurace mapy a pak nastavte styleAPIVersion hodnotu 2023-03-01-preview.

Objekt Map se použije v dalším kroku k vytvoření instance objektu Indoor Manager. Následující kód ukazuje, jak vytvořit instanci objektu Map s mapConfigurationstyleAPIVersion a mapovat sadu domén:

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

Vytvoření instance interiérového manažera

Pokud chcete načíst styl interiérové mapy dlaždic, musíte vytvořit instanci Interiérového manažera. Vytvořte instanci Vnitřní správce zadáním objektu Map. Pokud chcete podporovat dynamické styly mapy, musíte předat statesetId. V statesetId názvu proměnné se rozlišují malá a velká písmena. Váš kód by měl vypadat jako následující fragment kódu JavaScriptu:

const statesetId = "<statesetId>";

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

Pokud chcete povolit dotazování zadaných stavových dat, musíte zadat statesetId a zavolat indoorManager.setDynamicStyling(true). Data stavu dotazování umožňují dynamicky aktualizovat stav dynamických vlastností nebo stavů. Například funkce, jako je například místnost, může mít dynamickou vlastnost (stav) volanou occupancy. Vaše aplikace se může chtít dotazovat na jakékoli změny stavu , aby odrážely změnu v mapě vizuálu. Následující kód ukazuje, jak povolit dotazování stavu:

const statesetId = "<statesetId>";

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

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

Ovládací prvek pro výběr vnitřní úrovně

Ovládací prvek Výběr vnitřní úrovně umožňuje změnit úroveň vykreslené mapy. Volitelně můžete inicializovat ovládací prvek pro výběr vnitřní úrovně pomocí Správce interiéru. Tady je kód pro inicializaci výběru ovládacího prvku úrovně:

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

Vnitřní akce

Modul Azure Mapy Indoor podporuje události mapového objektu. Naslouchací procesy událostí objektu Map se volají při změně úrovně nebo zařízení. Pokud chcete spustit kód při změně úrovně nebo zařízení, umístěte kód do naslouchacího procesu událostí. Následující kód ukazuje, jak lze do objektu Map přidat naslouchací procesy událostí.

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

Proměnná eventData obsahuje informace o úrovni nebo zařízení, která vyvolala levelchanged událost facilitychanged . Když se změní úroveň, eventData objekt obsahuje facilityId, nový levelNumbera další metadata. Když se objekt změní, eventData obsahuje nový facilityId, nový levelNumbera další metadata.

Příklad: vlastní styl: využívání konfigurace mapy ve službě WebSDK (Preview)

Když vytvoříte vnitřní mapu pomocí Azure Mapy Creatoru, použijí se výchozí styly. Azure Mapy Creator teď také podporuje přizpůsobení interiérových stylů. Další informace najdete v tématu Vytváření vlastních stylů pro vnitřní mapy. Tvůrce také nabízí editor vizuálního stylu.

Pokud chcete vytvořit vlastní styly, postupujte podle článku Vytvoření vlastních stylů pro vnitřní mapy. Po uložení změn si poznamenejte alias konfigurace mapy.
Pomocí možnosti Azure Content Delivery Network nainstalujte modul Azure Mapy Indoor.
Vytvoření nového souboru HTML
V hlavičce HTML odkazujte na JavaScript a šablonu stylů modulu Azure Mapy Indoor.
Nastavte doménu mapy s předponou odpovídající umístění prostředku Tvůrce: atlas.setDomain('us.atlas.microsoft.com'); pokud byl prostředek Creator vytvořen v oblasti USA nebo atlas.setDomain('eu.atlas.microsoft.com'); pokud byl prostředek Tvůrce vytvořen v oblasti EU.
Inicializace objektu Map Objekt Map podporuje následující možnosti:
- Subscription keyje váš klíč předplatného Azure Mapy.
- center definuje zeměpisnou šířku a délku pro umístění centra vnitřní mapy. Zadejte hodnotu, center pokud nechcete zadat hodnotu pro bounds. Formát by měl vypadat takto center: [-122.13315, 47.63637].
- bounds je nejmenší obdélníkový obrazec, který ohraničuje data mapy sady dlaždic. Nastavte hodnotu pro bounds , pokud nechcete nastavit hodnotu pro center. Hranice mapy můžete najít voláním rozhraní API seznamu dlaždic. Rozhraní API seznamu sad dlaždic vrátí bboxrozhraní API , které můžete analyzovat a přiřazovat bounds. Formát by se měl zobrazit jako bounds: [# west, # south, # east, # north].
- mapConfiguration ID nebo alias konfigurace mapy, který definuje vlastní styly, které chcete zobrazit na mapě, použijte ID konfigurace mapy nebo alias z kroku 1.
- style umožňuje nastavit počáteční styl z konfigurace mapy, která se zobrazí. Pokud není nastavená, použije se výchozí konfigurace konfigurace mapování odpovídající stylu.
- zoom umožňuje zadat minimální a maximální úroveň přiblížení pro vaši mapu.
- styleAPIVersion: pass '2023-03-01-preview' (což se vyžaduje, když je vlastní styl ve verzi Public Preview)
Dále vytvořte modul Indoor Manager s ovládacím prvku Výběr vnitřní úrovně, který se vytvoří jako součást možností Indoor Manageru, volitelně nastavit statesetIdmožnost.
Přidání naslouchacích procesů událostí objektu Mapy

Tip

Na konfiguraci mapy se odkazuje pomocí mapConfigurationIdalias Pokaždé, když upravíte nebo změníte konfiguraci mapy, změní se jeho ID, ale jeho alias zůstane stejný. Doporučujeme odkazovat na konfiguraci mapy podle jejího aliasu ve vašich aplikacích. Další informace najdete v článku o konfiguraci mapy.

Soubor by teď měl vypadat nějak takto:

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

Pokud chcete zobrazit vnitřní mapu, načtěte ji do webového prohlížeče. Měl by vypadat jako na následujícím obrázku. Pokud vyberete funkci schodiště, zobrazí se v pravém horním rohu výběr úrovně.

indoor map image