Praktik terbaik Azure Maps Web SDK

Dokumen ini berfokus pada praktik terbaik untuk Azure Maps Web SDK, namun, banyak praktik dan pengoptimalan terbaik yang diuraikan dapat diterapkan ke semua SDK Azure Maps lainnya.

Azure Maps Web SDK menyediakan kanvas yang kuat untuk merender kumpulan data spasial besar dengan berbagai cara. Dalam beberapa kasus, ada beberapa cara untuk merender data dengan cara yang sama, tetapi tergantung pada ukuran himpunan data dan fungsionalitas yang diinginkan, satu metode mungkin berkinerja lebih baik daripada yang lain. Artikel ini menyoroti praktik terbaik dan tips serta trik untuk memaksimalkan performa dan menciptakan pengalaman pengguna yang lancar.

Umumnya, ketika mencari untuk meningkatkan performa peta, mencari cara untuk mengurangi jumlah lapisan dan sumber, dan kompleksitas kumpulan data dan gaya penyajian yang digunakan.

Praktik terbaik keamanan

Untuk informasi selengkapnya tentang praktik terbaik keamanan, lihat Praktik terbaik autentikasi dan otorisasi.

Menggunakan versi terbaru Azure Maps

Azure Peta SDK melalui pengujian keamanan reguler bersama dengan pustaka dependensi eksternal apa pun yang digunakan oleh SDK. Setiap masalah keamanan yang diketahui diperbaiki tepat waktu dan dirilis untuk produksi. Jika aplikasi Anda menunjuk ke versi utama terbaru dari versi Azure Peta Web SDK yang dihosting, aplikasi secara otomatis menerima semua pembaruan versi minor yang menyertakan perbaikan terkait keamanan.

Jika menghosting sendiri Azure Peta Web SDK melalui modul npm, pastikan untuk menggunakan simbol caret (^) untuk digabungkan dengan nomor versi paket Azure Peta npm di file Anda package.json sehingga menunjuk ke versi minor terbaru.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Tip

Selalu gunakan versi terbaru npm Azure Peta Control. Untuk informasi selengkapnya, lihat azure-maps-control dalam dokumentasi npm.

Optimalkan beban peta awal

Saat halaman web dimuat, salah satu hal pertama yang ingin Anda lakukan adalah mulai merender sesuatu sesegera mungkin sehingga pengguna tidak menatap layar kosong.

Tonton peristiwa siap peta

Demikian pula, ketika peta awalnya sering dimuat, diinginkan untuk memuat data secepat mungkin, sehingga pengguna tidak melihat peta kosong. Karena peta memuat sumber daya secara asinkron, Anda harus menunggu sampai peta siap untuk berinteraksi sebelum mencoba merender data Anda sendiri di dalamnya. Ada dua peristiwa yang dapat Anda tunggu, peristiwa load, dan peristiwa ready. Peristiwa beban akan menembak setelah peta selesai sepenuhnya memuat tampilan peta awal dan setiap petak peta telah dimuat. Jika Anda melihat kesalahan "Gaya tidak selesai dimuat", Anda harus menggunakan load peristiwa dan menunggu gaya dimuat sepenuhnya.

Peristiwa siap diaktifkan ketika sumber daya peta minimal diperlukan untuk mulai berinteraksi dengan peta. Lebih tepatnya, ready peristiwa dipicu ketika peta memuat data gaya untuk pertama kalinya. Peristiwa siap sering dapat menembak dalam setengah waktu peristiwa beban dan dengan demikian memungkinkan Anda untuk mulai memuat data Anda ke dalam peta lebih cepat. Hindari membuat perubahan pada gaya atau bahasa peta saat ini, karena itu dapat memicu muatan ulang gaya.

Malas memuat Azure Maps Web SDK

Jika peta tidak segera diperlukan, muat Azure Peta Web SDK hingga diperlukan. Ini menunda pemuatan file JavaScript dan CSS yang digunakan oleh Azure Maps Web SDK hingga diperlukan. Skenario umum saat ini terjadi adalah ketika peta dimuat di tab atau panel flyout yang tidak ditampilkan pada pemuatan halaman.

Sampel Lazy Load the Map code menunjukkan cara menunda pemuatan Azure Peta Web SDK hingga tombol ditekan. Untuk kode sumber, lihat Malas Memuat kode sampel Peta.

Menambahkan tempat penampung untuk peta

Jika peta membutuhkan waktu cukup lama untuk dimuat karena keterbatasan jaringan atau prioritas lain dalam aplikasi Anda, pertimbangkan untuk menambahkan gambar latar belakang kecil ke peta div sebagai tempat penampung untuk peta. Ini mengisi kekosongan peta div saat sedang dimuat.

Mengatur gaya peta awal dan opsi kamera pada inisialisasi

