Menerapkan gaya dinamis untuk peta dalam ruangan Creator

Anda dapat menggunakan layanan Status Fitur Azure Peta Creator untuk menerapkan gaya yang didasarkan pada properti dinamis fitur data peta dalam ruangan. Misalnya, Anda dapat membuat ruang pertemuan fasilitas dengan warna tertentu untuk mencerminkan status hunian. Artikel ini menjelaskan cara merender fitur peta dalam ruangan secara dinamis dengan layanan Status Fitur dan modul Web Dalam Ruangan.

Prasyarat

Artikel ini menggunakan aplikasi Postman , tetapi Anda dapat memilih lingkungan pengembangan API yang berbeda.

Menerapkan gaya dinamis

Setelah Anda menyelesaikan prasyarat, Anda harus memiliki aplikasi web sederhana yang dikonfigurasi dengan kunci langganan Anda, dan statesetId.

Pilih fitur

Anda mereferensikan fitur, seperti ruang rapat atau konferensi, dengan ID-nya untuk menerapkan gaya dinamis. Gunakan ID fitur untuk memperbarui properti dinamis atau status fitur tersebut. Untuk melihat fitur yang ditentukan dalam himpunan data, gunakan salah satu metode berikut:

  • API WFS (Layanan Fitur Web). Gunakan API WFS untuk mengkueri himpunan data. WFS mengikuti Fitur API Open Geospatial Consortium. API WFS berguna untuk menanyakan fitur dalam himpunan data. Misalnya, Anda dapat menggunakan WFS untuk menemukan semua ruang pertemuan ukuran menengah dari fasilitas tertentu dan lantai.

  • Terapkan kode yang disesuaikan yang dapat digunakan pengguna untuk memilih fitur di peta menggunakan aplikasi web Anda, seperti yang ditunjukkan dalam artikel ini.

Skrip berikut menerapkan perisiwa klik mouse. Kode mengambil ID fitur berdasarkan titik yang diklik. Dalam aplikasi Anda, Anda dapat memasukkan kode setelah blok kode Pengelola Dalam Ruangan. Jalankan aplikasi Anda, lalu periksa konsol untuk mendapatkan ID fitur dari titik yang diklik.

/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function(e){

    var features = map.layers.getRenderedShapes(e.position, "unit");

    features.forEach(function (feature) {
        if (feature.layer.id == 'indoor_unit_office') {
            console.log(feature);
        }
    });
});

Tutorial Buat peta dalam ruangan mengonfigurasi status fitur untuk menerima pembaruan status untuk occupancy.

Di bagian berikutnya, Anda akan mengatur status hunian kantor UNIT26 ke true dan kantor UNIT27 ke false.

Atur status hunian

Perbarui status dua kantor, UNIT26 dan UNIT27:

  1. Di aplikasi Postman, pilih Baru.

  2. Di jendela Buat Baru, pilih Permintaan HTTP.

  3. Masukkan Nama permintaan untuk permintaan tersebut, seperti Unggah Data POST.

  4. Masukkan URL berikut ke API Status Pembaruan Fitur (ganti {Azure-Maps-Subscription-key} dengan kunci langganan Azure Peta Anda dan statesetId dengan statesetId):

    https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
    
  5. Pilih tab Header.

  6. Di bidang KEY, pilih Content-Type. Di bidang VALUE, pilih application/json.

    Header tab information for stateset creation.

  7. Pilih tab Isi.

  8. Di daftar tarik-turun, pilih mentah dan JSON.

  9. Salin gaya JSON berikut, lalu tempel di jendela Isi:

    {
        "states": [
            {
                "keyName": "occupied",
                "value": true,
                "eventTimestamp": "2020-11-14T17:10:20"
            }
        ]
    }
    

    Penting

    Pembaruan akan disimpan hanya jika stempel waktu yang diposting adalah setelah stempel waktu yang digunakan dalam permintaan pembaruan status fitur sebelumnya untuk ID fitur yang sama.

  10. Ubah URL yang Anda gunakan di langkah 7 dengan mengganti UNIT26 dengan UNIT27:

    https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
    
  11. Salin gaya JSON berikut, lalu tempel di jendela Isi:

    {
        "states": [
            {
                "keyName": "occupied",
                "value": false,
                "eventTimestamp": "2020-11-14T17:10:20"
            }
        ]
    }
    

Memvisualisasikan gaya dinamis pada peta

Aplikasi web yang sebelumnya Anda buka di browser sekarang harus mencerminkan status fitur peta yang diperbarui:

  • Kantor UNIT27(142) akan tampak hijau.
  • Kantor UNIT26(143) akan tampak hijau.

Free room in green and Busy room in red

Lihat demo langsung

Langkah berikutnya

Pelajari lebih lanjut dengan membaca:

[Apa itu Azure Peta Creator?]