Carregando a camada de mosaico vetorial no mapa do Leaflet?

9

Preciso carregar uma camada de bloco de vetor em um mapa do Leaflet.

O bloco de vetor é a camada de bloco de vetor sobre sequências Mapillary (consulte https://a.mapillary.com/#vector-tiles ...) e o padrão de URL do bloco é:

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

o bloco de vetor usa o formato de bloco de vetor Mapbox.

Pesquisei na net, mas não encontrei uma amostra: vi que isso pode ser feito usando o Mapbox, mas, se possível, eu gostaria de usar apenas o Leaflet

Cesare
fonte

Respostas:

11

No Folheto 0.7x, isso é facilitado com o Leaflet.MapboxVectorTileplugin . Você só precisa especificar o padrão de URL na urlopção de configuração. A documentação do plug-in detalha as outras opções de configuração disponíveis. Para adicionar os dados Mapillary, você os usaria assim:

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

Aqui está um violino mostrando o resultado:

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

Para o Leaflet 1.0x, você desejará usar o método do Leaflet.VectorGridL.vectorGrid.protobuf . Ele tem várias opções de estilo descritas nos documentos, mas, para carregar os blocos, você usaria da seguinte maneira:

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

Exemplo de violino:

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

nathansnider
fonte
Ótimo!! está funcionando. Simples, claro e com exemplo. Ao melhor!
Cesare
3
@nathansnider Seu JSFiddle não está acessível. Adoraria um bom exemplo sobre como ler azulejos baseados em vetores com folheto
LBes
4

Veja a lista de plugins do Leaflet para blocos de vetor . Observe que o MapboxVectorTile e o hoverboard funcionam apenas com o Leaflet 0.7.x, que será descontinuado pelo Leaflet 1 "Really Soon ™".

IvanSanchez
fonte