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

瓦片加载进度

瓦片源会抛出开始、结束、失败三类事件,累计数量就能做出加载进度提示,不必猜底图是否加载完成。

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

说明

事件挂在 tileLayer.getSource() 上,而不是图层本身。 tileloadstart 让进行中的计数加一,tileloadend 与 tileloaderror 让计数减一并累加已完成数量。 进度条宽度按下式换算:完成数 ÷(完成数 + 进行中数)。

操作结果
放大地图到新层级进行中计数上升,进度条回落
瓦片加载结束完成数累加,进度条回到满格
点击「重置统计」计数归零,重新开始统计

事件里的 tile 对象可读 getKey(),排查某一块瓦片反复失败时很有用。