Usare il modulo Mappe Mappe di Azure indoor con stili personalizzati (anteprima)

Articolo
01/04/2024

L'SDK Web Mappe di Azure include un modulo indoor Mappe, che consente di eseguire il rendering delle mappe di interni create nei servizi creator Mappe di Azure.

Quando si crea una mappa interna usando Mappe di Azure Creator, vengono applicati gli stili predefiniti. Mappe di Azure Creator ora supporta anche la personalizzazione degli stili dei diversi elementi delle mappe interne usando il API Rest di stile o editor di stili di visualizzazione.

Prerequisiti

account Mappe di Azure
risorsa Mappe di Azure Creator
Chiave di sottoscrizione
Alias o ID di configurazione della mappa. Per altre informazioni, vedere l'API di configurazione della mappa.

Suggerimento

Se non hai mai usato Mappe di Azure Creator per creare una mappa di interni, potresti trovare l'esercitazione Usare Creator per creare mappe di interni utile.

La configurazione alias della mappa (o mapConfigurationId) è necessaria per eseguire il rendering delle mappe di interni con stili personalizzati tramite il modulo Mappe indoor Mappe di Azure.

Incorporare il modulo Piante di interni

È possibile installare e incorporare il modulo Interni di Mappe di Azure in una delle due modalità riportate di seguito.

Per usare la versione di Azure rete per la distribuzione di contenuti ospitata a livello globale del modulo Mappe di Azure Indoor, fare riferimento ai riferimenti seguenti stylesheetscript nell'elemento <head> del file HTML:

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

In alternativa, è possibile scaricare il modulo Interni di Mappe di Azure. Il modulo Interni di Mappe di Azure contiene una libreria client per accedere ai servizi di Mappe di Azure. I passaggi seguenti illustrano come installare e caricare il modulo Indoor nell'applicazione Web.

Installare il pacchetto azure-maps-indoor più recente.
```
>npm install azure-maps-indoor
```
Importare il modulo Mappe di Azure Indoor JavaScript in un file di origine:
```
import * as indoor from "azure-maps-indoor";
```
È anche necessario incorporare il foglio di stile CSS per i vari controlli per visualizzare correttamente. Se si usa un bundler JavaScript per aggregare le dipendenze e creare il pacchetto del codice, vedere la documentazione del bundler su come viene eseguita. Per Webpack, viene comunemente eseguita tramite una combinazione di style-loader e css-loader con la documentazione disponibile in style-loader.

Per iniziare, installare style-loader e css-loader:
```
npm install --save-dev style-loader css-loader
```
All'interno del file di origine importare atlas-indoor.min.css:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Aggiungere quindi i caricatori alla parte relativa alle regole del modulo della configurazione di Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Per altre informazioni, vedere Come usare il pacchetto npm del controllo mappa Mappe di Azure.

Impostare il dominio e creare un'istanza dell'oggetto Map

Impostare il dominio della mappa con un prefisso corrispondente alla posizione della risorsa US creatore, EUad esempio:

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

Per altre informazioni, vedere Mappe di Azure ambito geografico del servizio.

Creare quindi un'istanza di un oggetto Map con l'oggetto di configurazione della mappa impostato sulla alias proprietà o mapConfigurationId della configurazione della mappa, quindi impostare su styleAPIVersion2023-03-01-preview.

L'oggetto Map verrà usato nel passaggio successivo per creare un'istanza dell'oggetto Indoor Manager. Il codice seguente illustra come creare un'istanza dell'oggetto Map con mapConfigurationstyleAPIVersion e eseguire il mapping del set di domini:

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

Creare un'istanza di Indoor Manager

Per caricare lo stile della mappa interna dei riquadri, è necessario creare un'istanza di Indoor Manager. Creare un'istanza di Indoor Manager specificando l'oggetto Map. Se si vuole supportare l'applicazioni di stili dinamici alla mappa, è necessario passare l'oggetto statesetId. Il nome della variabile statesetId fa distinzione tra maiuscole e minuscole. Il codice dovrebbe essere simile al frammento di codice JavaScript seguente:

const statesetId = "<statesetId>";

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

Per abilitare il polling dei dati di stato forniti, è necessario fornire statesetId e chiamare indoorManager.setDynamicStyling(true). Il polling dei dati di stato consentono di aggiornare dinamicamente lo stato delle proprietà o degli stati dinamici. Ad esempio, una funzionalità come stanza può avere una proprietà dinamica (stato) denominata occupancy. L'applicazione potrebbe voler eseguire il polling di qualsiasi modifica allo stato per riflettere la modifica all'interno della mappa visiva. Il codice seguente illustra come abilitare il polling dello stato:

const statesetId = "<statesetId>";

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

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

Controllo selezione livello interno

Il controllo di selezione del livello di interni consente di modificare il livello della mappa di cui è stato eseguito il rendering. Facoltativamente, è possibile inizializzare il controllo di selezione del livello di interni tramite Indoor Manager. Di seguito è riportato il codice per inizializzare il controllo di selezione del livello:

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

