Chargement de la couche de tuiles vectorielles dans la carte Leaflet?

J'ai besoin de charger une couche de tuiles vectorielles dans une carte Leaflet.

La tuile vectorielle est la couche de tuiles vectorielles sur les séquences mapillaires (regardez https://a.mapillary.com/#vector-tiles ...), et le modèle d'URL de la tuile est:

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

la vignette vectorielle utilise le format de vignette vectorielle Mapbox.

J'ai cherché sur le net mais je n'ai pas trouvé d'échantillon: j'ai vu que cela pouvait se faire en utilisant Mapbox, mais si c'est possible j'aimerais utiliser uniquement Leaflet

Dans Leaflet 0.7x, cela est rendu facile avec le Leaflet.MapboxVectorTileplugin . Il vous suffit de spécifier le modèle d'URL dans l' urloption de configuration. La documentation du plugin détaille les autres options de configuration disponibles. Pour ajouter les données Mapillary, vous devez les utiliser comme ceci:

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

Voici un violon montrant le résultat:

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

Pour Leaflet 1.0x, vous voudrez utiliser la méthode de Leaflet.VectorGridL.vectorGrid.protobuf . Il a un certain nombre d' options de style décrites dans la documentation, mais pour simplement charger les tuiles, vous devez l'utiliser comme ceci:

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

Exemple de violon:

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

Voir la liste des plugins Leaflet pour les tuiles vectorielles . Notez que MapboxVectorTile et hoverboard fonctionnent uniquement avec Leaflet 0.7.x, qui sera déconseillé par Leaflet 1 "Really Soon ™".