Cargando capa de mosaico de vectores en el mapa de folleto?

9

Necesito cargar una capa de mosaico vectorial en un mapa de folleto.

El mosaico de vectores es la capa de mosaicos de vectores sobre secuencias Mapillary (mire https://a.mapillary.com/#vector-tiles ...), y el patrón de URL de mosaico es:

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

el mosaico de vectores usa el formato de mosaico de vectores de Mapbox.

He buscado en la red pero no he encontrado una muestra: he visto que esto se puede hacer usando Mapbox, pero si es posible me gustaría usar solo Leaflet

Cesare
fuente

Respuestas:

11

En Leaflet 0.7x, esto se hace fácil con el Leaflet.MapboxVectorTilecomplemento . Solo necesita especificar el patrón de URL en la urlopción de configuración. La documentación del complemento detalla las otras opciones de configuración que están disponibles. Para agregar los datos Mapillary, los usaría así:

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

Aquí hay un violín que muestra el resultado:

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

Para Leaflet 1.0x, querrá usar el método Leaflet.VectorGridL.vectorGrid.protobuf . Tiene una serie de opciones de estilo descritas en los documentos, pero solo para cargar los mosaicos, lo usaría así:

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

Violín de ejemplo:

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

nathansnider
fuente
¡¡Excelente!! esta funcionando. Simple, claro y con ejemplo. ¡El mejor!
Cesare
3
@nathansnider Su JSFiddle no es accesible. Me encantaría un ejemplo adecuado sobre cómo leer mosaicos basados ​​en vectores con folletos
LBes