Seringkali aplikasi ingin memuat peta ke lokasi atau gaya tertentu. Terkadang pengembang menunggu hingga peta dimuat (atau menunggu ready peristiwa), lalu menggunakan setCamera fungsi atau setStyle peta. Ini sering memakan waktu lebih lama untuk sampai ke tampilan peta awal yang diinginkan karena banyak sumber daya akhirnya dimuat secara default sebelum sumber daya yang diperlukan untuk tampilan peta yang diinginkan dimuat. Pendekatan yang lebih baik adalah melewati opsi kamera peta dan gaya yang diinginkan ke dalam peta saat menginisialisasinya.

Mengoptimalkan sumber data

Web SDK memiliki dua sumber data,

• Sumber GeoJSON: Kelas DataSource mengelola data lokasi mentah dalam format GeoJSON secara lokal. Baik untuk himpunan data kecil hingga menengah (di atas ratusan ribu fitur).
• Sumber petak peta vektor: Kelas VectorTileSource memuat data yang diformat sebagai petak peta vektor untuk tampilan peta saat ini, berdasarkan sistem petak peta. Ideal untuk himpunan data besar hingga masif (jutaan atau miliaran fitur).

Menggunakan solusi berbasis petak untuk kumpulan data besar

Jika bekerja dengan kumpulan data yang lebih besar yang berisi jutaan fitur, cara yang disarankan untuk mencapai performa optimal adalah dengan mengekspos data menggunakan solusi sisi server seperti vektor atau layanan petak peta gambar raster.
Petak peta vektor dioptimalkan untuk memuat hanya data yang terlihat dengan geometri yang dipotong ke area fokus petak peta dan direalisasi agar sesuai dengan resolusi peta untuk tingkat zoom petak peta.

Platform Azure Peta Creator mengambil data dalam format petak peta vektor. Format data lainnya dapat menggunakan alat seperti Tippecanoe. Untuk informasi selengkapnya tentang bekerja dengan petak peta vektor, lihat readme petak peta map awesome-vector-tiles di GitHub.

Anda juga dapat membuat layanan kustom yang merender himpunan data sebagai petak peta gambar raster di sisi server dan memuat data menggunakan kelas TileLayer di peta SDK. Ini memberikan performa yang luar biasa karena peta hanya perlu memuat dan mengelola beberapa lusin gambar paling banyak. Namun, ada beberapa batasan dengan menggunakan petak peta raster karena data mentah tidak tersedia secara lokal. Layanan sekunder sering diperlukan untuk memberi daya pada semua jenis pengalaman interaksi, misalnya, mencari tahu bentuk apa yang diklik pengguna. Selain itu, ukuran file petak peta raster sering lebih besar dari petak peta vektor terkompresi yang berisi geometri yang dioptimalkan tingkat umum dan zoom.

Untuk informasi selengkapnya tentang sumber data, lihat Membuat sumber data.

Menggabungkan beberapa set data ke dalam satu sumber petak vektor

Semakin sedikit sumber data yang harus dikelola peta, semakin cepat ia dapat memproses semua fitur yang akan ditampilkan. Secara khusus, ketika datang ke sumber petak peta, menggabungkan dua sumber petak peta vektor bersama-sama memotong jumlah permintaan HTTP untuk mengambil petak peta menjadi dua, dan jumlah total data akan sedikit lebih kecil karena hanya ada satu header file.

Menggabungkan beberapa kumpulan data dalam satu sumber petak peta vektor dapat dicapai menggunakan alat seperti Tippecanoe. Kumpulan data dapat digabungkan menjadi satu koleksi fitur atau dipisahkan menjadi lapisan terpisah dalam petak peta vektor yang dikenal sebagai lapisan sumber. Saat menghubungkan sumber petak peta vektor ke lapisan penyajian, Anda akan menentukan lapisan sumber yang berisi data yang ingin Anda render dengan lapisan.

Mengurangi jumlah refresh kanvas karena pembaruan data

Ada beberapa cara data di kelas DataSource dapat ditambahkan atau diperbarui. Daftar berikut menunjukkan berbagai metode dan beberapa pertimbangan untuk memastikan performa yang baik.