Eventi interni

Il modulo Interni di Mappe di Azure supporta gli eventi dell'oggetto Map. I listener degli eventi dell'oggetto Map vengono richiamati quando viene modificato un livello o una struttura. Se si vuole eseguire il codice dopo la modifica di un livello o una struttura, inserire il codice all'interno del listener di eventi. Il codice riportato di seguito mostra come è possibile aggiungere listener di eventi all'oggetto Map.

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

La variabile eventData contiene le informazioni sul livello o sulla struttura che ha richiamato rispettivamente l'evento levelchanged o facilitychanged. Quando un livello cambia, l'oggetto eventData contiene , facilityIdil nuovo levelNumbere altri metadati. Quando una struttura viene modificata, l'oggetto eventData contiene il nuovo facilityId, il nuovo levelNumbere altri metadati.

Esempio: applicazione di stili personalizzati: utilizzare la configurazione della mappa in WebSDK (anteprima)

Quando si crea una mappa interna usando Mappe di Azure Creator, vengono applicati gli stili predefiniti. Mappe di Azure Creator ora supporta anche la personalizzazione degli stili interni. Per altre informazioni, vedere Creare stili personalizzati per le mappe interne. Creator offre anche un editor di stili di visualizzazione.

Seguire l'articolo Creare stili personalizzati per le mappe di interni per creare gli stili personalizzati. Prendere nota dell'alias di configurazione della mappa dopo aver salvato le modifiche.
Usare l'opzione Rete per la distribuzione di contenuti di Azure per installare il modulo Interni di Mappe di Azure.
Creare un nuovo file HTML
Nell'intestazione HTML fare riferimento al modulo Mappe di Azure Indoor JavaScript e al foglio di stile.
Impostare il dominio della mappa con un prefisso corrispondente a una posizione della risorsa creatore: atlas.setDomain('us.atlas.microsoft.com'); se la risorsa creatore è stata creata nell'area degli Stati Uniti o atlas.setDomain('eu.atlas.microsoft.com'); se la risorsa creatore è stata creata nell'area ue.
Inizializzare un oggetto Map. L'oggetto Map supporta le opzioni seguenti:
- Subscription keyè la chiave di sottoscrizione Mappe di Azure.
- center definisce una latitudine e una longitudine per la posizione del centro della pianta di interni. Fornire un valore per center se non si vuole fornire un valore per bounds. Il formato deve essere visualizzato come center: [-122.13315, 47.63637].
- bounds è la forma rettangolare più piccola che racchiude i dati della mappa del set di tessere. Impostare un valore per bounds se non si vuole impostare un valore per center. È possibile trovare i limiti della mappa chiamando l'API dell'elenco di set di tessere. L'API dell'elenco di set di tessere restituisce bbox, che è possibile analizzare e assegnare a bounds. Il formato dovrebbe essere visualizzato come bounds: [# west, # south, # east, # north].
- mapConfiguration l'ID o l'alias della configurazione della mappa che definisce gli stili personalizzati che si desidera visualizzare sulla mappa, usare l'ID di configurazione della mappa o l'alias del passaggio 1.
- style consente di impostare lo stile iniziale dalla configurazione della mappa visualizzata. Se non è impostata, viene usata la configurazione predefinita della configurazione della mappa corrispondente allo stile.
- zoom consente di specificare i livelli di zoom minimo e massimo per la mappa.
- styleAPIVersion: pass '2023-03-01-preview' (obbligatorio mentre l'anteprima personalizzata è in anteprima pubblica)
Successivamente, creare il modulo Indoor Manager con il controllo Selezione livello indoor creato come parte delle opzioni di Indoor Manager , impostare facoltativamente l'opzione statesetId .
Aggiungere i listener di eventi dell'oggetto Map.

Suggerimento

Viene fatto riferimento alla configurazione della mappa tramite o mapConfigurationIdalias . Ogni volta che si modifica o si modifica una configurazione della mappa, il relativo ID cambia ma il relativo alias rimane invariato. È consigliabile fare riferimento alla configurazione della mappa in base al relativo alias nelle applicazioni. Per altre informazioni, vedere Configurazione della mappa nell'articolo concetti.

Il file dovrebbe ora essere simile al codice HTML seguente:

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

Per visualizzare la pianta di interni, caricarla in un Web browser. Dovrebbe essere simile all'immagine seguente. Se si seleziona la funzionalità di rigonfiamento delle scale, il selettore di livello viene visualizzato nell'angolo superiore destro.

indoor map image

Per una demo live di una mappa interna con il codice sorgente disponibile, vedere Creator Indoor Mappe in [Mappe di Azure Samples].

Passaggi successivi

Per informazioni sulle API correlate al modulo Interni di Mappe di Azure, vedere:

Requisiti del pacchetto di disegno

Creator per piante di interni

Altre informazioni su come aggiungere altri dati alla mappa:

Stili dinamici per le piante di interni

Esempi di codice