Geojson-vtTileIndex.getTile()
返回 Mapbox 矢量切片规范的 JSON 版本:
我不知道有任何库可以显示这种格式。事实上,Mapbox 自己的演示在相当低的层次上实现了可视化:
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 和相关博客文章中有各种引用Mapbox-gl-js 由 geojson-vt “驱动”,但没有明确说明如何使其工作。也许更好的方法是简单地使用mapbox-gl-js GeoJSONSource。