Jak wyświetlić kafelki wektorowe wygenerowane przez geojson-vt w ulotce?

Question

Mam wiele danych przestrzennych GeoJSON, które chcę wyświetlić na mapie ulotek. Około 35 000 obiektów GeoJSON.

Ponieważ ilość punktów może być bardzo duża, chciałem użyć biblioteki geojson-vt do płytek moich danych po stronie klienta.

Teraz mam powodzeniem kafelki moich danych za pomocą biblioteki 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); 

Jak zintegrować dane dachówka wektora generowane przez GeoJSON-VT mojego Ulotka mapie?

Czy są jakieś zalecane wtyczki lub biblioteki, które mogą pomóc?

Answer 1

GeoJSON-VT za TileIndex.getTile() powraca wersja JSON z Mapbox płytek wektor specyfikacji:

nie jestem świadomy każdej bibliotece, który może wyświetlać ten format. Rzeczywiście, Mapbox's own demo realizuje wizualizację na dość niskim poziomie:

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(); 

Możesz być w stanie korzystać z niektórych ich kodu, aby pomóc.

Istnieją różne odniesienia w README i related blog post do Mapbox-gl-js jako "powered by" geojson-vt, ale brak wyraźnych instrukcji jak to zrobić. Być może lepszym rozwiązaniem jest po prostu użycie mapbox-gl-jsGeoJSONSource.

Answer 2

W tym example pokazano, jak renderować geojson-vt w mapie ulotek za pomocą L.CanvasTiles.

Problem polega na tym, że rozszerzenie Sumbera CanvasTiles przedstawione w tym przykładzie działa tylko do ulotek 0.7. Nie znalazłem repozytorium dla CanvasTiles, a tym bardziej dla pakietu npm.