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.jstileCacheStore = 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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云轴科技ZStack出席中国电信国际EMCP平台香港发布会,持续推动海外合作

近日&#xff0c;以“云聚未来 翼起新篇”为主题的中国电信国际多云服务一站式平台&#xff08;E-surfing Managed Cloud Platform&#xff0c;简称EMCP平台&#xff09;新闻发布会在香港成功举办&#xff0c;标志着中国电信国际在云计算服务领域取得了又一重大进展。云轴科技…

2024.11.29——[HCTF 2018]WarmUp 1

拿到题&#xff0c;发现是一张图&#xff0c;查看源代码发现了被注释掉的提示 <!-- source.php--> step 1 在url传参看看这个文件&#xff0c;发现了这道题的源码 step 2 开始审计代码&#xff0c;分析关键函数 //mb_strpos($haystack,$needle,$offset,$encoding):int|…

brpc的二次封装以及brpc与etcd的联合

目的&#xff1a; 搭配etcd的注册中心管理能知道谁能提供什么服务&#xff0c;并用rpc进行服务调用 封装思想&#xff1a; 信道管理&#xff0c;将不同服务主机的通信信道管理起来 封装&#xff1a; 1.指定的信道管理类 一个服务通常会有多个节点&#xff0c;每个节点都会…

【提升效率】如何写好一份详细设计文档

版本日期修订人描述V1.02024/12/6nick huang创建文档 背景 CSDN在发起“如何做好一份技术文档”的活动。 想起我最近在写一份详细设计&#xff0c;有一些感受&#xff1a; 一份考虑较周全的“详细设计文档模板”能起到质量保底的作用。 当一名初级技术人员需要编写详细设计文…

电阻计RM3544、RM3545的使用

目录&#xff1a; 一、电阻计与PC通讯 1、硬件连接 2、RmLogger.exe的使用 二、RM3545测量35uΩ电阻 一、电阻计与PC通讯 1、硬件连接 可以设置USB或COM口(串口)连接PC&#xff0c;也可以设置为“打印”输出。 1&#xff09;使用USB连接PC 2&#xff09;使用串口连接PC …

Jenkins 的HTTP Request 插件为什么不能配置Basic认证了

本篇遇到的问题 还是因为Jenkins需要及其所在的OS需要升级&#xff0c;升级策略是在一台新服务器上安装和配置最新版本的Jenkins&#xff0c; 当前的最新版本是&#xff1a; 2.479.2 LTS。 如果需要这个版本的话可以在官方站点下载&#xff0c;也可以到如下地址下载&#xff1…

uniapp 封装自定义头部导航栏

封装原因 项目中有时候需要使用自定义的头部导航栏&#xff0c;原生的无法满足需求 参数 属性名描述示例title标题字符串&#xff1a;首页bgColor背景色字符串&#xff1a;#ffftype左侧的操作内容字符串&#xff1a;all&#xff0c;详细值请在下方查看 参数解释 type all…

docker学习笔记(五)--docker-compose

文章目录 常用命令docker-compose是什么yml配置指令详解versionservicesimagebuildcommandportsvolumesdepends_on docker-compose.yml文件编写 常用命令 命令说明docker-compose up启动所有docker-compose服务&#xff0c;通常加上-d选项&#xff0c;让其运行在后台docker-co…

Linux中inode

磁盘的空间管理 如何对磁盘空间进行管理&#xff1f; 假设在一块大小为500G的磁盘中&#xff0c;500*1024*1024524288000KB。在磁盘中&#xff0c;扇区是磁盘的基本单位&#xff08;一般大小为512byte&#xff09;&#xff0c;而文件系统访问磁盘的基本单位是4KB&#xff0c;因…

5G扬帆乘劲风,遨游通讯赋能千行百业谱新篇

