经纬志
首页 / OpenLayers / 使用示例

GeoJSON 矢量切片

三千多个格网要素按分辨率重绘,用分层配色模拟切片后的分级出图。

OpenLayers 10.3.1 · 对应官方 geojson-vt.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

官方示例用 geojson-vt 把 GeoJSON 在浏览器里切成矢量瓦片。这里换一种做法:同一份格网数据交给 ol.layer.VectorImage,靠 renderBuffer 与分辨率控制重绘量,效果接近切片后的分级显示。

3600 个格网多边形各带一个指标值,样式函数按阈值分三档配色;moveend 里报告当前缩放与要素总数,便于对照切片层级的概念。

操作结果
缩放地图格网随分辨率重绘
对照图例三档阈值对应三种颜色
放大到街道级单格尺寸变大,边界更清楚

浏览器端切片的意义在于把全量几何换成按需图层,数据量再大也要限制单屏要素数。