IndexedDB移动端离线地图瓦片存储需分片设计：建tiles对象库，keyPath设为"z-x-y"复合字符串键；每50~200瓦片小事务写入；存ArrayBuffer而非Blob；配metadata库管理版本与断点续传；结合Service Worker与Cache API实现双层缓存。
IndexedDB 在移动端离线地图瓦片下载中分片存储，核心是避免单条记录过大、控制事务粒度、合理设计键结构，并配合增量写入与错误恢复。它不支持直接存“文件”，但能把每个瓦片（通常是 PNG/JPEG ArrayBuffer 或 Blob）作为独立对象存储，再用层级+坐标作为主键高效索引。
按 Z/X/Y 分片设计 Object Store 结构
不要把所有瓦片塞进一个 store，也不要用单一 keypath。推荐建一个名为 tiles 的 object store，keyPath 设为复合键字符串，例如 "z-x-y"（如 "15-8245-5422"），并启用 autoIncrement: false。这样：
- 查询某一块瓦片时，
get('15-8245-5422')直接命中，无遍历开销 - 范围查询某一层级（如 z=15）可用
IDBKeyRange.bound('15-', '15/')（利用字符串字典序） - 避免使用数组或嵌套对象作 keyPath，移动端 IndexedDB 实现（尤其旧版 Safari）对复杂 key 支持不稳定
分批写入 + 小事务控制内存与阻塞
一次下载可能含数万瓦片，不能全丢进一个 transaction——会触发 QuotaExceededError，也易因超时中断。应：
- 每 50～200 个瓦片（视单瓦片大小调整，通常 ≤100KB/瓦片）打包为一个事务
- 用
db.transaction(['tiles'], 'readwrite')显式创建事务，勿复用上一个 - 每个 put 操作后监听
request.onsuccess，失败时跳过该瓦片并记日志，不中断整批 - 在 batch 写完后加
await new Promise(r => setTimeout(r, 0))微任务让出主线程，防页面卡死
存 ArrayBuffer 而非 Blob（尤其 iOS）
移动端特别是 Safari 对 Blob 存 IndexedDB 支持有限，且 Blob URL 在离线后可能失效。更可靠做法是：
- 用
fetch(tileUrl).then(r => r.arrayBuffer())获取原始二进制 - 直接
store.put(arrayBuffer, 'z-x-y')—— IndexedDB 原生支持 ArrayBuffer 存储 - 读取时仍得
get()出 ArrayBuffer，再用URL.createObjectURL(new Blob([buf], {type: 'image/png'}))创建可显示的 URL - 注意：iOS Safari 15.4+ 才稳定支持 ArrayBuffer > 5MB，大瓦片建议压缩或降级为 WebP
添加元数据与版本管理
纯瓦片不够健壮。建议额外建 metadata store 存地图包描述：
- 键为包 ID（如
"city_shanghai_v2"），值含{ minZoom, maxZoom, bounds, tileCount, downloaded: 12486 } - 每次成功写入一批瓦片后，原子更新
downloaded计数，便于断点续传 - 升级地图包时，用
db.deleteObjectStore('tiles')+ 重建（需先 close 当前 db 实例），再清空 metadata - 可选：在 open 时用
event.oldVersion自动迁移 schema（如从 v1 升 v2 增加压缩字段）
不复杂但容易忽略：务必在 service worker 中预加载关键瓦片，配合 Cache API 做双层缓存；IndexedDB 是持久层，Cache 是运行时加速层。两者配合才能真正实现秒开离线地图。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
