Az Azure Maps Beltéri térképek modul használata egyéni stílusokkal (előzetes verzió)

Cikk
07/16/2024

Az Azure Maps Web SDK tartalmaz egy Beltéri térképek modult, amely lehetővé teszi az Azure Maps Creator szolgáltatásokban létrehozott beltéri térképek renderelését.

Ha beltéri térképet hoz létre az Azure Maps Creator használatával, az alapértelmezett stílusok lesznek alkalmazva. Az Azure Maps Creator mostantól támogatja a beltéri térképek különböző elemeinek stílusainak testreszabását a Style Rest API vagy a vizuális stílusszerkesztő használatával.

Előfeltételek

Azure Maps-fiók
Azure Maps Creator-erőforrás
Előfizetési kulcs
Térképkonfigurációs alias vagy azonosító. További információ: térképkonfigurációs API.

A térképkonfiguráció alias (vagy mapConfigurationId) szükséges ahhoz, hogy egyéni stílusokkal jelenítsen meg beltéri térképeket az Azure Maps Beltéri térképek modulon keresztül.

A Beltéri térképek modul beágyazása

Az Azure Maps Beltéri modult kétféleképpen telepítheti és ágyazhatja be.

Az Azure Maps Beltéri modul globálisan üzemeltetett Azure Content Delivery Network-verziójának használatához hivatkozzon az alábbiakra script és stylesheet a <head> HTML-fájl elemére:

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

Vagy letöltheti az Azure Maps Beltéri modult. Az Azure Maps Beltéri modul egy ügyfélkódtárat tartalmaz az Azure Maps-szolgáltatások eléréséhez. Az alábbi lépések bemutatják, hogyan telepítheti és töltheti be a beltéri modult a webalkalmazásba.

Telepítse a legújabb azure-maps-indoor csomagot.
```
>npm install azure-maps-indoor
```
Importálja az Azure Maps Beltéri modul JavaScript-modult egy forrásfájlba:
```
import * as indoor from "azure-maps-indoor";
```
A különböző vezérlők megfelelő megjelenítéséhez a CSS-stíluslapot is beágyaznia kell. Ha JavaScript-kötegelőt használ a függőségek kötegeléséhez és a kód csomagolásához, tekintse meg a csomagkötegelő dokumentációját a művelet módjáról. A Webpack esetében ez általában a stílusbetöltőben elérhető dokumentáció kombinációján style-loader keresztül történik.css-loader

Először telepítse a style-loadert és a css-loadert:
```
npm install --save-dev style-loader css-loader
```
A forrásfájlon belül importálja a atlas-indoor.min.css:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Ezután adjon hozzá rakodókat a Webpack konfiguráció modulszabályainak részéhez:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
További információ: Az Azure Maps térképvezérlő npm-csomagjának használata.

A tartomány beállítása és a Térkép objektum példányosítása

Állítsa be a leképezési tartományt a létrehozói erőforrás helyének megfelelő előtaggal, US vagy EUpéldául:

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

További információ: Azure Maps szolgáltatás földrajzi hatóköre.

Ezután példányosítson egy Térkép objektumot a térképkonfiguráció objektumának vagy mapConfigurationId tulajdonságának megfelelő alias térképkonfigurációval, majd állítsa be a styleAPIVersion kívánt értéket2023-03-01-preview.

A Map objektum a következő lépésben az Indoor Manager objektum példányosításához lesz használva. Az alábbi kód bemutatja, hogyan példányosíthatja a Map objektumot mapConfiguration a , styleAPIVersion és hogyan képezheti le a tartománykészletet:

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

A Beltéri kezelő példányosítása

A csempék beltéri térképstílusának betöltéséhez példányosítania kell az Indoor Managert. A Map objektum megadásával példányosítsa a Beltéri kezelőt. A kódnak a következő JavaScript-kódrészlethez hasonlóan kell kinéznie:

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

Beltéri szintválasztó vezérlő

A Beltéri szintválasztó vezérlővel módosíthatja a renderelt térkép szintjét. A Beltéri szintválasztó vezérlőt igény szerint inicializálhatja a Beltéri kezelőn keresztül. Az alábbi kód inicializálja a szintvezérlőválasztót:

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

Beltéri események

Az Azure Maps Beltéri modul támogatja a Map objektumeseményeket . A térképobjektum eseményfigyelői akkor lesznek meghívva, ha egy szint vagy létesítmény megváltozott. Ha kódot szeretne futtatni, amikor egy szint vagy egy létesítmény megváltozott, helyezze a kódot az eseményfigyelőbe. Az alábbi kód bemutatja, hogyan adhatók hozzá az eseményfigyelők a Térkép objektumhoz.

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

