首页 / OpenLayers / 使用示例
Canvas 瓦片
用 TileImage 的 tileUrlFunction 现场生成 256 × 256 的 canvas，把瓦片级别与行列号直接画在图上。
源码与运行效果
说明
ol.source.TileImage 允许完全接管瓦片地址：tileUrlFunction
收到 [z, x, y]，返回一张图片的地址即可。示例在这里现场建一个
canvas，把行列号写在瓦片上，再 toDataURL() 返回。
瓦片网格沿用 EPSG:3857 的标准分辨率序列，因此画面与 OSM 底图严格对齐；把透明度调低， 两层叠在一起就能看出每个 canvas 瓦片的位置与编号。
| 操作 | 结果 |
|---|---|
| 缩放地图 | 每次都按新的 z/x/y 重新生成瓦片，状态栏累计生成数量 |
| 取消勾选「叠加 OSM 底图」 | 只看 canvas 瓦片，边界更清楚 |
tileUrlFunction 每请求一张瓦片就调用一次，生成逻辑要轻；示例只画文字与边框，代价很小。