De Azure Kaarten Indoor Kaarten-module gebruiken met aangepaste stijlen (preview)

Artikel
01/04/2024

De Azure Kaarten Web SDK bevat een indoor-Kaarten-module waarmee u indoorkaarten kunt weergeven die zijn gemaakt in Azure Kaarten Creator-services.

Wanneer u een indoorkaart maakt met behulp van Azure Kaarten Creator, worden standaardstijlen toegepast. Azure Kaarten Creator biedt nu ook ondersteuning voor het aanpassen van de stijlen van de verschillende elementen van uw indoorkaarten met behulp van de Style Rest API of de visuele stijleditor.

Vereisten

Azure Kaarten-account
Azure Kaarten Creator-resource
Abonnementssleutel
Een mapconfiguratiealias of -id. Zie de toewijzingsconfiguratie-API voor meer informatie.

Tip

Als u Azure Kaarten Creator nog nooit hebt gebruikt om een indoorkaart te maken, is de zelfstudie Over indoorkaarten misschien handig.

De kaartconfiguratie alias (ofmapConfigurationId) is vereist voor het weergeven van indoorkaarten met aangepaste stijlen via de module Indoor Kaarten van Azure Kaarten.

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, raadpleegt u het volgende script en stylesheet de verwijzingen in het element van het <head> HTML-bestand:

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

U kunt ook de Azure Kaarten Indoor-module downloaden. De Azure Kaarten Indoor-module bevat een clientbibliotheek voor toegang tot Azure Kaarten-services. De volgende stappen laten zien hoe u de indoormodule installeert en laadt in uw webtoepassing.

Installeer het nieuwste pakket azure-maps-indoor.
```
>npm install azure-maps-indoor
```
Importeer de Azure Kaarten Indoor-module JavaScript in een bronbestand:
```
import * as indoor from "azure-maps-indoor";
```
U moet ook het CSS-opmaakmodel insluiten voor verschillende besturingselementen om correct weer te geven. Als u een JavaScript-bundeler gebruikt om de afhankelijkheden te bundelen en uw code in te pakken, raadpleegt u de documentatie van uw bundelaar over hoe dit werkt. Voor Webpack wordt dit meestal gedaan via een combinatie van style-loader en css-loader met documentatie die beschikbaar is bij style-loader.

Installeer om te beginnen style-loader en css-loader:
```
npm install --save-dev style-loader css-loader
```
Importeer atlas-indoor.min.css in uw bronbestand:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Voeg vervolgens loaders toe aan het moduleregelsgedeelte van de webpack-configuratie:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Zie Het npm-pakket voor kaartbeheer van Azure Kaarten gebruiken voor meer informatie.

Het domein instellen en het kaartobject instantiëren

Stel het kaartdomein in met een voorvoegsel dat overeenkomt met de locatie van uw Creator-resource, US of EUbijvoorbeeld:

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

Zie het geografische bereik van azure Kaarten service voor meer informatie.

Maak vervolgens een kaartobject met het kaartconfiguratieobject dat is ingesteld op de alias of mapConfigurationId eigenschap van uw kaartconfiguratie en stel vervolgens uw styleAPIVersion in op 2023-03-01-preview.

Het kaartobject wordt in de volgende stap gebruikt om het Indoor Manager-object te instantiëren. In de volgende code ziet u hoe u het kaartobject kunt instantiëren met styleAPIVersionmapConfigurationen een toewijzingsdomeinset kunt instellen:

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

De Indoor Manager instantiëren

Als u de stijl van de indoorkaart van de tegels wilt laden, moet u de Indoor Manager instantiëren. Instantieer de Indoor Manager door het kaartobject op te geven. Als u dynamische kaartstijl wilt ondersteunen, moet u de statesetId. De naam van de statesetId variabele is hoofdlettergevoelig. Uw code moet eruitzien als het volgende JavaScript-codefragment:

const statesetId = "<statesetId>";

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

Als u polling van de door u opgegeven statusgegevens wilt inschakelen, moet u de statesetId en aanroep indoorManager.setDynamicStyling(true)opgeven. Met pollingstatusgegevens kunt u de status van dynamische eigenschappen of statussen dynamisch bijwerken. Een functie zoals ruimte kan bijvoorbeeld een dynamische eigenschap (status) hebben die wordt aangeroepen occupancy. Uw toepassing wil mogelijk peilen naar statuswijzigingen om de wijziging in de visuele kaart weer te geven. De volgende code laat zien hoe u status polling inschakelt:

const statesetId = "<statesetId>";

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

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

Besturingselementen voor binnenniveaukiezer

Met het besturingselement Voor binnenniveaukiezer kunt u het niveau van de gerenderde kaart wijzigen. U kunt eventueel het besturingselement Indoor Level Picker initialiseren via indoor manager. Dit is de code voor het initialiseren van de niveaukiezer voor besturingselementen:

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

