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

自定义瓦片加载函数

接管 tileLoadFunction,自己决定何时把图片地址塞给瓦片,并统计请求次数、完成数量与平均耗时。

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

说明

tileUrlFunction 只负责给出一个字符串标识, tileLoadFunction(tile, url) 才决定这张瓦片怎么加载。示例在回调里延迟 80–340 ms 再生成图片,并把 dataURL 赋给 tile.getImage().src, 用来模拟按需解码的耗时。

统计放在 img.onload 里累加,能得到真实的端到端耗时; 真实 COG 客户端还会在这一层加上请求合并、失败重试与缓存命中判断。

操作结果
缩放或拖动地图触发新的瓦片请求,请求数与完成数同步增长
点击「重置统计」计数归零,重新开始累计
观察平均耗时接近注入延迟的均值