首页 / OpenLayers / 使用示例
瓦片网格可视化
瓦片编号不是猜出来的,TileGrid 提供了范围与坐标互算接口,可以把当前视野的瓦片直接画出来。
源码与运行效果
说明
base.getSource().getTileGrid() 取到底图的网格对象。
视野范围经 getTileRangeForExtentAndZ(extent, z) 得到 x、y 的取值区间,
逐块调用 getTileCoordExtent([z, x, y]) 得到该瓦片的实际范围并绘制矩形。
编号格式为 z/x/y,与常见的瓦片 URL 顺序一致。
| 操作 | 结果 |
|---|---|
| 拖动地图 | 网格随视野重算,编号随之更新 |
| 放大一级 | 瓦片数量增多,单个网格变小 |
| 取消「显示编号」 | 只保留边线,去掉文字 |
直接调用 getTileRangeForExtentAndZ 需要整数层级,缩放到小数层级时先取整再计算。