De Azure Kaarten Indoor Kaarten-module gebruiken

Artikel
08/28/2021
6 minuten om te lezen

De Azure Kaarten Web SDK bevat de Azure Kaarten Indoor-module. Met de Azure Kaarten Indoor-module kunt u indoorkaarten renderen die zijn gemaakt in Azure Kaarten Creator-services.

Vereisten

Een Azure Maps-account maken
Een Creator-resource maken
Een primaire sleutel voor een abonnement verkrijgen, ook wel bekend als de primaire sleutel of de abonnementssleutel.
Haal een tilesetId en een op door de statesetId zelfstudie voor het maken van indoorkaarten te voltooien. U moet deze id's gebruiken om plattegronden weer te geven met de Azure Kaarten Indoor Kaarten module.

De module Indoor Kaarten insluiten

U kunt de Azure Kaarten Indoor-module op twee manieren installeren en insluiten.

Als u de wereldwijd gehoste Azure Content Delivery Network-versie van de Azure Kaarten Indoor-module wilt gebruiken, verwijst u naar de volgende JavaScript- en Style Sheet-verwijzingen in het element van <head> het HTML-bestand:

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

U kunt ook de Azure Kaarten Indoor-module downloaden. De Azure Kaarten Indoor-module bevat een clientbibliotheek voor toegang tot Azure Kaarten services. Volg de onderstaande stappen om de module Indoor in uw webtoepassing te installeren en te laden.

Installeer het pakket azure-maps-indoor.
```
>npm install azure-maps-indoor
```

Verwijs naar de Azure Kaarten Indoor-module JavaScript en Style Sheet in het element van <head> het HTML-bestand:

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

Het kaartobject instanteren

Maak eerst een Map-object. Het kaartobject wordt in de volgende stap gebruikt om het object Indoor Manager te instanteren. In de onderstaande code ziet u hoe u het mapobject kunt instanteren:

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

Een instantie maken van de indoormanager

Als u de tegelsets voor binnen en de kaartstijl van de tegels wilt laden, moet u de Indoor Manager instantieren. Instantieer de indoormanager door het kaartobject en de bijbehorende op te tilesetId geven. Als u dynamische kaartstijlen wilt ondersteunen,moet u de statesetId doorgeven. De statesetId naam van de variabele is casegevoelig. Uw code moet er als het onderstaande JavaScript uit zien.

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

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

Als u polling wilt inschakelen van de statusgegevens die u op geeft, moet u de statesetId en aanroepen. indoorManager.setDynamicStyling(true) Door statusgegevens te peilen, kunt u de status van dynamische eigenschappen of statussen dynamisch bijwerken. Een functie zoals ruimte kan bijvoorbeeld een dynamische eigenschap (status) hebben met de naam occupancy . Uw toepassing wil mogelijk een poll naar statuswijzigingen om de wijziging in de visualkaart weer te geven. In de onderstaande code ziet u hoe u status polling kunt inschakelen:

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

Geografische Instellingen (optioneel)

In deze handleiding wordt ervan uitgenomen dat u de Creator-service hebt gemaakt in de Verenigde Staten. Als dat het zo is, kunt u deze sectie overslaan. Als uw Creator-service echter is gemaakt in Europa, voegt u de volgende code toe:

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

Besturingselement voor het kiezen van indoorniveau

Met het besturingselement Indoor Level Picker kunt u het niveau van de weergegeven kaart wijzigen. U kunt eventueel het besturingselement Indoor Level Picker initialiseren via de Indoor Manager. Dit is de code voor het initialiseren van de niveaubeheer- picker:

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

Indoorgebeurtenissen

De Azure Kaarten Indoor-module ondersteunt kaartobjectgebeurtenissen. De gebeurtenislisteners van het kaartobject worden aangeroepen wanneer een niveau of faciliteit is gewijzigd. Als u code wilt uitvoeren wanneer een niveau of faciliteit is gewijzigd, moet u uw code in de gebeurtenislistener plaatsen. De onderstaande code laat zien hoe gebeurtenislisteners kunnen worden toegevoegd aan het kaartobject.

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

De eventData variabele bevat informatie over het niveau of de faciliteit die respectievelijk de gebeurtenis of heeft levelchanged facilitychanged aangeroepen. Wanneer een niveau wordt gewijzigd, eventData bevat het object de , de nieuwe en andere facilityId levelNumber metagegevens. Wanneer een faciliteit wordt gewijzigd, eventData bevat het object de nieuwe , de nieuwe en andere facilityId levelNumber metagegevens.

Voorbeeld: De Indoor Kaarten-module gebruiken

In dit voorbeeld ziet u hoe u de Azure Kaarten Indoor-module in uw webtoepassing gebruikt. Hoewel het bereik van het voorbeeld beperkt is, worden de basisbeginselen van wat u nodig hebt om aan de slag te gaan met de Azure Kaarten Indoor-module. De volledige HTML-code staat onder deze stappen.

Gebruik de optie Azure Content Delivery Network om de Azure Kaarten Indoor-module te installeren.
Een nieuw HTML-bestand maken
In de HTML-header verwijst u naar de Azure Kaarten Indoor-module JavaScript- en opmaakbladstijlen.
Initialiseer een kaartobject. Het kaartobject ondersteunt de volgende opties:
- Subscription keyis uw primaire Kaarten azure-abonnementssleutel.
- center definieert een breedtegraad en lengtegraad voor de locatie van het plattegrondcentrum. Geef een waarde center op voor als u geen waarde voor wilt bounds geven. De indeling moet worden center weergegeven als : [-122.13315, 47.63637].
- bounds is de kleinste rechthoekige vorm die de kaartgegevens van de tegelset omsluit. Stel een waarde bounds in voor als u geen waarde wilt instellen voor center . U kunt de kaartgrens vinden door de tegelsetlijst-API aan te roepen. De tegelsetlijst-API retourneert bbox de , die u kunt parseren en toewijzen aan bounds . De indeling moet worden bounds weergegeven als : [# west, # south, # east, # north].
- style hiermee kunt u de kleur van de achtergrond instellen. Als u een witte achtergrond wilt weergeven, style definieert u als 'leeg'.
- zoom hiermee kunt u het minimum- en maximum zoomniveau voor uw kaart opgeven.
Maak vervolgens de module Indoor Manager. Wijs de Azure Kaarten Indoor toe en voeg desgewenst de tilesetId statesetId toe.
Instantieer het besturingselement Indoor Level Picker.
Voeg gebeurtenislisteners voor kaartobjecten toe.

Uw bestand moet er nu uitzien zoals in de onderstaande HTML-code.

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

Als u de plattegrond wilt zien, laadt u deze in een webbrowser. Deze ziet eruit als in de onderstaande afbeelding. Als u op de functie voor het kiezen van een niveau klikt, wordt de niveau-wijzer weergegeven in de rechterbovenhoek.

afbeelding van plattegrond