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

已于 2023-08-02 17:44:32 修改
阅读量2.3k 收藏 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
版权
本文介绍了OpenLayers在地图移动或缩放时可能出现的空白瓦片问题，并提供了解决方案。通过设置图层的preload参数为Infinity，实现了预加载所有层级的瓦片，有效避免了空白现象。同时，文章还涵盖了在vue项目中使用OpenLayers的指导，以及具体的代码实现和测试效果展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

前言

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

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm
了解本专栏 订阅专栏 解锁全文
197: vue+openlayers 预加载preload瓦片地图，减少过渡期间的空白区域
大剑师兰特的GIS世界
01-10 1077
第197个本示例的目的是介绍演示如何在vue+openlayers项目中演示瓦片预加载和没有预加载的不同状态。当我们平移和缩放地图时，经常会遇到过渡期间的空白区域(因为内容正在加载)，过一会儿，切片图像才出现了。，将预载的值设置为当前可见层的较低分辨率水平的数量。采用了Infinity，这样所有较低的分辨率级别都会被考虑在内。也可以采用Infinity，这样所有较低的分辨率级别都会被考虑在内。
105.在 Vue 3 中使用 OpenLayers 加载静态图片作为地图底图
最新发布
小彭的博客
03-24 622
在 WebGIS 开发中，我们通常需要加载不同类型的地图底图，如瓦片地图、影像地图等。但有时，我们也需要使用静态图片作为底图，比如在工厂、商场、室内导航等场景中。本文将介绍如何在 Vue 3 项目中，使用 OpenLayers 加载静态图片，并将其作为地图底图展示。本文介绍了如何在 Vue 3 中使用 OpenLayers 加载静态图片，使其作为地图底图。
瓦片地图实现（缓存加载，像素单位平移，缩放）
03-29
在上个版本基础上增加窗口自由拉伸重新加载范围外地图，修改原来瓦片单位平移为像素单位平移。
vue-openlayers中初始地图加载
猪猪侠的博客
02-25 630
Vue引入openlayers的命令 npm install ol template> <div id="map" style="width: 100%;height: 100%"> </div> </template> <script> import TileLayer from "ol/layer/Tile"; import View from "ol/View"; import {XYZ} from "ol/source"; impo
openlayer 瓦片缩放空白的问题
qq_39330397的博客
06-15 634
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。
openlayers 入门（8)预加载
qq_53079432的博客
10-16 311
通过设置 preload设置 Infinity来设置预加载
openlayers性能优化——开启图层预加载、减少空白等待时间
aaa_div的博客
06-26 850
使用切片图层时、地图拖拽会有空白图片，为了减少空白等待时间，我们可以开始图层预加载。
最新openlayers6加载百度影像图及解决空白瓦片办法
qq_39525480的博客
11-16 2561
最近系统升级了openlayers的版本，发现百度影像图竟然无法使用了。 首先是百度的影像图直接加载可能会存在很大偏移，按照如下方法可以做到基本贴合。 然后是部分贴图在请求时可能会存在失败，失败后导致瓦片图可能会有部分空白，使用了onloaderror解决了这一问题。 调试了挺久才调试完成，首先按照如下，加入百度投影坐标系 var forEachPoint = function (func) { return function (input, opt_output, opt_dimensi
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-09 3773
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
OpenLayers 3 之 加载百度地图
热门推荐
研究与专注
10-26 3万+
很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。
离线BD瓦片地图加载.zip
04-01
4. **平滑缩放和拖动**：在用户缩放或移动地图时，需要预加载相邻级别的瓦片，确保平滑过渡，防止出现空白或延迟。 5. **地图叠加层**：除了基础地图瓦片，还可以叠加其他信息，如交通状况、天气预报等，增强地图的...
openlayers加载在线天地图.zip
06-19
preload: Infinity, // 预加载所有级别的瓦片 serverType: 'geoserver' // 设置服务器类型 }); ``` 5. 添加图层到地图：将天地图图层添加到地图实例中。 ```javascript map.addLayer(tdtLayer); ``` 四、高级...
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 4093
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Openlayers之初始化地图
SmileCoffin的博客
01-20 4162
1、使用VS新建一个Web空白网站，然后将Openlayers3的开发库和样式文件复制到网站的根目录下； 2、新建一个HTML文档，并引入ol.js和ol.css； 3、在body标签中新建一个div作为地图加载的容器，然后设置其id为“map”； 4、代码实现 加载并显示OSM地图 window.onload =
Openlayer地图出不来或地图出来了，但是初始没有居中显示
netlinking的专栏
01-14 2301
<br />主要原因是JSP页面头这句话，去除这句话，地图显示正常：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /> <br />地图平移固定在DIV的范围设置语句：<br />var bounds = new OpenLayers.Bounds(<br />                114.3959455, 34.18611045,<br /> 
Openlayers瓦片预读技术
￡Duan’yi!
11-07 594
将地图进行缓存，通过缓存提高用户体验，拖动缩放不会出现太多空白区域。 layers:ol.layer.Tile preload:infinity---预读，preload:0---默认为0不显示
openlayers系列：加载arcgis和geoserver在线离线切片
bitree1的博客
07-21 4191
openlayer加载各种服务上发布的数据，不同坐标系数据，如 加载好天地图、4490arcgisserver 服务、本地影像切片等
Android应用程序UI硬件加速渲染的预加载资源地图集服务（Asset Atlas Service）分析
老罗的Android之旅
05-25 1万+
我们知道，Android系统在启动的时候，会对一些系统资源进行预加载。这样不仅使得应用程序在需要时可以快速地访问这些资源，还使得这些资源能够在不同应用程序之间进行共享。在硬件加速渲染环境中，这些预加载资源还有进一步优化的空间。Android系统提供了一个地图集服务，负责将预加载资源合成为一个纹理上传到GPU去，并且能够在所有的应用程序之间进行共享。本文就详细分析这个预加载资源地图集服务的实现原理。
影像瓦片图层裁切空白问题小记
爱莫能助
03-10 845
缘起 最近搞个研究，需要用16级瓦片代替17级瓦片进行裁切工作，发现之前用17级瓦片图层裁切一点问题没有，换成只有16级的瓦片数据（切片方案还是原来的17级）进行裁切工作，返回的都是栅格数据一片空白。 解决思路 怀疑产生这个问题的原因有两个： 瓦片数据文件夹的名称为中文名 瓦片切片方案为17级，但实际上只有16级的数据 修改conf.xml这个切片方案文件，将17级的切片方案信息删除并保存 修改瓦片数据文件夹的名称为英文名 裁切成功 备注：只修改切片方案或者是只修改中文名裁切出来的数据还会是空白数
OpenLayers实现静态图片地图的高效加载方法
1. 图片预加载：在地图初始化之前就加载图片资源，避免在用户进行交互操作时产生加载延迟。 2. 使用合适的图片分辨率：根据地图显示尺寸合理选择图片分辨率，避免过大的图片导致不必要的带宽消耗。 3. 设置合理的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值