首页 / OpenLayers / 使用示例
瓦片加载进度
瓦片源会抛出开始、结束、失败三类事件,累计数量就能做出加载进度提示,不必猜底图是否加载完成。
源码与运行效果
说明
事件挂在 tileLayer.getSource() 上,而不是图层本身。
tileloadstart 让进行中的计数加一,tileloadend 与
tileloaderror 让计数减一并累加已完成数量。
进度条宽度按下式换算:完成数 ÷(完成数 + 进行中数)。
| 操作 | 结果 |
|---|---|
| 放大地图到新层级 | 进行中计数上升,进度条回落 |
| 瓦片加载结束 | 完成数累加,进度条回到满格 |
| 点击「重置统计」 | 计数归零,重新开始统计 |
事件里的 tile 对象可读 getKey(),排查某一块瓦片反复失败时很有用。