• Fungsi sumber data add dapat digunakan untuk menambahkan satu atau beberapa fitur ke sumber data. Setiap kali fungsi ini disebut memicu refresh kanvas peta. Jika menambahkan banyak fitur, gabungkan ke dalam array atau koleksi fitur dan oper ke fungsi ini sekali, daripada mengulangi kumpulan data dan memanggil fungsi ini untuk setiap fitur.
• Fungsi sumber data setShapes dapat digunakan untuk menimpa semua bentuk dalam sumber data. Di bawah tenda, ini menggabungkan sumber clear data dan add fungsi bersama-sama dan melakukan refresh kanvas peta tunggal alih-alih dua, yang lebih cepat. Pastikan untuk menggunakan fungsi ini saat Anda ingin memperbarui semua data dalam sumber data.
• Fungsi sumber data importDataFromUrl dapat digunakan untuk memuat file GeoJSON melalui URL ke sumber data. Setelah data diunduh, data diteruskan ke fungsi sumber add data. Jika file GeoJSON dihosting di domain lain, pastikan domain lain mendukung permintaan domain silang (COR). Jika tidak mempertimbangkan untuk menyalin data ke file lokal di domain Anda atau membuat layanan proksi yang mengaktifkan COR. Jika file besar, pertimbangkan untuk mengonversinya menjadi sumber petak peta vektor.
• Jika fitur dibungkus dengan Shape kelas, addPropertyfungsi bentuk , setCoordinates, dan setProperties semuanya memicu pembaruan di sumber data dan refresh kanvas peta. Semua fitur yang dikembalikan oleh sumber data getShapes dan fungsi getShapeById secara otomatis dibungkus dengan kelas Shape. Jika Anda ingin memperbarui beberapa bentuk, lebih cepat untuk mengonversinya ke JSON menggunakan fungsi sumber toJson data, mengedit GeoJSON, lalu meneruskan data ini ke fungsi sumber setShapes data.

Hindari memanggil sumber data fungsi yang jelas tidak perlu

Memanggil fungsi yang jelas dari kelas DataSource menyebabkan refresh kanvas peta. Jika fungsi clear dipanggil beberapa kali berturut-turut, penundaan dapat terjadi saat peta menunggu setiap refresh terjadi.

Ini adalah skenario umum dalam aplikasi yang menghapus sumber data, mengunduh data baru, menghapus sumber data lagi, lalu menambahkan data baru ke sumber data. Tergantung pada pengalaman pengguna yang diinginkan, alternatif berikut akan lebih baik.

• Kosongkan data sebelum mengunduh data baru, lalu serahkan data baru ke fungsi sumber data add atau setShapes. Jika ini adalah satu-satunya himpunan data di peta, peta kosong saat data baru diunduh.
• Unduh data baru, lalu serahkan ke fungsi sumber data setShapes. Ini menggantikan semua data di peta.

Menghapus fitur dan properti yang tidak digunakan

Jika set data Anda berisi fitur yang tidak akan digunakan di aplikasi Anda, hapus fitur tersebut. Demikian pula, hapus properti apa pun pada fitur yang tidak diperlukan. Ini memiliki beberapa manfaat:

• Mengurangi jumlah data yang harus diunduh.
• Mengurangi jumlah fitur yang perlu diulangkan saat merender data.
• Terkadang dapat membantu menyederhanakan atau menghapus ekspresi dan filter berbasis data, yang berarti lebih sedikit pemrosesan yang diperlukan pada waktu render.

Ketika fitur memiliki banyak properti atau konten, jauh lebih berkinerja untuk membatasi apa yang ditambahkan ke sumber data hanya untuk yang diperlukan untuk penyajian dan memiliki metode atau layanan terpisah untuk mengambil properti atau konten lain saat diperlukan. Misalnya, jika Anda memiliki peta sederhana yang menampilkan lokasi di peta saat diklik, banyak konten terperinci akan ditampilkan. Jika Anda ingin menggunakan gaya berbasis data untuk mengkustomisasi bagaimana lokasi dirender di peta, cukup muat properti yang diperlukan ke sumber data. Saat Anda ingin menampilkan konten terperinci, gunakan ID fitur untuk mengambil konten lain secara terpisah. Jika konten disimpan di server, Anda dapat mengurangi jumlah data yang perlu diunduh ketika peta awalnya dimuat dengan menggunakan layanan untuk mengambilnya secara asinkron.

Selain itu, mengurangi jumlah digit signifikan dalam koordinat fitur juga dapat secara signifikan mengurangi ukuran data. Tidak jarang koordinat berisi 12 tempat desimal atau lebih; namun, enam tempat desimal memiliki akurasi sekitar 0,1 meter, yang sering lebih tepat daripada lokasi yang diwakili koordinat (enam tempat desimal direkomendasikan ketika bekerja dengan data lokasi kecil seperti tata letak bangunan dalam ruangan). Memiliki lebih dari enam tempat desimal kemungkinan tidak akan membuat perbedaan dalam bagaimana data dirender dan mengharuskan pengguna untuk mengunduh lebih banyak data tanpa manfaat tambahan.

Berikut adalah daftar alat yang berguna untuk bekerja dengan data GeoJSON.

Menggunakan sumber data terpisah untuk mengubah data dengan cepat

Terkadang ada kebutuhan untuk memperbarui data dengan cepat di peta untuk hal-hal seperti menampilkan pembaruan langsung data streaming atau fitur animasi. Saat sumber data diperbarui, mesin rendering mengulang dan merender semua fitur di sumber data. Tingkatkan performa keseluruhan dengan memisahkan statis dari mengubah data dengan cepat menjadi sumber data yang berbeda, mengurangi jumlah fitur yang dirender ulang selama setiap pembaruan.

