OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题

已于 2023-08-02 17:44:32 修改
阅读量1.9k 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： javascript vue.js OpenLayers 修复空白瓦片 预加载瓦片
于 2023-04-17 11:18:23 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/130195945
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了OpenLayers在地图移动或缩放时可能出现的空白瓦片问题，并提供了解决方案。通过设置图层的preload参数为Infinity，实现了预加载所有层级的瓦片，有效避免了空白现象。同时，文章还涵盖了在vue项目中使用OpenLayers的指导，以及具体的代码实现和测试效果展示。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers实战进阶专栏目录

前言

OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-09 3165
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
瓦片地图实现（缓存加载，像素单位平移，缩放）
03-29
在上个版本基础上增加窗口自由拉伸重新加载范围外地图，修改原来瓦片单位平移为像素单位平移。
openlayers性能优化——开启图层预加载、减少空白等待时间
最新发布
aaa_div的博客
06-26 342
使用切片图层时、地图拖拽会有空白图片，为了减少空白等待时间，我们可以开始图层预加载。
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
openlayers 加载卫星图、注记图
student11111的博客
03-30 1619
js引入 openlayers <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script> npm引入 npmiol@6.4.3--save 加载地图 new Map({ // 加载的图层（图层通过叠加的方式加载，越靠后，显示优先级越高） layers: [BaseLayer, BaseCiaLay...
最新openlayers6加载百度影像图及解决空白瓦片办法
qq_39525480的博客
11-16 2370
最近系统升级了openlayers的版本，发现百度影像图竟然无法使用了。 首先是百度的影像图直接加载可能会存在很大偏移，按照如下方法可以做到基本贴合。 然后是部分贴图在请求时可能会存在失败，失败后导致瓦片图可能会有部分空白，使用了onloaderror解决了这一问题。 调试了挺久才调试完成，首先按照如下，加入百度投影坐标系 var forEachPoint = function (func) { return function (input, opt_output, opt_dimensi
离线BD瓦片地图加载.zip
04-01
4. **平滑缩放和拖动**：在用户缩放或移动地图时，需要预加载相邻级别的瓦片，确保平滑过渡，防止出现空白或延迟。 5. **地图叠加层**：除了基础地图瓦片，还可以叠加其他信息，如交通状况、天气预报等，增强地图的...
瓦片地图资源样例.zip
07-15
5. **瓦片加载策略**：包括预加载、懒加载等，根据用户滚动或缩放的行为，决定哪些瓦片应提前加载，以提高用户体验。 6. **地图叠加层**：瓦片地图可以叠加各种信息，如道路图层、卫星图层、地形图层等，通过叠加...
OpenLayers3实现地图显示功能
10-14
代码中，`ol.layer.Tile`表示一个瓦片图层，而`ol.source.OSM()`则是OpenLayers 3 提供的预封装数据源，它可以直接连接到OpenStreetMap的瓦片服务器，无需额外配置。`ol.View`则用于定义地图视图，`center`参数设置...
视频教程中，下载的各种瓦片地图
11-14
5. 客户端展示：在Web浏览器或移动应用中，通过JavaScript库如Leaflet或OpenLayers，利用瓦片URL动态加载和拼接瓦片，形成完整的地图视图。 在开发过程中，瓦片地图的优化是一个重要环节。这包括使用适当的缓存策略...
openlayers发布简易离线地图DEMO
12-06
- 动态加载：根据可视区域动态加载瓦片，降低内存占用和加载时间。 - 拓展功能：添加标记、图层切换、测量、地理编码等高级功能。 通过这个DEMO，开发者可以学习到如何使用OpenLayers来创建和展示离线地图，这...
openlayers 入门（8)预加载
qq_53079432的博客
10-16 216
通过设置 preload设置 Infinity来设置预加载
197: vue+openlayers 预加载preload瓦片地图，减少过渡期间的空白区域
大剑师兰特的GIS世界
01-10 916
第197个本示例的目的是介绍演示如何在vue+openlayers项目中演示瓦片预加载和没有预加载的不同状态。当我们平移和缩放地图时，经常会遇到过渡期间的空白区域(因为内容正在加载)，过一会儿，切片图像才出现了。，将预载的值设置为当前可见层的较低分辨率水平的数量。采用了Infinity，这样所有较低的分辨率级别都会被考虑在内。也可以采用Infinity，这样所有较低的分辨率级别都会被考虑在内。
Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-28 1545
在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
Openlayers瓦片预读技术
￡Duan’yi!
11-07 520
将地图进行缓存，通过缓存提高用户体验，拖动缩放不会出现太多空白区域。 layers:ol.layer.Tile preload:infinity---预读，preload:0---默认为0不显示
OpenLayers加载不同WMTS服务
SuperMap技术控
12-21 7331
作者：yyy 前言 WMTS，Web地图瓦片服务（Web Map Tile Service）当前版本是1.0.0。WMTS标准定义了一些操作，这些操作允许用户访问瓦片地图。WMTS可能是OGC首个支持RESTful访问的服务标准。SuperMap iServer支持发布WMTS 1.0.0标准的服务，同时提供一个兼容《地理信息公共服务平台电子地图数据规范》中地图分级标准的服务。 WMTS服务包含的信息介绍 在常规的WMTS服务中会包含以下参数和信息： <ows:Get...
Openlayer通过wms请求geoserver加载慢
qgbihc的专栏
10-26 4230
一、现象 开发的系统使用openlayer通过wms方式请求geoserver的地图，开发环境geoserver安装在windows上，使用默认设置，一切都正常。 系统部署到客户的linux上之后，发现地图显示特别缓慢。 二、调查 1、通过开发工具发现pending时间特别长。 2、geoserver的设置和windows上的设置也都一样。 3、发现单独加载其他图层，比如zxy、geojson方式都不存在卡的问题。 4、当zxy与wms同时存在时，zxy也存在pending时间特长的现象。但是在浏览器地址直
openlayers 瓦片地图加载优化
07-20
在OpenLayers中，可以通过一些优化技术来提高瓦片地图的加载性能和效率。以下是一些常用的瓦片地图加载优化方法： 1. 使用合适的瓦片源：选择合适的瓦片源可以显著提高加载性能。一些常见的瓦片源包括OpenStreetMap、Google Maps、Bing Maps等。选择一个稳定、速度快的瓦片源可以减少加载时间。 2. 使用缓存：使用缓存可以避免重复加载相同的瓦片。在OpenLayers中，可以使用`ol.source.TileImage`或`ol.source.XYZ`来配置瓦片源，并设置`tileLoadFunction`来处理瓦片加载过程。使用缓存机制可以避免重复请求服务器上已经下载过的瓦片。 3. 瓦片预加载：在地图初始化时，可以预加载一些瓦片，以提前下载并缓存一些地图数据。这样在用户操作时，部分瓦片已经存在于缓存中，可以快速显示。 4. 瓦片分级加载：通过设置地图的最小和最大缩放级别，可以控制在不同缩放级别下加载瓦片的数量。在较低的缩放级别下，只加载必要的瓦片，而在较高的缩放级别下，逐步加载更多的瓦片。这样可以提高加载速度，并减少不必要的网络请求。 5. 使用瓦片裁剪：在OpenLayers中，可以使用`ol.layer.Tile`的`extent`属性来指定地图的显示范围。通过设置合适的范围，可以减少需要加载的瓦片数量，从而提高加载性能。 6. 瓦片压缩和优化：对瓦片进行压缩和优化可以减小瓦片文件的大小，从而减少网络传输时间。常用的瓦片压缩格式包括gzip和WebP。可以在服务器端对瓦片进行压缩，并在客户端进行解压缩和显示。 综合使用这些优化技术，可以提高OpenLayers中瓦片地图的加载性能和用户体验。根据具体需求和场景，可以选择适合的优化方法来进行实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值