A eventData változó információkat tartalmaz arról a szintről vagy létesítményről, amely meghívta az levelchanged eseményt facilitychanged . Amikor egy szint megváltozik, az eventData objektum tartalmazza az facilityIdúj levelNumberés egyéb metaadatokat. Amikor egy létesítmény megváltozik, az eventData objektum tartalmazza az újat facilityId, az újat levelNumberés az egyéb metaadatokat.

Példa: egyéni stílus: térképkonfiguráció felhasználása a WebSDK-ban (előzetes verzió)

Ha beltéri térképet hoz létre az Azure Maps Creator használatával, az alapértelmezett stílusok lesznek alkalmazva. Az Azure Maps Creator mostantól a beltéri stílusok testreszabását is támogatja. További információ: Egyéni stílusok létrehozása beltéri térképekhez. A creator vizuális stílusszerkesztőt is kínál.

Az egyéni stílusok létrehozásához kövesse az Egyéni stílusok létrehozása beltéri térképekhez című útmutatót. A módosítások mentése után jegyezze fel a térképkonfiguráció aliasát.
Az Azure Content Delivery Network beállítással telepítheti az Azure Maps Beltéri modult.
Új HTML-fájl létrehozása
A HTML-fejlécben hivatkozzon az Azure Maps Beltéri modul JavaScript és stíluslapjára.
Állítsa be a leképezési tartományt egy olyan előtaggal, amely megfelel a létrehozói erőforrás helyének: atlas.setDomain('us.atlas.microsoft.com'); ha a létrehozói erőforrás az EGYESÜLT Államok régiójában lett létrehozva, vagy atlas.setDomain('eu.atlas.microsoft.com'); ha a létrehozói erőforrás az EU-régióban lett létrehozva.
Térképobjektum inicializálása. A Térkép objektum a következő beállításokat támogatja:
- Subscription key Az Azure Maps-előfizetés kulcsa.
- center A beltéri térképközpont helyének szélességét és hosszúságát határozza meg. Adjon meg értéketcenter, ha nem szeretne értéket megadni.bounds A formátumnak a következőnek kell megjelennie center: [-122.13315, 47.63637].
- bounds a csempék térképadatait tartalmazó legkisebb téglalap alakú alakzat. Adjon meg egy értéketbounds, ha nem szeretne értéket beállítani.center A Csempék lista API meghívásával megtalálhatja a térképkorlátokat. A Tileset List API a bboxelemezhető és hozzárendelhető boundsértéket adja vissza. A formátumnak a következőnek boundskell megjelennie: [# nyugat, # dél, # kelet, # észak].
- mapConfiguration a térképkonfiguráció azonosítóját vagy aliasát, amely meghatározza a térképen megjeleníteni kívánt egyéni stílusokat, használja a térkép konfigurációs azonosítóját vagy aliasát az 1. lépésben.
- style lehetővé teszi a megjelenített térképkonfiguráció kezdeti stílusának beállítását. Ha nincs beállítva, a stílus megfelelteti a térképkonfiguráció alapértelmezett konfigurációját.
- zoom lehetővé teszi a térkép minimális és maximális nagyítási szintjének megadását.
- styleAPIVersion: pass "2023-03-01-preview" (ez szükséges, amíg az egyéni stílus nyilvános előzetes verzióban van)
Ezután hozza létre az Indoor Manager modult az Indoor Manager beállításainak részeként példányosított Beltéri szintválasztó vezérlővel.
Térképobjektum-eseményfigyelők hozzáadása.

Tipp.

A térképkonfigurációra a rendszer a vagy a mapConfigurationId alias . A térképkonfiguráció minden szerkesztésekor vagy módosításakor megváltozik az azonosítója, de az aliasa változatlan marad. Javasoljuk, hogy az alkalmazásokban az aliasa alapján hivatkozzon a térképkonfigurációra. További információkért lásd a fogalmakról szóló cikkben található térképkonfigurációt .

A fájlnak most az alábbi HTML-hez hasonlóan kell kinéznie:

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

A beltéri térkép megtekintéséhez töltse be egy webböngészőbe. A következő képhez hasonlóan kell megjelennie. Ha a lépcsőház funkciót választja, a szintválasztó a jobb felső sarokban jelenik meg.

beltéri térkép képe