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

瓦片网格可视化

瓦片编号不是猜出来的,TileGrid 提供了范围与坐标互算接口,可以把当前视野的瓦片直接画出来。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

base.getSource().getTileGrid() 取到底图的网格对象。 视野范围经 getTileRangeForExtentAndZ(extent, z) 得到 x、y 的取值区间, 逐块调用 getTileCoordExtent([z, x, y]) 得到该瓦片的实际范围并绘制矩形。 编号格式为 z/x/y,与常见的瓦片 URL 顺序一致。

操作结果
拖动地图网格随视野重算,编号随之更新
放大一级瓦片数量增多,单个网格变小
取消「显示编号」只保留边线,去掉文字

直接调用 getTileRangeForExtentAndZ 需要整数层级,缩放到小数层级时先取整再计算。