在大型工厂&#xff0c;轻触手机屏幕&#xff0c;实时库存数据、人员定位等信息便跃然眼前、一目了然&#xff1b;在边远油田&#xff0c;动动手指&#xff0c;即可实时查询设备温度、危险气体浓度等信息&#xff0c;大数据瞬间尽在“掌”握……在遨游5G防爆智能手机的助力下&a…

RT Thread Studio新建STM32F407IG工程文件编译提示错误

编译提示错误 原因: RT 源码使用4.0.3的话&#xff0c;请用STM32F4支持包的0.2.2版本&#xff0c;就不会出错了。 如果支持包用0.2.3版本的话&#xff0c;需要用RT内核4.1.0版本。0.2.3 版本更新了一些针对内核4.1.0的驱动代码&#xff0c;这几个定义都是4.1.0里的。

学生管理系统(java)

1.前期准备 &#xff08;1&#xff09;新建java项目 &#xff08;2&#xff09;新建java软件包以及三个文件Student.java,Student.txt,StuSystem.java Student.java package student_management_system;public class Student {private String id;private String name;private…

JavaWeb学习(2)(Cookie原理(超详细)、HTTP无状态)

目录 一、HTTP无状态。 &#xff08;1&#xff09;"记住我"&#xff1f; &#xff08;2&#xff09;HTTP无状态。 &#xff08;3&#xff09;信息存储客户端中。如何处理&#xff1f; 1、loaclStorage与sessionStorage。 2、Cookie。 二、Cookie。 &#xff08;1&…

SpringBoot教程(三十二) SpringBoot集成Skywalking链路跟踪

SpringBoot教程&#xff08;三十二&#xff09; | SpringBoot集成Skywalking链路跟踪 一、Skywalking是什么&#xff1f;二、Skywalking与JDK版本的对应关系三、Skywalking下载四、Skywalking 数据存储五、Skywalking 的启动六、部署探针 前提&#xff1a; Agents 8.9.0 放入 …

flask创建templates目录存放html文件

首先&#xff0c;创建flask项目&#xff0c;在pycharm中File --> New Project&#xff0c;选择Flask项目。 然后&#xff0c;在某一目录下&#xff0c;新建名为templates的文件夹&#xff0c;这时会是一个普通的文件夹。 然后右击templates文件夹&#xff0c;选择Unmark as …

Java进阶(注解,设计模式,对象克隆)

Java进阶(注解&#xff0c;设计模式&#xff0c;对象克隆) 一. 注解 1.1 什么是注解 java中注解(Annotation)&#xff0c;又称java标注&#xff0c;是一种特殊的注释 可以添加在包&#xff0c;类&#xff0c;成员变量&#xff0c;方法&#xff0c;参数等内容上 注解会随同…

部署loki,grafana 以及springcloud用法举例

文章目录 场景docker 部署grafanadocker-compose部署loki维护配置文件 local-config.yaml维护docker-compose.yml配置启动 grafana 添加loki数据源springcloud用法举例查看loki的explore,查看日志 场景 小公司缺少运维岗位&#xff0c;需要研发自己部署日志系统&#xff0c;elk…

keil报错---connection refused due to device mismatch

解决办法如下&#xff1a; 记得改成1 把Enable取消

第三节、电机定速转动【51单片机-TB6600驱动器-步进电机教程】

摘要&#xff1a;本节介绍用定时器定时的方式&#xff0c;精准控制脉冲时间&#xff0c;从而控制步进电机速度 一、计算过程 1.1 电机每一步的角速度等于走这一步所花费的时间&#xff0c;走一步角度等于步距角&#xff0c;走一步的时间等于一个脉冲的时间 w s t e p t … ……

vue中pdf.js的使用,包括pdf显示,跳转指定页面,高亮关键词

目录 一、下载pdf.js 二、引入到本地的项目中 三、实现预览pdf 四、跳转到指定页面 五、利用pdf里面的find查找关键词 六、修改页面大小为实际大小 一、下载pdf.js https://github.com/mozilla/pdf.js 里面有很多的版本&#xff0c; 高版本的可能浏览器不兼容或者还要考…