openlayers地图缓存添加

//通过安装包localforage(npm install localforage)或https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js

tileCacheStore.js

复制代码
import localforage from 'localforage'
var tileCacheStore=null;

// 从缓存中获取该瓦片
function loadFromCache(src) {
  if(tileCacheStore===null){
//通过安装包localforage(npm install localforage)或https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js
    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
    }
  })

};

export default wmtsTileLoadFunction;

引入使用:

复制代码
switch (mapLayer.layerType) {
      case 'XYZ':
        layer = new Tile({
          preload: Infinity,
          zIndex: mapLayer.zIndex,
          name: mapLayer.name,
          title: mapLayer.title,
          visible: mapLayer.visible,
          source: new XYZ({
            url: mapLayer.layerUrl,
            params: mapLayer.params,
            projection: mapLayer.projection
          }),
          params: mapLayer.params,
        });
        layer.getSource().setTileLoadFunction(wmtsTileLoadFunction)
        break;
相关推荐
CodeWithMe5 小时前
【Note】《深入理解Linux内核》 Chapter 15 :深入理解 Linux 页缓存
linux·spring·缓存
凌往昔5 小时前
OpenLayers 入门指南:序言
openlayers·webgis
大春儿的试验田6 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
likeGhee6 小时前
python缓存装饰器实现方案
开发语言·python·缓存
C182981825757 小时前
OOM电商系统订单缓存泄漏,这是泄漏还是溢出
java·spring·缓存
西岭千秋雪_10 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
en-route10 小时前
HTTP 缓存
网络协议·http·缓存
苦夏木禾1 天前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明1 天前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
Java初学者小白1 天前
秋招Day14 - Redis - 应用
java·数据库·redis·缓存