前言

Openlayers优化加载地图瓦片太慢的问题，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。

    为什么不使用LocalStorage？
    因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
    只有IndexDB和WEBSQL才能满足地图瓦片几百兆甚至几个G的缓存需要。

依赖和使用

    "ol": "^6.15.1",
    "localforage": "^1.10.0"

本章使用localforage库来作为操作浏览器IndexDB数据库的简化操作工具库，用来简化数据库读写操作。

使用localforage缓存地图瓦片到浏览器内置的IndexDB数据库
从IndexDB读取地图瓦片缓存并再次渲染图片到地图


var tileCacheStore=null;

// 从缓存中获取该瓦片
function loadFromCache(src) {
  if(tileCacheStore===null){
    tileCacheStore = localforage.createInstance({
      name: "tileCacheStore",//设置数据库名称
      driver: localforage.INDEXEDDB,//使用浏览器内置IndexDB数据库
    });
  }
  return tileCacheStore.getItem(src);
}

// 将该瓦片缓存
function cacheTile(src, img) {
  tileCacheStore.setItem(src, img)
}
// 触发重试的错误码
const retryCodes = [400, 500];
const retries = {};

//瓦片加载事件
const wmtsTileLoadFunction = function(imageTile, src) {
  const image = imageTile.getImage();
  // 检查缓存中是否已经存在该瓦片
  loadFromCache(src).then((tileCache) =>{
    if (tileCache!=null) {
      // 如果已经存在，直接使用缓存的瓦片替换图片瓦片
      const imageUrl = URL.createObjectURL(tileCache);
      image.src = imageUrl;
      // image.src = tileCache;
      console.log("命中瓦片缓存")
      return;
    } else {
      fetch(src, {
        method: 'GET',
        keepalive: true,
        cache: "force-cache"
      }).then((response) => {
        if (retryCodes.includes(response.status)) {
          retries[src] = (retries[src] || 0) + 1;
          if (retries[src] < 3) {
            console.log("请求瓦片失败，重新尝试次数：" + retries[src])
            setTimeout(() => imageTile.load(), retries[src] * 250);
          }
          return Promise.reject();
        }
        return response.blob();
      })
        .then((blob) => {
          const imageUrl = URL.createObjectURL(blob);
          image.src = imageUrl;
          cacheTile(src, blob);
        })
        .catch(() => imageTile.setState(3)); // error
    }
  })

};

使用的时候只需要对source设置setTileLoadFunction为上述的wmtsTileLoadFunction方法即可。

const source=new WMTS(options);//可以在wmts上使用
const source= new new XYZ();//xyz地图瓦片
source.setTileLoadFunction(wmtsTileLoadFunction)//自定义本地瓦片缓存

这样我们就完成了地图瓦片缓存到浏览器内置IndexDB数据库的功能。

openlayers6【七】使用IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用

前言

依赖和使用