首页 / MapLibre / 使用示例
离线缓存
瓦片请求先经过 Cache API，命中就直接返回，未命中才走网络并顺手存一份。 预制当前视野后，同样的画面不再产生网络请求。
源码与运行效果
说明
自定义协议通过 maplibregl.addProtocol('offline', fn) 注册，
源里的 offline://{z}/{x}/{y}.png 会被逐个交给这个函数。
返回 { data: ArrayBuffer } 即可，栅格瓦片由浏览器解码。
缓存键用的是真实地址，因此清缓存、查条目都能按 URL 操作。 命中计数与回源计数分别显示，便于确认缓存是否真的被使用。
| 环节 | 调用 | 说明 |
|---|---|---|
| 注册协议 | addProtocol(name, fn) | 函数返回 Promise |
| 读取缓存 | cache.match(url) | 命中直接返回 buffer |
| 写入缓存 | cache.put(url, res.clone()) | 先 clone 再读原始响应 |
| 预制瓦片 | 按中心与级别算 x / y | 当前视野 3×3 共 9 张 |
| 清理 | caches.delete(name) | 整库删除，简单彻底 |
Cache API 只在安全上下文可用。https 与 localhost 满足条件，
通过局域网 IP 以 http 访问时 caches 为 undefined，
示例会退化为每次回源。
缓存不会自动过期，瓦片更新后用户仍看到旧图。
给缓存名带版本号，例如 maplibre-offline-v2，升级时换名即可淘汰旧数据。