Memuat lapisan ubin vektor di peta Leaflet?


9

Saya perlu memuat lapisan ubin vektor dalam peta Leaflet.

Ubin vektor adalah lapisan ubin vektor tentang urutan Mapillary (lihat https://a.mapillary.com/#vector-tiles ...), dan pola URL ubin adalah:

https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox

petak vektor menggunakan format petak vektor Mapbox.

Saya telah mencari di internet tetapi saya belum menemukan sampel: Saya telah melihat bahwa ini bisa dilakukan menggunakan Mapbox, tetapi jika mungkin saya ingin menggunakan hanya Leaflet

Jawaban:


11

Di Leaflet 0.7x, ini dipermudah dengan Leaflet.MapboxVectorTileplugin . Anda hanya perlu menentukan pola URL di urlopsi konfigurasi. Dokumentasi plugin merinci opsi konfigurasi lain yang tersedia. Untuk menambahkan data Mapillary, Anda akan menggunakannya seperti ini:

var config = {
  url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox"
};
var mapillarySource = new L.TileLayer.MVTSource(config);
map.addLayer(mapillarySource);

Berikut ini biola yang menunjukkan hasilnya:

http://fiddle.jshell.net/nathansnider/sj12o4hj/

Untuk Leaflet 1.0x, Anda akan ingin menggunakan Leaflet.VectorGrid 's L.vectorGrid.protobufmetode. Ini memiliki sejumlah opsi gaya yang dijelaskan dalam dokumen, tetapi untuk hanya memuat ubin, Anda akan menggunakannya seperti ini:

var url = 'https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox';
var mapillaryLayer = L.vectorGrid.protobuf(url).addTo(map);

Contoh biola:

http://fiddle.jshell.net/nathansnider/mwmpmLo7/


Bagus!! bekerja. Sederhana, jelas dan dengan contoh. Terbaik!
Cesare

3
@nathansnider JSFiddle Anda tidak dapat dijangkau. Akan menyukai contoh yang tepat tentang cara membaca ubin berbasis vektor dengan leaflet
LBes

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.