首页 / Leaflet / 使用示例
离线瓦片
用本地生成的瓦片模拟离线包，浏览过的区域进缓存，断网后只出已缓存的块。
源码与运行效果
说明
离线包用 Map 模拟，键是 z/x/y，值是已经绘制好的 canvas。
在线模式下请求一块瓦片时，未命中的会现场绘制并写入离线包；离线模式下只查包，
查不到就画斜纹占位并记一次缺失。真实项目的差别只在于存储介质：
把 Map 换成 IndexedDB，值换成瓦片 ArrayBuffer。
「下载当前视野」按 getPixelBounds() 算出覆盖的瓦片行列，
预先写入该级别所有块。切换离线模式后调用 redraw()，
否则已经挂在 DOM 上的在线瓦片会继续显示，看不出离线效果。
| 环节 | 示例实现 | 生产环境建议 |
|---|---|---|
| 瓦片来源 | canvas 本地绘制 | 后端预切瓦片包，或由矢量数据即时渲染 |
| 存储 | Map 内存 | IndexedDB 存 ArrayBuffer，容量可达数百 MB |
| 命中统计 | hits / misses | 接入埋点，评估离线覆盖率 |
| 缺失处理 | 斜纹占位图 | 提示「该级别未下载」，或降级到上一层瓦片放大 |
| 刷新 | layer.redraw() | 离线包更新后同样需要重绘才生效 |
离线场景不要把 tileerror 当成致命错误。断网时 Leaflet 会对每块瓦片
触发一次错误，导致控制台被刷屏；应在第一次失败后统一切换到离线图层，
避免同时向线上服务发起成百上千个必然失败的请求。