首页 / Leaflet / 使用示例
瓦片缓存
在内存里缓存已下载的瓦片图片，重复查看同一区域时不再发起网络请求。
源码与运行效果
说明
缓存键是 getTileUrl(coords) 的完整地址，值是加载完成的
Image。命中时把图片画到 canvas 瓦片上，直接调用
done(null, tile)；未命中时才 new Image 走网络。
瓦片图层返回 canvas 而不是 img，是因为 Image 对象不能同时挂在多个位置，
复制一份需要重新绘制。
redraw() 会丢弃现有瓦片并重新调用 createTile，
此时缓存里的图片被复用，命中数会明显上涨。清空缓存后再重绘，
所有块都会重新走网络，这组对比能直观看出缓存是否生效。
| 层次 | 谁在缓存 | 特点 |
|---|---|---|
| 浏览器 HTTP 缓存 | 浏览器 | 受响应头控制，同一个 URL 通常不会重复下载 |
| Layer 内存缓存 | 本例的 Map | 解码后的 Image 直接复用，可统计命中率，刷新页面即失效 |
| 离线包 | IndexedDB / Cache API | 跨会话保留，需自行管理版本与容量 |
| 瓦片保留 | keepBuffer | 只是不销毁 DOM 节点，不属于缓存策略 |
内存缓存没有上限时会持续增长，长时间运行的大屏会遇到内存压力。
给 Map 加一个简单淘汰策略（例如超过 400 块时删除最早插入的键），
或在切换视角时主动清理。缓存里存的是解码后的 Image，
只往 canvas 里画不会涉及跨域；要再读像素（导出、取色）才必须给图片加
crossOrigin 并确认服务端放行。