Jika menggunakan petak vektor dengan data langsung, cara mudah untuk mendukung pembaruan adalah dengan menggunakan header respons expires. Secara default, setiap sumber petak peta vektor atau lapisan petak peta raster akan secara otomatis memuat ulang petak peta saat tanggal expires. Alur lalu lintas dan petak peta insiden di peta menggunakan fitur ini untuk memastikan data lalu lintas real-time baru ditampilkan di peta. Fitur ini dapat dinonaktifkan dengan mengatur opsi layanan peta refreshExpiredTiles ke false.

Menyesuaikan opsi buffer dan toleransi di sumber data GeoJSON

Kelas DataSource mengonversi data lokasi mentah menjadi petak vektor lokal untuk penyajian on-the-fly. Petak peta vektor lokal ini memotong data mentah ke batas area petak peta dengan sedikit penyangga untuk memastikan penyajian halus di antara petak peta. Semakin kecil pilihan buffer, semakin sedikit data yang tumpang tindih disimpan dalam petak peta vektor lokal dan performa yang lebih baik, namun, semakin besar perubahan artefak penyajian yang terjadi. Cobalah mengubah opsi ini untuk mendapatkan perpaduan performa yang tepat dengan artefak penyajian minimal.

Kelas DataSource ini juga memiliki opsi tolerance yang digunakan dengan algoritma penyederhanaan Douglas-Peucker saat mengurangi resolusi geometri untuk tujuan penyajian. Meningkatkan nilai toleransi ini mengurangi resolusi geometri dan pada gilirannya meningkatkan performa. Sesuaikan opsi ini untuk mendapatkan campuran resolusi dan performa geometri yang tepat untuk kumpulan data Anda.

Mengatur opsi zoom maks dari sumber data GeoJSON

Kelas DataSource mengonversi data lokasi mentah menjadi petak vektor lokal untuk penyajian on-the-fly. Secara default, ia melakukan ini sampai zoom tingkat 18, di titik mana, ketika diperbesar lebih dekat, data sampel dari petak peta yang dihasilkan untuk zoom tingkat 18. Ini berfungsi dengan baik untuk sebagian besar kumpulan data yang perlu memiliki resolusi tinggi ketika diperbesar pada tingkat ini. Namun, saat bekerja dengan himpunan data yang lebih mungkin dilihat ketika diperkecil lebih banyak, seperti saat melihat poligon negara bagian atau provinsi, mengatur minZoom opsi sumber data ke nilai yang lebih kecil seperti 12 mengurangi jumlah komputasi, pembuatan petak peta lokal yang terjadi, dan memori yang digunakan oleh sumber data dan meningkatkan performa.

Minimalkan respons GeoJSON

Saat memuat data GeoJSON dari server baik melalui layanan atau dengan memuat file datar, pastikan data diminimalkan untuk menghapus karakter ruang yang tidak diperlukan yang membuat ukuran unduhan lebih besar dari yang diperlukan.

Mengakses GeoJSON mentah menggunakan URL

Dimungkinkan untuk menyimpan objek GeoJSON sebaris di dalam JavaScript, namun ini menggunakan lebih banyak memori karena salinannya disimpan di seluruh variabel yang Anda buat untuk objek ini dan instans sumber data, yang mengelolanya dalam pekerja web terpisah. Mengekspos GeoJSON ke aplikasi Anda menggunakan URL dan sumber data memuat satu salinan data langsung ke pekerja web sumber data.

Optimalkan lapisan penyajian

Peta Azure menyediakan beberapa lapisan berbeda untuk merender data di peta. Ada banyak pengoptimalan yang dapat Anda manfaatkan untuk menyesuaikan lapisan ini dengan skenario Anda peningkatan performa dan pengalaman pengguna secara keseluruhan.

Buat layer sekali dan gunakan kembali

Azure Peta Web SDK digerakkan oleh data. Data masuk ke sumber data, yang kemudian dihubungkan ke lapisan penyajian. Jika Anda ingin mengubah data di peta, perbarui data di sumber data atau ubah opsi gaya pada lapisan. Ini sering lebih cepat daripada menghapus, lalu membuat ulang lapisan dengan setiap perubahan.

Pertimbangkan lapisan gelembung di atas lapisan simbol

Lapisan gelembung merender titik sebagai lingkaran di peta dan dapat dengan mudah memiliki radius dan gaya warna mereka menggunakan ekspresi berbasis data. Karena lingkaran adalah bentuk sederhana bagi WebGL untuk menggambar, mesin penyajian dapat merender ini lebih cepat daripada lapisan simbol, yang harus memuat dan merender gambar. Perbedaan performa kedua lapisan penyajian ini terlihat ketika merender puluhan ribu poin.

Gunakan penanda HTML dan Popup dengan hemat

