@2gis/geojson-vt 中文文档教程
geojson-vt — GeoJSON Vector Tiles
一个高效的 JavaScript 库，用于动态地将 GeoJSON 数据切片成矢量切片， 主要旨在实现大型地理空间数据集的渲染和交互 在浏览器端（没有服务器）。
创建用于在 Mapbox GL JS 中为 GeoJSON 提供支持， 但在其他可视化平台中也很有用 像 Leaflet、OpenLayers 和 d3, 以及 Node.js 服务器应用程序。
生成的图块符合等效的 JSON 矢量切片规范。 为了使数据渲染和交互更快，瓦片被简化， 保留适合每个缩放级别的最低细节级别 （简化形状，过滤掉微小的多边形和折线）。
有一个 C++11 端口：geojson-vt-cpp
Demo
这是geojson-vt Mapbox GL JS 中的操作， 动态加载一个 100Mb 的美国邮政编码 GeoJSON 和 540 万个点
： >
有一个方便的调试页面可以在不同的数据上测试geojson-vt。 只需在页面上拖动任何 GeoJSON，观察控制台。
Usage
// build an initial index of tiles
var tileIndex = geojsonvt(geoJSON);
// request a particular tile
var features = tileIndex.getTile(z, x, y).features;
// show an array of tile coordinates created so far
console.log(tileIndex.tileCoords); // [{z: 0, x: 0, y: 0}, ...]
Options
您可以使用选项对象微调结果， 尽管默认值是合理的并且适用于大多数用例。
var tileIndex = geojsonvt(data, {
maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24
tolerance: 3, // simplification tolerance (higher means simpler)
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
debug: 0, // logging level (0 to disable, 1 or 2)
lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features
promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`
generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`
indexMaxZoom: 5, // max zoom in the initial tile index
indexMaxPoints: 100000 // max number of points per tile in the index
});
默认情况下，缩放级别高于 indexMaxZoom 的图块是动态生成的，但您可以通过设置 indexMaxZoom 为 data 预先生成所有可能的图块和 maxZoom 设置为相同的值，将 indexMaxPoints 设置为 0，然后从 tileCoords 访问生成的图块坐标tileIndex 的属性。
promoteId 和 generateId 选项忽略要素对象上现有的 id 值。
GeoJSON-VT 仅在最大 24 的缩放级别上运行。
Install
使用 NPM（npm install geojson-vt）或 Yarn（yarn add geojson-vt）安装，然后：
// import as a ES module
import geojsonvt from 'geojson-vt';
// or require in Node / Browserify
const geojsonvt = require('geojson-vt');
或使用浏览器直接构建：
<script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>
geojson-vt — GeoJSON Vector Tiles
A highly efficient JavaScript library for slicing GeoJSON data into vector tiles on the fly, primarily designed to enable rendering and interacting with large geospatial datasets on the browser side (without a server).
Created to power GeoJSON in Mapbox GL JS, but can be useful in other visualization platforms like Leaflet, OpenLayers and d3, as well as Node.js server applications.
Resulting tiles conform to the JSON equivalent of the vector tile specification. To make data rendering and interaction fast, the tiles are simplified, retaining the minimum level of detail appropriate for each zoom level (simplifying shapes, filtering out tiny polygons and polylines).
Read more on how the library works on the Mapbox blog.
There's a C++11 port: geojson-vt-cpp
Demo
Here's geojson-vt action in Mapbox GL JS, dynamically loading a 100Mb US zip codes GeoJSON with 5.4 million points:
There's a convenient debug page to test out geojson-vt on different data. Just drag any GeoJSON on the page, watching the console.
Usage
// build an initial index of tiles
var tileIndex = geojsonvt(geoJSON);
// request a particular tile
var features = tileIndex.getTile(z, x, y).features;
// show an array of tile coordinates created so far
console.log(tileIndex.tileCoords); // [{z: 0, x: 0, y: 0}, ...]
Options
You can fine-tune the results with an options object, although the defaults are sensible and work well for most use cases.
var tileIndex = geojsonvt(data, {
maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24
tolerance: 3, // simplification tolerance (higher means simpler)
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
debug: 0, // logging level (0 to disable, 1 or 2)
lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features
promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`
generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`
indexMaxZoom: 5, // max zoom in the initial tile index
indexMaxPoints: 100000 // max number of points per tile in the index
});
By default, tiles at zoom levels above indexMaxZoom are generated on the fly, but you can pre-generate all possible tiles for data by setting indexMaxZoom and maxZoom to the same value, setting indexMaxPoints to 0, and then accessing the resulting tile coordinates from the tileCoords property of tileIndex.
The promoteId and generateId options ignore existing id values on the feature objects.
GeoJSON-VT only operates on zoom levels up to 24.
Install
Install using NPM (npm install geojson-vt) or Yarn (yarn add geojson-vt), then:
// import as a ES module
import geojsonvt from 'geojson-vt';
// or require in Node / Browserify
const geojsonvt = require('geojson-vt');
Or use a browser build directly:
<script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>
