použití modulu Azure Maps interiér Mapy

Článek
09/03/2021
6 min ke čtení

sada Azure Maps Web SDK obsahuje modul Azure Maps interiéru . modul vnitřních Azure Maps umožňuje vykreslit vnitřní mapy vytvořené v rámci služby Azure Maps Creator.

Požadavky

vytvořit účet Azure Maps
Vytvoření prostředku autora
Získejte primární klíč předplatného, označovaný také jako primární klíč nebo klíč předplatného.
Získejte tilesetId a a statesetId doplněním kurzu vytváření vnitřních map. tyto identifikátory budete muset použít k vykreslování vnitřních map pomocí modulu Azure Maps interiér Mapy.

vložení modulu pro vnitřní Mapy

modul vnitřního Azure Maps můžete nainstalovat a vložit jedním ze dvou způsobů.

pokud chcete použít globálně hostovanou verzi Content Delivery Network Azure Azure Maps modulu vnitřního prostředí, odkazujte na následující odkazy na šablonu javascriptu a stylů v <head> elementu souboru HTML:

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

nebo si můžete stáhnout Azure Maps modul vnitřního softwaru. modul vnitřních Azure Maps obsahuje klientskou knihovnu pro přístup ke službě Azure Maps services. Pomocí následujících kroků nainstalujete a načtete modul pro vnitřní prostředí do své webové aplikace.

Nainstalujte balíček Azure-Maps-interiér.
```
>npm install azure-maps-indoor
```

odkaz na Azure Maps modul vnitřních souborů a šablonu stylů v <head> prvku souboru HTML:

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

Vytvoření instance objektu map

Nejprve vytvořte objekt mapy. Objekt map se použije v dalším kroku pro vytvoření instance objektu správce vnitřních objektů. Následující kód ukazuje, jak vytvořit instanci objektu mapy:

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

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13203, 47.63645],
  //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,
});

Vytvoření instance Správce vnitřních

Chcete-li načíst vnitřní tilesets a styl mapy dlaždic, je nutné vytvořit instanci správce vnitřních verzí. Vytvořte instanci správce vnitřních objektů tak, že poskytnete objekt map a odpovídající tilesetId . Pokud chcete podporovat styl dynamické 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 JavaScript níže.

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

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

Chcete-li povolit cyklické dotazování na data stavu, je nutné zadat statesetId volání a indoorManager.setDynamicStyling(true) . Data o stavu cyklického 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 zavolanou dynamickou vlastnost (stav) occupancy . Vaše aplikace se může chtít dotázat na všechny změny stavu , aby odrážely změnu ve vizuální mapě. Následující kód ukazuje, jak povolit cyklické dotazování stavu:

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

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

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

geografické Nastavení (volitelné)

V tomto průvodci se předpokládá, že jste vytvořili službu Creator v USA. Pokud ano, můžete tuto část přeskočit. Pokud se ale vaše služba Creator vytvořila v Evropě, přidejte následující kód:

  indoorManager.setOptions({ geography: 'eu' });.

Ovládací prvek Výběr úrovně vnitřníchy

Ovládací prvek pro výběr na úrovni interiéru umožňuje změnit úroveň vykreslené mapy. Volitelnou inicializaci ovládacího prvku pro výběr na úrovni interiéru můžete provést pomocí správce vnitřních verzí. Zde 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í události

modul vnitřních Azure Maps podporuje události objektu Map . Naslouchací procesy událostí objektu mapy jsou vyvolány, když došlo ke změně úrovně nebo zařízení. Pokud chcete spustit kód po změně úrovně nebo zařízení, umístěte kód do naslouchacího procesu události. 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);
});

eventDataProměnná uchovává informace o úrovni nebo zařízení, které vyvolalo levelchanged facilitychanged událost nebo, v uvedeném pořadí. Když dojde ke změně úrovně, bude eventData objekt obsahovat facilityId metadata, nová levelNumber a další metadata. Když se zařízení změní, eventData objekt bude obsahovat nové facilityId , novou levelNumber a další metadata.

příklad: použití modulu vnitřního Mapy

v tomto příkladu se dozvíte, jak ve webové aplikaci použít modul vnitřníchy Azure Maps . i když je v oboru omezený příklad, zahrnuje základní informace o tom, co potřebujete, abyste mohli začít používat modul Azure Maps vnitřních . Úplný kód HTML je pod tímto postupem.

pomocí možnosti Azure Content Delivery Network nainstalujte modul Azure Maps interiéru .
Vytvořit nový soubor HTML
v záhlaví HTML, odkazujte na Azure Maps a styly šablon stylů v modulu interiéru .
Inicializuje objekt mapy. Objekt map podporuje následující možnosti:
- Subscription keyje váš Azure Maps primární klíč předplatného.
- center definuje zeměpisnou šířku a délku pro umístění vašeho centra mapy na vnitřních místech. Zadejte hodnotu pro, center Pokud nechcete zadat hodnotu pro bounds . Formát by měl vypadat takto center : [-122,13315, 47,63637].
- bounds je nejmenší pravoúhlý tvar, který obklopuje data mapy TILESET. Nastavte hodnotu pro bounds , pokud nechcete nastavit hodnotu pro center . Mapu vazeb můžete najít voláním rozhraní API pro seznam TILESET. Rozhraní TILESET vypíše rozhraní API bbox , které můžete analyzovat a přiřadit k bounds . Formát by měl vypadat takto bounds : [# západ, # jih, # východ, # sever].
- style umožňuje nastavit barvu pozadí. Chcete-li zobrazit bílé pozadí, definujte style hodnotu "prázdné".
- zoom umožňuje zadat minimální a maximální úroveň přiblížení pro mapu.
Pak vytvořte modul správce vnitřních . přiřaďte Azure Maps interiér tilesetId a volitelně přidejte statesetId .
Vytvořte instanci ovládacího prvku pro výběr na úrovni interiéru .
Přidejte naslouchací procesy událostí objektu mapy .

Váš soubor by teď měl vypadat podobně jako v následujícím formátu HTML.

<!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: levelControl, //level picker
        tilesetId: tilesetId,
        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 mapu vnitřních souborů, načtěte ji do webového prohlížeče. Měl by vypadat podobně jako na obrázku níže. Pokud kliknete na funkci stairwell, Výběr úrovně se zobrazí v pravém horním rohu.

Obrázek mapy interiéru