Tidak seperti kebanyakan lapisan dalam kontrol Azure Maps Web yang menggunakan WebGL untuk penyajian, Penanda HTML dan Popup menggunakan elemen DOM tradisional untuk penyajian. Dengan demikian, semakin banyak penanda HTML dan Popup menambahkan halaman, semakin banyak elemen DOM yang ada. Performa dapat menurun setelah menambahkan beberapa ratus penanda HTML atau popup. Untuk kumpulan data yang lebih besar, pertimbangkan untuk mengelompokkan data Anda atau menggunakan lapisan simbol atau gelembung.

Sampel Popup Penggunaan Kembali dengan kode Beberapa Pin menunjukkan cara membuat popup tunggal dan menggunakannya kembali dengan memperbarui konten dan posisinya. Untuk kode sumber, lihat Menggunakan Kembali Popup dengan kode sampel Beberapa Pin.

Meskipun demikian, jika Anda hanya memiliki beberapa poin untuk dirender di peta, kesederhanaan penanda HTML mungkin lebih disukai. Selain itu, penanda HTML dapat dengan mudah dibuat dapat diseret jika diperlukan.

Gabungkan lapisan

Peta ini mampu merender ratusan lapisan, namun, semakin banyak lapisan yang ada, semakin banyak waktu yang diperlukan untuk membuat adegan. Salah satu strategi untuk mengurangi jumlah lapisan adalah menggabungkan lapisan yang memiliki gaya serupa atau dapat ditata menggunakan gaya berbasis data.

Misalnya, pertimbangkan kumpulan data di mana semua fitur isHealthy memiliki properti yang dapat memiliki nilai true atau false. Jika membuat lapisan gelembung yang merender gelembung berwarna yang berbeda berdasarkan properti ini, ada beberapa cara untuk melakukan ini seperti yang ditunjukkan dalam daftar berikut, dari yang paling tidak berkinerja hingga yang paling berkinerja.

• Pisahkan data menjadi dua sumber data berdasarkan nilai isHealthy dan lampirkan lapisan gelembung dengan opsi warna berkode keras untuk setiap sumber data.
• Masukkan semua data ke dalam satu sumber data dan buat dua lapisan gelembung dengan opsi warna berkode keras dan filter berdasarkan properti isHealthy.
• Masukkan semua data ke dalam satu sumber data, buat satu lapisan gelembung dengan case ekspresi gaya untuk opsi warna berdasarkan properti isHealthy. Berikut adalah sampel kode yang menunjukkan hal ini.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Membuat animasi lapisan simbol halus

Lapisan simbol memiliki deteksi tabrakan diaktifkan secara default. Deteksi tabrakan ini bertujuan untuk memastikan bahwa tidak ada dua simbol yang tumpang tindih. Ikon dan opsi teks dari lapisan simbol memiliki dua opsi,

• allowOverlap - menentukan apakah simbol terlihat ketika bertabrakan dengan simbol lain.
• ignorePlacement - menentukan apakah simbol lain diizinkan untuk bertabrakan dengan simbol.

Kedua opsi ini diatur ke false secara default. Saat menjiwai simbol, perhitungan deteksi tabrakan berjalan pada setiap bingkai animasi, yang dapat memperlambat animasi dan membuatnya terlihat kurang cairan. Untuk menghaluskan animasi, atur opsi ini ke true.

Sampel kode Animasi Simbol Sederhana menunjukkan cara sederhana untuk menganimasikan lapisan simbol. Untuk kode sumber ke sampel ini, lihat Kode sampel Animasi Simbol Sederhana.

Tentukan rentang tingkat perbeseran

Jika data Anda memenuhi salah satu kriteria berikut, pastikan untuk menentukan tingkat zoom min dan maks layer sehingga komputer penyajian dapat melewatinya ketika berada di luar rentang tingkat zoom.

• Jika data berasal dari sumber petak peta vektor, seringkali lapisan sumber untuk jenis data yang berbeda hanya tersedia melalui rentang tingkat zoom.
• Jika menggunakan lapisan petak peta yang tidak memiliki petak peta untuk semua tingkat zoom 0 hingga 24 dan Anda ingin hanya merender pada tingkat yang memiliki petak peta, dan tidak mencoba mengisi petak peta yang hilang dengan petak peta dari tingkat zoom lainnya.
• Jika Anda hanya ingin merender lapisan pada tingkat zoom tertentu. Semua lapisan memiliki minZoom opsi dan maxZoom di mana lapisan dirender ketika di antara tingkat zoom ini berdasarkan logika maxZoom > zoom >= minZoomini .

Contoh

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Tentukan batas lapisan petak peta dan rentang zoom sumber

Secara default, petak peta memuat petak peta di seluruh dunia. Namun, jika layanan petak peta hanya memiliki petak peta untuk area tertentu, peta mencoba memuat petak ketika di luar area ini. Ketika ini terjadi, permintaan untuk setiap petak peta dibuat dan menunggu respons yang dapat memblokir permintaan lain yang dibuat oleh peta dan dengan demikian memperlambat penyajian lapisan lain. Menentukan batas lapisan petak peta menghasilkan peta hanya meminta petak peta yang berada dalam kotak pembatas tersebut. Selain itu, jika lapisan petak peta hanya tersedia di antara tingkat zoom tertentu, tentukan zoom sumber min dan maks karena alasan yang sama.

