Menggunakan modul Azure Peta Indoor Peta dengan gaya kustom (pratinjau)

Artikel
01/04/2024

Azure Peta Web SDK menyertakan modul Indoor Peta, memungkinkan Anda merender peta dalam ruangan yang dibuat di layanan Azure Peta Creator.

Saat Anda membuat peta dalam ruangan menggunakan Azure Peta Creator, gaya default diterapkan. Azure Peta Creator sekarang juga mendukung penyesuaian gaya berbagai elemen peta dalam ruangan Anda menggunakan Style Rest API, atau editor gaya visual.

Prasyarat

Akun Azure Peta
Sumber daya Azure Peta Creator
Kunci langganan
Alias atau ID konfigurasi peta. Untuk informasi selengkapnya, lihat API konfigurasi peta.

Tip

Jika Anda belum pernah menggunakan Azure Peta Creator untuk membuat peta dalam ruangan, Anda mungkin menemukan tutorial Menggunakan Pembuat untuk membuat peta dalam ruangan yang berguna.

Konfigurasi alias peta (atau mapConfigurationId) diperlukan untuk merender peta dalam ruangan dengan gaya kustom melalui modul Azure Peta Indoor Peta.

Sematkan modul Indoor Maps

Anda dapat memasang dan menyematkan modul Azure Maps Indoor dengan salah satu dari dua cara.

Untuk menggunakan versi Azure Content Delivery Network yang dihosting secara global dari modul Azure Peta Indoor, lihat referensi dan stylesheet berikut script dalam <head> elemen 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>

Atau, Anda dapat mengunduh modul Azure Maps Indoor. Modul Azure Maps Indoor berisi pustaka klien untuk mengakses layanan Azure Maps. Langkah-langkah berikut menunjukkan cara menginstal dan memuat modul Indoor ke dalam aplikasi web Anda.

Instal paket azure-maps-indoor terbaru.
```
>npm install azure-maps-indoor
```
Impor JavaScript modul Azure Peta Indoor dalam file sumber:
```
import * as indoor from "azure-maps-indoor";
```
Anda juga perlu menyematkan Lembar Gaya CSS agar berbagai kontrol ditampilkan dengan benar. Jika Anda menggunakan bunder JavaScript untuk memaketkan dependensi dan mengemas kode Anda, lihat dokumentasi bunder Anda tentang cara melakukannya. Untuk Webpack, biasanya dilakukan melalui kombinasi style-loader dan css-loader dengan dokumentasi yang tersedia di style-loader.

Untuk memulai, instal style-loader dan css-loader:
```
npm install --save-dev style-loader css-loader
```
Di dalam file sumber Anda, impor atlas-indoor.min.css:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Kemudian tambahkan loader ke bagian aturan modul dari konfigurasi Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Untuk mempelajari selengkapnya, lihat Cara menggunakan paket npm kontrol peta Azure Peta.

Mengatur domain dan membuat instans objek Peta

Atur domain peta dengan awalan yang cocok dengan lokasi sumber daya Pembuat Anda, US atau EU, misalnya:

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

Untuk informasi selengkapnya, lihat Cakupan geografis layanan Azure Peta.

Selanjutnya, buat instans objek Peta dengan objek konfigurasi peta yang diatur ke alias properti atau mapConfigurationId konfigurasi peta Anda, lalu atur styleAPIVersion ke 2023-03-01-preview.

objek Peta akan digunakan pada langkah berikutnya untuk membuat instans objek Indoor Manager. Kode berikut menunjukkan kepada Anda cara membuat instans objek Peta dengan mapConfiguration, styleAPIVersion dan memetakan kumpulan domain:

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

Buat Instans Indoor Manager

Untuk memuat gaya peta dalam ruangan dari petak peta, Anda harus membuat instans Indoor Manager. Buat instans Indoor Manager dengan menyediakan objek Peta. Jika Anda ingin mendukung styling peta yang dinamis Anda harus melewati statesetId. Nama variable statesetId bersifat peka huruf besar/kecil. Kode Anda akan terlihat seperti cuplikan kode JavaScript berikut:

const statesetId = "<statesetId>";

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

Untuk mengaktifkan penjajakan data status yang Anda berikan, Anda harus menyediakan statesetId dan memanggil indoorManager.setDynamicStyling(true). Data status polling memungkinkan Anda memperbarui secara dinamis status properti atau kondisi yang dinamis. Misalnya, fitur seperti ruangan dapat memiliki properti dinamis (status) yang disebut occupancy. Aplikasi Anda mungkin ingin melakukan jajak pendapat untuk setiap perubahan status untuk mencerminkan perubahan di dalam peta visual. Kode berikut menunjukkan cara mengaktifkan polling status:

const statesetId = "<statesetId>";

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

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

Kontrol pemilih tingkat dalam ruangan

