首页 / OpenLayers / 使用示例
从零生成数据瓦片
把一块范围均分成网格,每个格子生成一个数值并画成矢量瓦片,颜色由数值决定,层级滑块改变格子密度。
源码与运行效果
说明
数据瓦片的基本单位是「一小块范围 + 一个值」。示例把北京周边范围按层级均分成网格,
每一格用一个确定性哈希算出 0–1 之间的数值,再 Polygon.fromExtent()
方式构造面要素,样式按值查色带。
滑块控制层级:6 级是 2 列,9 级是 16 列,行数按范围比例确定。数值用
sin 哈希生成,刷新页面结果一致,便于对比不同层级下的疏密与配色。
| 操作 | 结果 |
|---|---|
| 拖动「细分层级」 | 网格变密或变疏,状态栏给出块数与值域 |
| 观察颜色 | 数值高的格子偏黄绿,低的偏蓝 |
| 缩放地图 | 网格边界固定在地图坐标上 |
网格块数按 2 的幂增长,层级再高就该改用瓦片渲染或 WebGL,否则矢量要素数量会拖慢交互。