¿Cargar la capa de azulejos vectoriales en el mapa de Leaflet?

Question

Necesito cargar una capa de azulejos vectoriales en un mapa Leaflet.

El azulejo vectorial es la capa de azulejos vectoriales sobre secuencias de Mapillary (véase https://a.mapillary.com/#vector-tiles ...), y el patrón de URL de las baldosas es:

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

el mosaico vectorial utiliza el formato de mosaico vectorial de Mapbox.

He buscado en la red pero no he encontrado ninguna muestra: He visto que se podría hacer usando Mapbox, pero si es posible me gustaría usar sólo Leaflet

Answer 1

En Leaflet 0.7x, esto se facilita con la función Leaflet.MapboxVectorTile plugin . Sólo tiene que especificar el patrón de URL en el campo url opción de configuración. La documentación del plugin detalla la otras opciones de configuración disponibles. Para añadir los datos de Mapillary, se utilizarí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í tienes un fiddle que muestra el resultado:

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

Para Leaflet 1.0x, deberá utilizar Folleto.VectorGrid 's L.vectorGrid.protobuf método. Tiene una serie de opciones de estilo descrito en la documentación, pero para cargar sólo los azulejos, lo usarías así:

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

Ejemplo violín:

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

Answer 2

Consulte la lista de Plugins de folletos para azulejos vectoriales . Tenga en cuenta que MapboxVectorTile y hoverboard sólo funcionan con Leaflet 0.7.x, que será obsoleto por Leaflet 1 "Really Soon™".