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

Artikel
07/16/2024

Notitie

Buitengebruikstelling van Azure Maps Creator

De indoor kaartservice van Azure Maps Creator is nu afgeschaft en wordt buiten gebruik gesteld op 30-9-25. Zie einde levensduuraankondiging van Azure Maps Creator voor meer informatie.

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

Wanneer u een indoorkaart maakt met behulp van Azure Maps Creator, worden standaardstijlen toegepast. Azure Maps 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 editor voor visuele stijlen.

Vereisten

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

De kaartconfiguratie alias (of mapConfigurationId) is vereist om indoorkaarten met aangepaste stijlen weer te geven via de module Indoor Maps van Azure Maps.

De module Indoor Maps insluiten

U kunt de indoormodule van Azure Maps op twee manieren installeren en insluiten.

Als u de wereldwijd gehoste Azure Content Delivery Network-versie van de Indoor-module van Azure Maps 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 Indoor-module van Azure Maps downloaden. De indoormodule van Azure Maps bevat een clientbibliotheek voor toegang tot Azure Maps-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 Indoor-module van Azure Maps 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 het 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 in Azure Maps 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 de Azure Maps-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 styleAPIVersion mapConfigurationen 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. Uw code moet eruitzien als het volgende JavaScript-codefragment:

const indoorManager = new atlas.indoor.IndoorManager(map, {
});

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 Indoor-module van Azure Maps biedt ondersteuning voor kaartobjecten . 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 Maps Creator, worden standaardstijlen toegepast. Azure Maps 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 indoormodule van Azure Maps te installeren.
Een nieuw HTML-bestand maken
Raadpleeg in de HTML-header de JavaScript- en opmaakmodel van de Azure Maps 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 key is uw Azure Maps-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 indoorniveaukiezer die is geïnstantieerd als onderdeel van de opties voor Indoor Manager .
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 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
      });

      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.

afbeelding van indoorkaart