Как отображать векторные плитки, созданные 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-ЖТ моей Листовка карте?

Есть ли рекомендованные плагины или библиотеки, которые могут вам помочь?

Answer 1

GeoJSON-ВТ TileIndex.getTile() возвращает версию JSON вектора плитки спецификации MapBox:

Я не знаю ни библиотеки, которая может отображать этот формат. Действительно, 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 и related blog post есть ссылки на Mapbox-gl-js, которые «работают от geojson-vt», но не имеют явных инструкций о том, как это сделать. Возможно, лучший подход - просто использовать mapbox-gl-jsGeoJSONSource.

Answer 2

В этом example показано, как визуализировать geojson-vt на карте листовки, используя L.CanvasTiles.

Проблема в том, что расширение CanvasTiles Sumbera, изображенное в этом примере, работает только с листом 0.7. Я не нашел репо для CanvasTiles в частности, а тем более для пакета npm для него.