Contoh

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Menggunakan gaya peta kosong saat peta dasar tidak terlihat

Jika lapisan dilapisi pada peta yang sepenuhnya mencakup peta dasar, pertimbangkan untuk mengatur gaya peta ke blank atau blank_accessible sehingga peta dasar tidak dirender. Skenario umum untuk melakukan ini adalah ketika melapisi petak peta bola dunia penuh tanpa opasitas atau area transparan di atas peta dasar.

Animasikan lapisan gambar atau petak peta dengan lancar

Jika Anda ingin menganimasikan serangkaian lapisan gambar atau petak peta di peta. Seringkali lebih cepat untuk membuat lapisan untuk setiap gambar atau lapisan petak peta dan mengubah opasitas daripada memperbarui sumber lapisan tunggal pada setiap bingkai animasi. Menyembunyikan lapisan dengan mengatur opasitas ke nol dan menunjukkan lapisan baru dengan mengatur opasitasnya ke nilai yang lebih besar dari nol lebih cepat daripada memperbarui sumber di lapisan. Atau, visibilitas lapisan dapat diubah, tetapi pastikan untuk mengatur durasi pudar lapisan ke nol, jika tidak, itu menganimasikan lapisan saat menampilkannya, yang menyebabkan efek kedap karena lapisan sebelumnya akan disembunyikan sebelum lapisan baru terlihat.

Logika deteksi tabrakan lapisan Simbol Tweak

Lapisan simbol memiliki dua opsi yang ada untuk ikon dan teks yang disebut allowOverlap dan ignorePlacement. Kedua opsi ini menentukan apakah ikon atau teks simbol dapat tumpang tindih atau tumpang tindih. Ketika ini diatur ke false, lapisan simbol melakukan perhitungan saat merender setiap titik untuk melihat apakah itu bertabrakan dengan simbol lain yang sudah dirender di lapisan, dan jika ya, jangan merender simbol bertabrakan. Ini baik dalam mengurangi kekacauan pada peta dan mengurangi jumlah objek yang dirender. Dengan mengatur opsi ini ke false, logika deteksi tabrakan ini dilewati, dan semua simbol dirender di peta. Sesuaikan opsi ini untuk mendapatkan kombinasi performa dan pengalaman pengguna terbaik.

Kumpulan data titik besar kluster

Saat bekerja dengan sekumpulan besar titik data, Anda mungkin menemukan bahwa ketika dirender pada tingkat zoom tertentu, banyak titik tumpang tindih dan hanya terlihat parsial, jika sama sekali. Pengelompokan adalah proses pengelompokan poin yang berdekatan dan mewakili mereka sebagai titik terguter tunggal. Saat pengguna memperbesar peta, kluster memecah menjadi titik individual mereka. Ini dapat secara signifikan mengurangi jumlah data yang perlu dirender, membuat peta terasa kurang berantakan, dan meningkatkan performa. Kelas DataSource ini memiliki opsi untuk mengelompokkan data secara lokal. Selain itu, banyak alat yang menghasilkan petak peta vektor juga memiliki opsi pengelompokan.

Selain itu, tingkatkan ukuran radius kluster untuk meningkatkan performa. Semakin besar radius kluster, semakin sedikit titik berkluster yang ada untuk melacak dan merender. Untuk informasi selengkapnya, lihat Mengelompokkan data titik di Web SDK.

Gunakan peta panas tergukur tertimbang

Lapisan peta panas dapat merender puluhan ribu titik data dengan mudah. Untuk kumpulan data yang lebih besar, pertimbangkan untuk mengaktifkan pengelompokan pada sumber data dan menggunakan radius kluster kecil dan gunakan properti kluster point_count sebagai bobot untuk peta ketinggian. Ketika radius kluster hanya berukuran beberapa piksel, ada sedikit perbedaan visual dalam peta panas yang dirender. Menggunakan radius kluster yang lebih besar meningkatkan performa lebih banyak tetapi dapat mengurangi resolusi peta panas yang dirender.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Untuk informasi selengkapnya, lihat Pengklusteran dan lapisan peta panas.

Menjaga sumber daya gambar tetap kecil

Gambar dapat ditambahkan ke sprite gambar peta untuk ikon penyajian dalam lapisan simbol atau pola dalam lapisan poligon. Jaga agar gambar-gambar ini tetap kecil untuk meminimalkan jumlah data yang harus diunduh dan jumlah ruang yang mereka ambil dalam sprite gambar peta. Saat menggunakan layer simbol yang menskalakan ikon menggunakan opsi size, gunakan gambar yang merupakan ukuran maksimum yang rencana Anda tampilkan di peta dan tidak lebih besar. Ini memastikan ikon dirender dengan resolusi tinggi sambil meminimalkan sumber daya yang digunakannya. Selain itu, SVG juga dapat digunakan sebagai format file yang lebih kecil untuk gambar ikon sederhana.

