Menambahkan lapisan petak ke peta
Artikel ini menjelaskan cara menambahkan overlay lapisan petak pada peta. Lapisan petak peta memungkinkan Anda mengganti gambar di atas petak peta dasar Azure Maps. Untuk informasi selengkapnya tentang sistem petak peta Azure Maps, lihat Tingkat pembesaran tampilan dan kisi petak peta.
Lapisan petak dimuat dalam petak dari server. Gambar-gambar ini dapat dirender sebelumnya atau dirender secara dinamis. Gambar yang telah dirender disimpan seperti gambar lain di server menggunakan konvensi penamaan yang dipahami lapisan petak peta. Citra yang dirender secara dinamis menggunakan layanan untuk memuat citra yang dekat dengan waktu nyata. Ada tiga konvensi penamaan layanan petak yang berbeda yang didukung oleh kelas TileLayer Azure Maps:
- X, Y, Notasi pembesaran - X adalah kolom, Y adalah posisi baris petak di grid petak, dan Notasi pembesaran adalah nilai berdasarkan tingkat pembesaran.
- Notasi quadkey - Menggabungkan informasi x, y, dan pembesaran menjadi nilai string tunggal. Nilai string ini menjadi pengenal unik untuk satu petak.
- Kotak Pembatas - Menentukan gambar dalam format koordinat Kotak pembatas:
{west},{south},{east},{north}. Format ini biasanya digunakan oleh layanan pemetaan web (WMS).
Tip
TileLayer adalah cara yang baik untuk memvisualisasikan set data yang besar di peta. Tidak hanya lapisan petak yang dapat dihasilkan dari gambar, data vektor juga dapat dirender sebagai lapisan petak. Dengan merender data vektor sebagai lapisan petak, kontrol peta hanya perlu memuat petak yang ukurannya lebih kecil dari data vektor yang diwakilinya. Teknik ini biasanya digunakan untuk merender jutaan baris data di peta.
URL petak yang diteruskan ke lapisan petak harus berupa URL http atau https ke sumber daya TileJSON atau templat URL petak yang menggunakan parameter berikut:
{x}- Posisi X petak peta. Juga membutuhkan{y}dan{z}.{y}- Posisi Y petak. Juga membutuhkan{x}dan{z}.{z}-Tingkat pembesaran petak. Juga membutuhkan{x}dan{y}.{quadkey}- Pengenal quadkey petak berdasarkan konvensi penamaan sistem petak Bing Maps.{bbox-epsg-3857}- String kotak pembatas dengan format{west},{south},{east},{north}dalam Sistem Referensi Spasial EPSG 3857.{subdomain}- Tempat penampung untuk nilai subdomain, jika ditentukansubdomainditambahkan.{azMapsDomain}- Placeholder untuk menyelaraskan domain dan autentikasi permintaan petak dengan nilai yang sama dengan yang digunakan oleh peta.
Menambahkan lapisan petak peta
Contoh ini menunjukkan cara membuat lapisan petak yang menunjukkan sekumpulan petak. Sampel ini menggunakan sistem pembesaran petak x, y. Sumber lapisan petak peta ini adalah proyek OpenSeaMap, yang berisi bagan nautik yang bersumber dari kerumunan. Idealnya pengguna akan dengan jelas melihat label kota saat mereka menavigasi peta saat melihat data radar. Perilaku ini dapat diterapkan dengan menyisipkan lapisan petak di bawah lapisan labels.
//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
opacity: 0.8,
tileSize: 256,
minSourceZoom: 7,
maxSourceZoom: 17
}), 'labels');
Untuk sampel yang berfungsi penuh yang menunjukkan cara membuat lapisan petak peta yang menunjuk ke sekumpulan petak peta menggunakan sistem petak peta x, y, zoom, lihat sampel Lapisan Petak peta menggunakan X, Y, dan Z di Sampel Azure Peta. Sumber lapisan petak dalam sampel ini adalah bagan bahtera dari proyek OpenSeaMap, proyek OpenStreet Peta yang dilisensikan di bawah ODbL. Untuk kode sumber untuk sampel ini, lihat Lapisan Petak menggunakan kode sumber X, Y, dan Z.
Menambahkan layanan pemetaan web (WMS) OGC
Layanan pemetaan web (WMTS) adalah standar Open Geospatial Consortium (OGC) untuk menyajikan gambar data peta. Ada banyak set data terbuka yang tersedia dalam format ini yang dapat Anda gunakan dengan Azure Maps. Jenis layanan ini dapat digunakan dengan lapisan petak jika layanan mendukung sistem referensi koordinat (CRS) EPSG:3857. Saat menggunakan layanan WMS, atur parameter lebar dan tinggi ke nilai yang didukung oleh layanan, pastikan untuk mengatur nilai ini dalam tileSize opsi . Di URL yang diformat, atur parameter BBOX layanan dengan placeholder {bbox-epsg-3857}.
Untuk sampel fungsi penuh yang menunjukkan cara membuat lapisan petak peta yang menunjuk ke Layanan Pemetaan Web (WMS), lihat sampel Lapisan Petak Peta WMS di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Kode sumber Lapisan Petak Peta WMS.
Cuplikan layar berikut menunjukkan sampel Lapisan Petak WMS yang melapisi layanan pemetaan web data geologis dari Survei Geologi AS (USGS) di atas peta dan di bawah label.
Menambahkan layanan petak pemetaan web OGC (WMTS)
Layanan petak pemetaan web (WMTS) adalah standar Open Geospatial Consortium (OGC) untuk melayani overlay berbasis petak untuk peta. Ada banyak set data terbuka yang tersedia dalam format ini yang dapat Anda gunakan dengan Azure Maps. Jenis layanan ini dapat digunakan dengan lapisan petak jika layanan mendukung EPSG:3857 atau sistem referensi koordinat (CRS) GoogleMapsCompatible. Saat menggunakan layanan WMTS, atur parameter lebar dan tinggi ke nilai yang sama yang didukung oleh layanan, pastikan untuk juga mengatur nilai ini dalam tileSize opsi . Di URL yang diformat, ganti placeholder berikut dengan tepat:
{TileMatrix}=>{z}{TileRow}=>{y}{TileCol}=>{x}
Untuk sampel fungsi penuh yang menunjukkan cara membuat lapisan petak peta yang menunjuk ke Layanan Petak Peta Pemetaan Web (WMTS), lihat sampel Lapisan Petak Peta WMTS di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Kode sumber Lapisan Petak WMTS.
Cuplikan layar berikut menunjukkan sampel Lapisan Petak Peta WMTS yang melapisi layanan petak peta pemetaan web citra dari Peta Nasional Us.S. Geological Survey (USGS) di atas peta, di bawah jalan dan label.
Sesuaikan lapisan petak
Kelas lapisan petak memiliki banyak opsi gaya. Sampel Opsi Lapisan Petak adalah alat untuk mencobanya. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Lapisan Petak Peta.
Langkah berikutnya
Pelajari selengkapnya tentang kelas dan metode yang digunakan di artikel ini:
Lihat artikel berikut untuk mengetahui sampel kode lainnya yang akan ditambahkan ke peta Anda: