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

从零生成数据瓦片

把一块范围均分成网格,每个格子生成一个数值并画成矢量瓦片,颜色由数值决定,层级滑块改变格子密度。

OpenLayers 10.3.1 · 对应官方 data-tiles.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

数据瓦片的基本单位是「一小块范围 + 一个值」。示例把北京周边范围按层级均分成网格, 每一格用一个确定性哈希算出 0–1 之间的数值,再 Polygon.fromExtent() 方式构造面要素,样式按值查色带。

滑块控制层级:6 级是 2 列,9 级是 16 列,行数按范围比例确定。数值用 sin 哈希生成,刷新页面结果一致,便于对比不同层级下的疏密与配色。

操作结果
拖动「细分层级」网格变密或变疏,状态栏给出块数与值域
观察颜色数值高的格子偏黄绿,低的偏蓝
缩放地图网格边界固定在地图坐标上

网格块数按 2 的幂增长,层级再高就该改用瓦片渲染或 WebGL,否则矢量要素数量会拖慢交互。