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

9

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

Cesare
la source

Réponses:

11

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/

nathansnider
la source
Génial!! ça marche. Simple, clair et avec exemple. Le meilleur!
Cesare
3
@nathansnider Votre JSFiddle n'est pas accessible. J'adorerais un bon exemple sur la façon de lire des tuiles vectorielles avec un dépliant
LBes
4

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 ™".

IvanSanchez
la source