Optimalkan ekspresi

Ekspresi gaya berbasis data memberikan fleksibilitas dan daya untuk memfilter dan menata data di peta. Ada banyak cara di mana ekspresi dapat dioptimalkan. Berikut beberapa tips.

Mengurangi kompleksitas filter

Filter mengulang semua data di sumber data dan periksa untuk melihat apakah setiap filter cocok dengan logika di filter. Jika filter menjadi kompleks, ini dapat menyebabkan masalah performa. Beberapa strategi yang mungkin untuk mengatasi hal ini termasuk yang berikut ini.

• Jika menggunakan petak peta vektor, putuskan data menjadi lapisan sumber yang berbeda.
• Jika menggunakan kelas DataSource, pecahkan data tersebut menjadi sumber data terpisah. Cobalah untuk menyeimbangkan jumlah sumber data dengan kompleksitas filter. Terlalu banyak sumber data dapat menyebabkan masalah performa juga, jadi Anda mungkin perlu melakukan beberapa pengujian untuk mengetahui apa yang paling cocok untuk skenario Anda.
• Saat menggunakan filter kompleks pada lapisan, pertimbangkan untuk menggunakan beberapa lapisan dengan ekspresi gaya untuk mengurangi kompleksitas filter. Hindari membuat banyak lapisan dengan gaya di-hardcode ketika ekspresi gaya dapat digunakan sebagai sejumlah besar lapisan juga dapat menyebabkan masalah performa.

Pastikan ekspresi tidak menghasilkan kesalahan

Ekspresi sering digunakan untuk menghasilkan kode untuk melakukan penghitungan atau operasi logis pada waktu render. Sama seperti kode di sisa aplikasi Anda, pastikan perhitungan dan logis masuk akal dan tidak rawan kesalahan. Kesalahan dalam ekspresi menyebabkan masalah dalam mengevaluasi ekspresi, yang dapat mengakibatkan berkurangnya masalah performa dan penyajian.

Salah satu kesalahan umum yang perlu diurus adalah memiliki ekspresi yang bergantung pada properti fitur yang mungkin tidak ada di semua fitur. Misalnya, kode berikut menggunakan ekspresi untuk mengatur properti warna lapisan gelembung ke myColor properti fitur.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

Kode di atas berfungsi dengan baik jika semua fitur dalam sumber data memiliki myColor properti, dan nilai properti tersebut adalah warna. Ini mungkin bukan masalah jika Anda memiliki kontrol penuh atas data di sumber data dan mengetahui untuk beberapa fitur tertentu memiliki warna yang myColor valid dalam properti. Yang mengatakan, untuk membuat kode ini aman dari kesalahan, ekspresi case dapat digunakan dengan ekspresi has untuk memeriksa bahwa fitur tersebut memiliki properti myColor. Jika ya, to-color menuliskan ekspresi yang kemudian dapat digunakan untuk mencoba mengonversi nilai properti tersebut menjadi warna. Jika warna tidak valid, warna mundur dapat digunakan. Kode berikut menunjukkan cara melakukan ini dan mengatur warna mundur menjadi hijau.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Pesan ekspresi boolean dari yang paling spesifik hingga paling tidak spesifik

Kurangi jumlah total pengujian bersyarat yang diperlukan saat menggunakan ekspresi boolean yang berisi beberapa pengujian bersyarat dengan mengurutkannya dari yang paling tidak spesifik hingga paling tidak spesifik.

Menyederhanakan ekspresi

Ekspresi bisa kuat dan kadang-kadang kompleks. Semakin sederhana ekspresinya, semakin cepat dievaluasi. Misalnya, jika perbandingan sederhana diperlukan, ekspresi seperti ['==', ['get', 'category'], 'restaurant'] akan lebih baik daripada menggunakan ekspresi kecocokan seperti ['match', ['get', 'category'], 'restaurant', true, false]. Dalam hal ini, jika properti yang diperiksa adalah nilai boolean, ekspresi get akan lebih sederhana ['get','isRestaurant'].

Pemecahan masalah Web SDK

Berikut ini adalah beberapa tips untuk men-debug beberapa masalah umum yang dihadapi saat mengembangkan dengan Azure Maps Web SDK.

Mengapa peta tidak ditampilkan saat saya memuat kontrol web?

Hal yang perlu diperiksa:

• Pastikan Anda menyelesaikan opsi autentikasi di peta. Tanpa autentikasi, peta memuat kanvas kosong dan mengembalikan kesalahan 401 di tab jaringan alat pengembang browser.
• Pastikan Anda memiliki koneksi internet.
• Periksa konsol untuk kesalahan alat pengembang browser. Beberapa kesalahan dapat menyebabkan peta tidak dirender. Debug aplikasi Anda.
• Pastikan Anda menggunakan browser yang didukung.

