可行且主流，需合理设计数据库结构（如tiles对象存储，id为z/x/y字符串）、控制体积、优化读写性能，并适配地图库；建议用ArrayBuffer存瓦片、建zoomIndex索引、定期清理旧数据。
在HTML5应用中用IndexedDB存离线地图瓦片是可行且主流的做法，关键在于合理设计数据库结构、控制存储体积、优化读写性能，并适配地图库（如Leaflet或MapLibre）的瓦片加载逻辑。
数据库结构设计：按z/x/y分层组织
瓦片路径通常形如 z/x/y.png，可直接映射为对象存储的主键。推荐使用复合键或拼接字符串作为keyPath：
- 建一个名为
tiles的objectStore，keyPath设为id，每条记录含{ id: "12/2048/1365", data: ArrayBuffer, mimeType: "image/png", timestamp: Date.now() } - 避免嵌套过深或额外索引——z/x/y本身已具备强唯一性和查询规律性；若需按缩放级别快速清理，可另建
zoomIndex索引（keyPath:z） - 不建议用Blob直接存，优先用ArrayBuffer + MIME类型字段，便于后续通过
URL.createObjectURL(new Blob([arrayBuffer], {type}))生成可被
写入策略：批量导入 + 压力控制
离线包常含数万瓦片，不可逐条add，需分批事务处理：
- 每次事务控制在50–200条记录内，避免长时间阻塞主线程和触发浏览器Quota超限
- 使用
db.transaction("tiles", "readwrite").objectStore("tiles").add()批量写入，配合Promise.all()或递归调用确保顺序完成 - 写入前检查剩余配额：
navigator.storage.estimate()获取usage/limit，当 usage > limit * 0.8 时主动触发旧瓦片清理（例如删除3天前未访问的z
读取与地图集成：拦截请求 + 缓存穿透
地图库默认发起HTTP请求，需重写瓦片加载逻辑，优先查IndexedDB：
立即学习“前端免费学习笔记（深入）”；
- Leaflet中可扩展
L.TileLayer，覆盖createTile()方法，在内部先查IDB；查到则用tile.src = URL.createObjectURL(...)，未命中再走原生HTTP请求并缓存结果 - MapLibre GL JS支持
customSource，可实现loadTile回调，同步返回{ data: Uint8Array, cacheControl: 'no-store' }格式数据 - 注意设置合适的
crossOrigin和MIME类型，否则Canvas绘图可能因污染而失败；建议统一转为PNG，服务端或打包工具预处理瓦片
清理与版本管理：避免脏数据堆积
用户可能多次下载不同区域或版本的地图包，必须支持定向清除：
- 在数据库中增加
packageId字段（如"china-2024-q3"），配合多条件游标遍历删除：index.openCursor(IDBKeyRange.only(packageId)) - 利用
indexedDB.deleteDatabase()仅用于整体重置，日常维护用objectStore.delete()或clear() - 记录最后访问时间（
accessedAt），配合定时后台同步任务，定期清理长期未用（如>30天）的瓦片，节省空间
实际落地时还需考虑Service Worker协同缓存、PWA安装提示、移动端存储限制（iOS Safari对IDB总大小较敏感）等问题，但核心仍是围绕“结构清晰、写入可控、读取无缝、清理明确”四点展开。
