Använda modulen Azure Kartor för Kartor inomhus

Artikel
08/28/2021
5 minuter för att läsa

Azure Kartor Web SDK innehåller modulen Azure Kartor Indoor. Med modulen Azure Kartor Indoor kan du rendera inomhuskartor som skapats i Azure Kartor Creator-tjänster.

Förutsättningar

Skapa ett Azure Kartor konto
Skapa en Creator-resurs
Skaffa en primär prenumerationsnyckel, som även kallas primärnyckel eller prenumerationsnyckel.
Hämta en tilesetId och en genom att slutföra statesetId självstudien för att skapa inomhuskartor. Du måste använda dessa identifierare för att rendera inomhuskartor med Azure Kartor modulen Kartor inomhus.

Bädda in modulen Kartor inomhus

Du kan installera och bädda in modulen Azure Kartor Inomhus på något av två sätt.

Om du vill använda den globalt värd-Content Delivery Network Azure Content Delivery Network-versionen av modulen Azure Kartor Indoor refererar du till följande JavaScript- och formatmallsreferenser i <head> -elementet i HTML-filen:

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

Eller så kan du ladda ned modulen Azure Kartor Inomhus. Modulen Azure Kartor Indoor innehåller ett klientbibliotek för åtkomst till Azure Kartor tjänster. Följ stegen nedan för att installera och läsa in modulen Inomhus i webbappen.

Installera paketet azure-maps-indoor.
```
>npm install azure-maps-indoor
```

Referera till Modulen Azure Kartor Indoor JavaScript och formatmall i <head> -elementet i HTML-filen:

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

Instansiera kartobjektet

Skapa först ett Map-objekt. Kartobjektet används i nästa steg för att instansiera objektet Indoor Manager. Koden nedan visar hur du instansierar map-objektet:

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

Instansiera inomhushanteraren

Om du vill läsa in panelerna och kartformatet för panelerna måste du skapa en instans av Inomhushanteraren. Instansiera inomhushanteraren genom att tillhandahålla map-objektet och motsvarande tilesetId . Om du vill ha stöd för dynamisk kartstilmåste du skicka statesetId . Variabelnamnet statesetId är ärendekänsligt. Koden bör se ut som JavaScript nedan.

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

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

Om du vill aktivera avsökning av tillståndsdata som du anger måste du ange statesetId och anropa indoorManager.setDynamicStyling(true) . Med avsökningstillståndsdata kan du dynamiskt uppdatera tillståndet för dynamiska egenskaper eller tillstånd. En funktion som rum kan till exempel ha en dynamisk egenskap (tillstånd) som kallas occupancy . Ditt program kanske vill söka efter eventuella tillståndsändringar som återspeglar ändringen på den visuella kartan. Koden nedan visar hur du aktiverar tillståndssökning:

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

Geografisk Inställningar (valfritt)

Den här guiden förutsätter att du har skapat din Creator-tjänst i USA. I så fall kan du hoppa över det här avsnittet. Men om din Creator-tjänst skapades i Europa lägger du till följande kod:

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

Kontroll för inomhusnivåväljare

Med kontrollen Väljare för inomhusnivå kan du ändra nivån på den renderade kartan. Du kan även initiera kontrollen för att väljare på inomhusnivå via inomhushanteraren. Här är koden för att initiera nivåkontrollväljaren:

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

Inomhushändelser

Modulen Azure Kartor Inomhus stöder mappningsobjekthändelser. Händelselyssnare för map-objekt anropas när en nivå eller anläggning har ändrats. Om du vill köra kod när en nivå eller en anläggning har ändrats placerar du koden i händelselyssnaren. Koden nedan visar hur händelselyssnare kan läggas till i map-objektet.

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

Variabeln eventData innehåller information om den nivå eller anläggning som levelchanged facilitychanged anropade händelsen eller . När en nivå ändras eventData innehåller objektet , det nya och andra facilityId levelNumber metadata. När en anläggning ändras innehåller eventData objektet den nya , den nya och andra facilityId levelNumber metadata.

Exempel: Använda modulen Kartor inomhus

Det här exemplet visar hur du använder modulen Azure Kartor Indoor i webbappen. Även om exemplet är begränsat täcker det grunderna för vad du behöver för att komma igång med modulen Azure Kartor Indoor. Den fullständiga HTML-koden finns under de här stegen.

Använd alternativet Azure Content Delivery Network för att installera modulen Azure Kartor Indoor.
Skapa en ny HTML-fil
I HTML-huvudet refererar du till JavaScript Kartor modulen Azure Kartor och formatmallar för formatmallar.
Initiera ett Map-objekt. Map-objektet har stöd för följande alternativ:
- Subscription keyär din primära Kartor Azure-prenumerationsnyckel.
- center definierar latitud och longitud för platsen för ditt inomhuskartcenter. Ange ett värde center för om du inte vill ange ett värde för bounds . Formatet bör visas som center : [-122.13315, 47.63637].
- bounds är den minsta rektangulära formen som omsluter kartdata för paneluppsättningen. Ange ett värde bounds för om du inte vill ange ett värde för center . Du hittar dina kartbundna gränser genom att anropa API:et för Tileset List. API:et för bbox tileset-lista returnerar , som du kan parsa och tilldela till bounds . Formatet bör visas som bounds : [# west, # south, # east, # north].
- style gör att du kan ange färgen på bakgrunden. Om du vill visa en vit bakgrund style definierar du som "tom".
- zoom gör att du kan ange min- och max zoomningsnivåer för kartan.
Skapa sedan modulen Inomhushanterare. Tilldela Azure Kartor inomhus och tilesetId lägg eventuellt till statesetId .
Instansiera kontrollen För att väljare på inomhusnivå.
Lägg till händelselyssnare för Map-objekt.

Filen bör nu se ut ungefär som HTML-koden nedan.

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

Om du vill se inomhuskartan läser du in den i en webbläsare. Det bör se ut som på bilden nedan. Om du klickar på funktionen stairwell visas nivåväljaren i det övre högra hörnet.

bild av inomhuskarta