Indoor evenementen

De Azure Kaarten Indoor-module ondersteunt kaartobjectevenementen. De listeners voor kaartobjectgebeurtenissen worden aangeroepen wanneer een niveau of faciliteit is gewijzigd. Als u code wilt uitvoeren wanneer een niveau of faciliteit is gewijzigd, plaatst u uw code in de gebeurtenislistener. In de onderstaande code ziet u 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 levelchanged gebeurtenis heeft facilitychanged aangeroepen. Wanneer een niveau wordt gewijzigd, bevat het eventData object de facilityId, de nieuwe levelNumberen andere metagegevens. Wanneer een faciliteit wordt gewijzigd, bevat het eventData object het nieuwe facilityId, de nieuwe levelNumberen andere metagegevens.

Voorbeeld: aangepaste stijl: kaartconfiguratie gebruiken in WebSDK (preview)

Wanneer u een indoorkaart maakt met behulp van Azure Kaarten Creator, worden standaardstijlen toegepast. Azure Kaarten Creator biedt nu ook ondersteuning voor het aanpassen van uw binnenstijlen. Zie Aangepaste stijlen voor indoorkaarten maken voor meer informatie. Creator biedt ook een visuele stijleditor.

Volg het artikel Aangepaste stijlen maken voor indoorkaarten om uw aangepaste stijlen te maken. Noteer de configuratiealias van de kaart nadat u de wijzigingen hebt opgeslagen.
Gebruik de optie Azure Content Delivery Network om de Azure Kaarten Indoor-module te installeren.
Een nieuw HTML-bestand maken
Raadpleeg in de HTML-header de JavaScript- en opmaakmodel van de Azure Kaarten Indoor-module.
Stel het kaartdomein in met een voorvoegsel dat overeenkomt met een locatie van uw Creator-resource: atlas.setDomain('us.atlas.microsoft.com'); als uw Creator-resource is gemaakt in de REGIO VS of atlas.setDomain('eu.atlas.microsoft.com'); als uw Creator-resource is gemaakt in de regio EU.
Initialiseer een kaartobject. Het kaartobject ondersteunt de volgende opties:
- Subscription keyis uw Azure Kaarten-abonnementssleutel.
- center definieert een breedtegraad en lengtegraad voor de locatie van het binnenkaartcentrum. Geef een waarde op voor center als u geen waarde wilt opgeven voor bounds. De notatie moet worden weergegeven als center: [-122.13315, 47.63637].
- bounds is de kleinste rechthoekige vorm die de tegelset-kaartgegevens omsluit. Stel een waarde in voor bounds als u geen waarde wilt instellen voor center. U kunt uw kaartgrenzen vinden door de Api voor tegelsetlijst aan te roepen. De Tegelset List-API retourneert de bbox, waaraan u kunt parseren en toewijzen bounds. De notatie moet worden weergegeven als bounds: [# west, # zuid, # oost, # noord].
- mapConfiguration de id of alias van de kaartconfiguratie die de aangepaste stijlen definieert die u op de kaart wilt weergeven, gebruikt u de configuratie-id of alias van de kaart uit stap 1.
- style hiermee kunt u de oorspronkelijke stijl instellen op basis van de kaartconfiguratie die wordt weergegeven. Als deze niet is ingesteld, wordt de standaardconfiguratie van de kaartconfiguratie gebruikt die overeenkomt met de stijl die overeenkomt met de configuratie van de kaart.
- zoom hiermee kunt u de minimale en maximale zoomniveaus voor uw kaart opgeven.
- styleAPIVersion: geef '2023-03-01-preview' door (wat vereist is terwijl aangepaste stijl in openbare preview is)
Maak vervolgens de Indoor Manager-module met Indoor Level Picker-besturingselement geïnstantieerd als onderdeel van opties voor Indoor Manager , optioneel de statesetId optie in.
Voeg listeners toe voor gebeurtenislisteners voor kaartobjecten .

Tip

Er wordt naar de kaartconfiguratie verwezen met behulp van de mapConfigurationId of alias . Telkens wanneer u een kaartconfiguratie bewerkt of wijzigt, wordt de id gewijzigd, maar blijft de alias hetzelfde. Het wordt aanbevolen om te verwijzen naar de kaartconfiguratie op basis van de alias in uw toepassingen. Zie de kaartconfiguratie in het artikel concepten voor meer informatie.

Uw bestand moet er nu ongeveer als volgt uitzien:

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

Als u de indoorkaart wilt zien, laadt u deze in een webbrowser. Deze moet eruitzien als in de volgende afbeelding. Als u de trapruimtefunctie selecteert, wordt de niveaukiezer weergegeven in de rechterbovenhoek.

indoor map image