Ładowanie warstwy kafli wektorowych na mapie Ulotki?

9

Muszę załadować warstwę kafli wektorowych na mapie Ulotki.

Kafelek wektorów to warstwa kafelków wektorowych o sekwencji Mapillary (patrz https://a.mapillary.com/#vector-tiles ...), a wzór adresu URL kafelka to:

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

kafelek wektorów używa formatu kafelków wektorowych Mapbox.

Szukałem w sieci, ale nie znalazłem próbki: Widziałem, że można to zrobić za pomocą Mapbox, ale jeśli to możliwe, chciałbym użyć tylko Ulotki

Cesare
źródło

Odpowiedzi:

11

W Ulotce 0.7x jest to łatwe dzięki Leaflet.MapboxVectorTilewtyczce . Wystarczy określić wzorzec adresu URL w urlopcji konfiguracji. Dokumentacja wtyczki wyszczególnia inne dostępne opcje konfiguracji . Aby dodać dane Mapillary, użyjesz ich w następujący sposób:

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

Oto skrzypce pokazujące wynik:

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

Ulotka dla 1,0x, będziemy chcieli, aby korzystać Leaflet.VectorGrid „s L.vectorGrid.protobufmetody. Ma wiele opcji stylizacji opisanych w dokumentach, ale w celu załadowania kafelków użyjesz go w następujący sposób:

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

Przykładowe skrzypce:

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

nathansnider
źródło
Świetny!! to działa. Prosty, jasny i przykładowy. Najlepszy!
Cesare
3
@nathansnider Twój JSFiddle jest niedostępny. Z
przyjemnością podam
4

Zobacz listę wtyczek Ulotki dla kafelków wektorowych . Należy pamiętać, że MapboxVectorTile i hoverboard działają tylko z Ulotką 0.7.x, która zostanie wycofana z Ulotki 1 „Naprawdę wkrótce”.

IvanSanchez
źródło