Kontrol Indoor Level Picker memungkinkan Anda mengubah level dari peta yang dirender. Anda dapat secara opsional menginisialisasi kontrol Indoor Level Picker melalui Indoor Manager. Berikut adalah kode untuk menginisialisasi pemilih kontrol tingkat:

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

Peristiwa dalam ruangan

Modul Azure Maps Indoor mendukung peristiwa objek Peta. Pendengar peristiwa objek Peta dipanggil ketika tingkat atau fasilitas telah berubah. Jika Anda ingin menjalankan kode saat level atau fasilitas telah berubah, letakkan kode Anda di dalam pendengar peristiwa. Kode di bawah ini menunjukkan bagaimana pendengar acara dapat ditambahkan ke objek Peta.

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

eventDataVariabel ini menyimpan informasi tentang tingkat atau fasilitas yang memanggillevelchanged atau peristiwa facilitychanged,secara masing-masing. Ketika tingkat berubah, eventData objek berisi facilityId, baru levelNumber, dan metadata lainnya. Ketika fasilitas berubah, eventData objek berisi metadata baru facilityId, baru levelNumber, dan lainnya.

Contoh: gaya kustom: menggunakan konfigurasi peta di WebSDK (pratinjau)

Saat Anda membuat peta dalam ruangan menggunakan Azure Peta Creator, gaya default diterapkan. Azure Peta Creator sekarang juga mendukung penyesuaian gaya dalam ruangan Anda. Untuk informasi selengkapnya, lihat Membuat gaya kustom untuk peta dalam ruangan. Pembuat juga menawarkan editor gaya visual.

Ikuti artikel Cara Membuat gaya kustom untuk peta dalam ruangan untuk membuat gaya kustom Anda. Catat alias konfigurasi peta setelah menyimpan perubahan Anda.
Gunakan opsi Azure Content Delivery Network untuk memasang modul Azure Maps Indoor.
Buat file HTML baru
Di header HTML, referensikan modul Azure Peta Indoor JavaScript dan lembar gaya.
Atur domain peta dengan awalan yang cocok dengan lokasi sumber daya Pembuat Anda: atlas.setDomain('us.atlas.microsoft.com'); jika sumber daya Pembuat Anda telah dibuat di wilayah AS, atau atlas.setDomain('eu.atlas.microsoft.com'); jika sumber daya Pembuat Anda telah dibuat di wilayah UE.
Inisialisasi objek Peta. Objek Peta mendukung opsi berikut:
- Subscription keyadalah kunci langganan Azure Peta Anda.
- center mendefinisikan garis lintang dan bujur untuk lokasi pusat peta dalam ruangan Anda. Berikan nilai untuk center jika Anda tidak ingin memberikan nilai untuk bounds. Format akan muncul sebagai center: [-122.13315, 47.63637].
- bounds adalah bentuk persegi panjang terkecil yang mengapit data peta tileset. Set nilai untuk bounds jika Anda tidak ingin menetapkan nilai untuk center. Anda dapat menemukan batas peta Anda dengan memanggil Tileset List API. Tileset List API mengembalikan bbox, yang dapat Anda urai dan tetapkan ke bounds. Format harus muncul sebagai bounds: [# barat, # selatan, # timur, # utara].
- mapConfiguration ID atau alias konfigurasi peta yang menentukan gaya kustom yang ingin Anda tampilkan di peta, gunakan ID konfigurasi peta atau alias dari langkah 1.
- style memungkinkan Anda untuk mengatur gaya awal dari konfigurasi peta Anda yang ditampilkan. Jika tidak diatur, gaya yang cocok dengan konfigurasi default konfigurasi peta digunakan.
- zoom memungkinkan Anda menentukan tingkat pembesaran tampilan secara minimal dan maksimal untuk peta Anda.
- styleAPIVersion: pass '2023-03-01-preview' (yang diperlukan saat Custom Styling berada di pratinjau publik)
Selanjutnya, buat modul Indoor Manager dengan kontrol Indoor Level Picker yang dibuat sebagai bagian dari opsi Indoor Manager , secara opsional atur statesetId opsi .
Tambahkan pendengar peristiwa objek Peta.

Tip

Konfigurasi peta dirujuk menggunakan mapConfigurationId atau alias . Setiap kali Anda mengedit atau mengubah konfigurasi peta, ID-nya berubah tetapi aliasnya tetap sama. Disarankan untuk mereferensikan konfigurasi peta dengan aliasnya di aplikasi Anda. Untuk informasi selengkapnya, Lihat konfigurasi peta di artikel konsep.

File Anda sekarang akan terlihat mirip dengan HTML berikut:

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

Untuk melihat peta dalam ruangan Anda, masukkan ke browser web. Ini akan muncul seperti gambar berikut. Jika Anda memilih fitur tangga, pemilih tingkat muncul di sudut kanan atas.

indoor map image