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

瓦片加载事件

在瓦片源上挂事件监听,统计已发出与已完成的请求数,用进度条显示当前加载状态。

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

说明

瓦片源的 tileloadstart、tileloadend、tileloaderror 三个事件覆盖一次瓦片请求的完整周期。计数器分别累加进行中的请求与已结束的请求,进度条宽度取二者比值。地图的 loadstart 与 loadend 控制进度条的显示和淡出。

操作结果
首次打开页面进度条从 0 增长到 100%,随后淡出
快速缩放或拖动进度条重新出现,计数继续累加
断网后重跑失败瓦片计入 error 计数,进度条仍会回到完成状态

瓦片错误不一定影响地图可用性,tileloaderror 里只做计数,不要直接抛异常中断交互。