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

Cesare
sumber

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/

nathansnider
sumber
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
4

Lihat daftar plugin Leaflet untuk ubin vektor . Perhatikan bahwa MapboxVectorTile dan hoverboard hanya berfungsi dengan Leaflet 0.7.x, yang akan dihentikan oleh Leaflet 1 "Really Soon ™".

Ivan Sanchez
sumber