Semua data saya muncul di belahan dunia lain, apa yang terjadi?

Koordinat, juga disebut sebagai posisi, dalam Azure Maps SDKs selaras dengan format standar industri geospasi [longitude, latitude]. Format yang sama ini juga bagaimana koordinat didefinisikan dalam skema GeoJSON; data inti yang diformat digunakan dalam SDK Azure Maps. Jika data Anda muncul di sisi dunia yang berlawanan, kemungkinan besar karena nilai bujur dan lintang dibalik dalam informasi koordinat/posisi Anda.

Mengapa penanda HTML muncul di tempat yang salah di kontrol web?

Hal yang perlu diperiksa:

• Jika menggunakan konten kustom untuk penanda, pastikan opsi anchor dan pixelOffset sudah benar. Secara default, bagian tengah bawah konten diselaraskan dengan posisi di peta.
• Pastikan bahwa file CSS untuk Azure Maps telah dimuat.
• Periksa elemen DOM penanda HTML untuk melihat apakah ada CSS dari aplikasi Anda yang ditambahkan sendiri ke penanda dan mempengaruhi posisinya.

Mengapa ikon atau teks di lapisan simbol muncul di tempat yang salah?

Periksa apakah anchor opsi dan dikonfigurasi offset dengan benar untuk menyelaraskan dengan bagian gambar atau teks yang ingin Anda ratakan dengan koordinat di peta. Jika simbol hanya tidak pada tempatnya saat peta diputar, centang opsi rotationAlignment. Secara default, simbol berputar dengan viewport peta, muncul tegak kepada pengguna. Namun, tergantung pada skenario Anda, mungkin diinginkan untuk mengunci simbol ke orientasi peta dengan mengatur rotationAlignment opsi ke map.

Jika simbol hanya tidak pada tempatnya saat peta bernada/miring, centang opsi pitchAlignment. Secara default, simbol tetap tegak di viewport peta saat peta bernada atau miring. Namun, tergantung pada skenario Anda, mungkin diinginkan untuk mengunci simbol ke pitch peta dengan mengatur pitchAlignment opsi ke map.

Mengapa data saya tidak muncul di peta?

Hal yang perlu diperiksa:

• Periksa konsol di alat pengembang browser untuk kesalahan.
• Pastikan bahwa sumber data telah dibuat dan ditambahkan ke peta, dan bahwa sumber data telah terhubung ke lapisan penyajian yang juga telah ditambahkan ke peta.
• Tambahkan titik henti dalam kode Anda dan lakukan langkah-langkahnya. Pastikan data ditambahkan ke sumber data dan sumber data dan lapisan ditambahkan ke peta.
• Coba hapus ekspresi berbasis data dari lapisan penyajian Anda. Ada kemungkinan bahwa salah satu dari mereka mungkin memiliki kesalahan di dalamnya yang menyebabkan masalah.

Bisakah saya menggunakan Azure Maps Web SDK di iframe dalam kotak pasir?

Ya.

Mendapatkan dukungan

Berikut ini adalah berbagai cara untuk mendapatkan dukungan untuk Azure Maps tergantung pada masalah Anda.

Bagaimana cara melaporkan masalah data atau masalah dengan alamat?

Laporkan masalah menggunakan situs umpan balik Azure Peta. Petunjuk terperinci tentang pelaporan masalah data disediakan dalam artikel Berikan umpan balik data ke Azure Maps.

Catatan

Tiap masalah yang dikirimkan menghasilkan URL unik untuk pelacakannya. Waktu resolusi bervariasi tergantung pada jenis masalah dan waktu yang diperlukan untuk memverifikasi perubahan sudah benar. Perubahan akan muncul dalam pembaruan mingguan layanan render, sementara layanan lain seperti geocoding dan routing diperbarui setiap bulan.

Bagaimana cara melaporkan bug dalam layanan atau API?

Laporkan masalah pada halaman Bantuan + dukungan Azure dengan memilih tombol Buat permintaan dukungan.

Di mana saya bisa mendapatkan bantuan teknis untuk Azure Maps?

• Untuk pertanyaan terkait visual Azure Maps Power BI, hubungi dukungan Power BI.

• Untuk semua layanan Azure Maps lainnya, hubungi dukungan Azure.

• Untuk pertanyaan atau komentar tentang Fitur Azure Maps tertentu, gunakan forum pengembang Azure Maps.

Langkah berikutnya

Lihat artikel berikut untuk tips selengkapnya tentang meningkatkan pengalaman pengguna di aplikasi Anda.

Membuat aplikasi Anda dapat diakses

Pelajari selengkapnya tentang terminologi yang digunakan oleh Azure Maps dan industri geospasial.

Glosarium Azure Maps