リーフレットマップにベクタータイルレイヤーを読み込んでいますか?


9

リーフレットマップにベクタータイルレイヤーを読み込む必要があります。

ベクタータイルは、Mapillaryシーケンスに関するベクタータイルレイヤーであり(https://a.mapillary.com/#vector-tiles ...を参照)、タイルURLパターンは次のとおりです。

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

ベクタータイルは、Mapboxベクタータイル形式を使用します。

ネットで検索しましたが、サンプルが見つかりませんでした。Mapboxを使用してこれを実行できることは確認しましたが、可能であれば、リーフレットのみを使用したい

回答:


11

Leaflet 0.7xでは、これはLeaflet.MapboxVectorTileプラグインで簡単に行えますurl構成オプションでURLパターンを指定するだけです。プラグインのドキュメントには、利用可能なその他の設定オプションの詳細が記載されています。Mapillaryデータを追加するには、次のように使用します。

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

これは結果を示すフィドルです:

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

Leaflet 1.0xの場合、Leaflet.VectorGridL.vectorGrid.protobufメソッドを使用します。ドキュメントに記載されている多くのスタイルオプションがありますが、タイルをロードするだけの場合は、次のように使用します。

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

フィドルの例:

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


すごい!!それは働いています。シンプルで明快、例あり。最高の!
チェーザレ

3
@nathansnider JSFiddleに到達できません。リーフレットでベクターベースのタイルを読み取る方法の適切な例が好きですか
LBes

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.