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
statesetId
. Untuk informasi selengkapnya, lihat Cara membuat stateset fitur.- Aplikasi web. Untuk informasi selengkapnya, lihat Cara menggunakan modul Peta Dalam Ruangan.
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
:
Di aplikasi Postman, pilih Baru.
Di jendela Buat Baru, pilih Permintaan HTTP.
Masukkan Nama permintaan untuk permintaan tersebut, seperti Unggah Data POST.
Masukkan URL berikut ke API Status Pembaruan Fitur (ganti
{Azure-Maps-Subscription-key}
dengan kunci langganan Azure Peta Anda danstatesetId
denganstatesetId
):https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
Pilih tab Header.
Di bidang KEY, pilih
Content-Type
. Di bidang VALUE, pilihapplication/json
.Pilih tab Isi.
Di daftar tarik-turun, pilih mentah dan JSON.
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.
Ubah URL yang Anda gunakan di langkah 7 dengan mengganti
UNIT26
denganUNIT27
:https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
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.
Langkah berikutnya
Pelajari lebih lanjut dengan membaca:
[Apa itu Azure Peta Creator?]