geojson-vtによって生成されたベクトルタイルをリーフレットに表示するにはどうすればよいですか？

Question

私はチラシマップに表示したいGeoJSON空間データをたくさん持っています。およそ35,000のGeoJSONオブジェクト。

ポイントの量が非常に多く得ることができますので、私はタイルに、クライアント側での私のデータをgeojson-vtライブラリを使用していました。

今私が正常にGeoJSON-VTライブラリを使用して自分のデータをタイル張り：

var geoJson = {}; // Request to get data via API call not shown here 

var tileOptions = { 
     maxZoom: 18, 
     tolerance: 5, 
     extent: 4096, 
     buffer: 64, 
     debug: 0, 
     indexMaxZoom: 0, 
     indexMaxPoints: 100000, 
    }; 

var tileIndex = geojsonvt(geoJson, tileOptions); 

は、どのように私は私のリーフレットマップににGeoJSON-VTによって生成されたベクタタイルデータを統合するのですか？

おすすめのプラグインやライブラリがありますか？

Answer 1

にGeoJSON-VTのTileIndex.getTile()はMapboxベクトルタイル仕様のJSONバージョンを返します。

私はこのフォーマットを表示することができます任意のライブラリを認識していませんよ。確かに、Mapbox's own demoはかなり低いレベルでの可視化を実装しています

var tile = tileIndex.getTile(z, x, y); 

console.timeEnd('getting tile z' + z + '-' + x + '-' + y); 

if (!tile) { 
    console.log('tile empty'); 
    zoomOut(); 
    return; 
} 

// console.log('z%d-%d-%d: %d points of %d', z, x, y, tile.numSimplified, tile.numPoints); 
// console.time('draw'); 

ctx.clearRect(0, 0, height, height); 

var features = tile.features; 

ctx.strokeStyle = 'red'; 
ctx.fillStyle = 'rgba(255,0,0,0.05)'; 

for (var i = 0; i < features.length; i++) { 
    var feature = features[i], 
     type = feature.type; 

    ctx.beginPath(); 

    for (var j = 0; j < feature.geometry.length; j++) { 
     var geom = feature.geometry[j]; 

     if (type === 1) { 
      ctx.arc(geom[0] * ratio + pad, geom[1] * ratio + pad, 2, 0, 2 * Math.PI, false); 
      continue; 
     } 

     for (var k = 0; k < geom.length; k++) { 
      var p = geom[k]; 
      if (k) ctx.lineTo(p[0] * ratio + pad, p[1] * ratio + pad); 
      else ctx.moveTo(p[0] * ratio + pad, p[1] * ratio + pad); 
     } 
    } 

    if (type === 3 || type === 1) ctx.fill('evenodd'); 
    ctx.stroke(); 
} 
drawGrid(); 

あなたはあなたを助けるために自分のコードの一部を使用することができます。

は、さまざまなREADME内の参照とにGeoJSON-VT「を搭載し、」Mapbox-GL-jsがあることにrelated blog postが、その作業を行う方法についての明示的な指示があります。おそらく、より良いアプローチは、単にmapbox-gl-jsGeoJSONSourceを使用することです。

Answer 2

このexampleには、L.CanvasTilesを使用してリーフレットマップにgeojson-vtをレンダリングする方法が示されています。

問題は、この例で示したSumberaのCanvasTiles拡張機能は、小文字0.7までしか機能しないということです。 CanvasTilesのリポジトリは特に見つかりませんでしたが、npmパッケージはそれほど多くありません。