Laden der Vektor-Kachelebene in der Merkblattkarte?

9

Ich muss eine Vektorkachelebene in eine Merkblattkarte laden.

Die Vektorkachel ist die Vektorkachelebene für Mapillary-Sequenzen (siehe https://a.mapillary.com/#vector-tiles ...), und das Kachel-URL-Muster lautet:

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

Die Vektorkachel verwendet das Mapbox-Vektorkachelformat.

Ich habe im Internet gesucht, aber kein Beispiel gefunden: Ich habe gesehen, dass dies mit Mapbox möglich ist, aber wenn es möglich ist, möchte ich nur Leaflet verwenden

Cesare
quelle

Antworten:

11

In Leaflet 0.7x wird dies mit dem Leaflet.MapboxVectorTilePlugin einfach gemacht . Sie müssen nur das URL-Muster in der urlKonfigurationsoption angeben . In der Plugin-Dokumentation werden die anderen verfügbaren Konfigurationsoptionen beschrieben . Um die Mapillary-Daten hinzuzufügen, würden Sie sie folgendermaßen verwenden:

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

Hier ist eine Geige, die das Ergebnis zeigt:

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

Für Leaflet 1.0x möchten Sie die L.vectorGrid.protobufMethode von Leaflet.VectorGrid verwenden. Es gibt eine Reihe von Stiloptionen, die in den Dokumenten beschrieben sind. Zum Laden der Kacheln können Sie sie jedoch folgendermaßen verwenden:

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

Beispiel Geige:

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

nathansnider
quelle
Groß!! es funktioniert. Einfach, klar und mit Vorbild. Das beste!
Cesare
3
@nathansnider Ihre JSFiddle ist nicht erreichbar. Würde ein richtiges Beispiel lieben, wie man vektorbasierte Kacheln mit Faltblatt
liest