Vue+OpenLayers7入门到实战：OpenLayers使用瓦片加载事件实现瓦片加载进度条，进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条

原创 已于 2024-03-11 16:46:25 修改 · 271 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #瓦片加载事件 #加载进度条 #地图加载进度条

于 2024-03-10 12:37:14 首次发布
本文介绍了如何在OpenLayers7中利用瓦片加载事件`tileloadstart`、`tileloadend`创建进度条，动态更新进度并隐藏。通过监听地图加载事件，显示和隐藏进度条，实现地图加载时的视觉反馈。详细步骤包括安装依赖、在Vue中使用OpenLayers7、代码实现及测试效果展示。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何在OpenLayers7地图中使用瓦片加载事件（tileloadstart）、瓦片加载完成事件（tileloadend）以及瓦片加载错误事件（tileloadend）。
并通过OpenLayers使用瓦片加载事件通过实现瓦片加载进度条的案例，实现进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条的控制，从而帮助大家快速上手和应用瓦片加载事件。

本章代码除了使用瓦片加载事件，同样需要地图加载事件和加载完成事件进行配合，地图加载事件请参考专栏文章：《OpenLayers如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏》

Vue+OpenLayers7入门到实战

二、依赖和使用

了解本专栏 订阅专栏 解锁全文
37-OpenLayers中实现加载事件和加载完成事件，并使用瓦片加载事件显示加载进度条，同时在鼠标移动到点位上方后高亮显示点位要素
fxshy的博客
06-02 391
37-OpenLayers中实现加载事件和加载完成事件，并使用瓦片加载事件显示加载进度条，同时在鼠标移动到点位上方后高亮显示点位要素
Openlayers实战，Openlayers使用浏览器内置IndexDB数据库缓存地图瓦片，优化地图瓦片加载速度和浏览器内存占用
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-28 2028
在入门教程中，我们已经详细介绍了如何对地图瓦片进行缓存，请参考《Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能》，缺点是占用内存过多，那么如何再次优化呢，本章就通过使用浏览器IndexDB数据库来缓存地图瓦片，不仅同时优化了瓦片加载速度，从而在之前基础上优化占用内存过多的问题。为什么不使用LocalStorage？因为LocalStorage有存储限制，最大5M，而地图瓦片很多，LocalStorage是远远不够的。
【Vue3】openlayers加载瓦片地图并手动标记坐标点
qq_38196449的博客
04-29 2259
我们这里用vue/cli创建，我用的node版本是18.12.1。 创建前可以先配置下镜像源：npm config set registry https://registry.npmmirror.com
OpenLayers教程 多源数据加载之瓦片地图原理
zhu_zhu_xia的博客
09-13 2385
一、瓦片地图简介 瓦片地图（也叫切片地图）源于一种大地图解决方案，就是在多个比例尺下配置地图，然后提前把每个比例尺下的地图绘制为小块图片（瓦片），保存在服务器上用于缓存的目录中。这样客户端在访问地图时，可以直接获取需要的小块图片拼接成整幅地图，而不是由服务器动态创建（实时创建）出一幅图片再发送到客户端，从而极大提高了访问速度。 瓦片地图起始于谷歌地图。在2005年前后谷歌地图已经开始将矢量图层融合为一张栅格化的大图像，大图像被切分为256像素 x 256像素的图片（瓦片）。这些图片预先生...
OpenLayers实战，Openlayers优化加载地图瓦片太慢的问题，Openlayers瓦片缓存实现和请求失败瓦片重试功能
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-09 4137
Openlayers默认加载地图瓦片很慢，通过对比使用openlayers和leaflet加载速度，能够明显看到openlayers加载速度比leaflet要慢很多。看了Openlayers源码发现是因为Openlayers的瓦片加载机制是通过tileQueue瓦片加载队列来顺序加载瓦片，瓦片总是一个个顺序的加载，而不是同时加载。
Vue+OpenLayers7入门到实战：OpenLayers7如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-10 392
本章介绍如何在地图上使用OpenLayers7的加载事件和加载完成事件来简单实现转圈动图，加载进度条来显示OpenLayers瓦片的加载情况。
OpenLayers入门，OpenLayers使用瓦片加载事件实现瓦片加载进度条，进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-29 856
本章主要讲解OpenLayers如何使用瓦片加载事件（tileloadstart）、瓦片加载完成事件（tileloadend）以及瓦片加载错误事件（tileloadend）。并通过OpenLayers使用瓦片加载事件通过实现瓦片加载进度条的案例，实现进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条的控制，从而帮助大家快速上手和应用瓦片加载事件。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3513
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4917
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
OpenLayers入门，OpenLayers如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-29 1500
本章使用OpenLayers的加载事件和加载完成事件来简单实现转圈动图，加载进度条来显示OpenLayers瓦片的加载情况。
OpenLayers解读——ol地图加载完成调用函数分享
最新发布
qq_62685154的博客
12-27 586
ol地图使用中，如果想确认地图加载是否完成，可以通过调用函数确认，这里我给大家分享一个我在开发中用到的小函数，可以判断地图加载是否已经完成。这里用到openlayer的api，如图所示。
openlayers请求地图瓦片超时的问题解决
范天缘的博客
07-19 615
只能显示地图的放大缩小控件和底部文字。
vue+openlayers中loadstart和loadend事件实战详解
whs15193553607的博客
06-30 513
OpenLayers中的loadstart和loadend事件是专门用于监测地图或图层资源加载状态的重要事件。
OpenLayers基础教程——常用的地图事件
HerryDong的博客
10-14 6479
1、前言 前一篇博客介绍了事件的注册和取消注册，这篇博客就来介绍一下OpenLayers中常用的一些地图事件。 2、地图点击事件 地图点击事件如下所示： click——地图点击事件 singleclick——地图单击事件 dblclick——地图双击事件 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>OpenLayers</tit
openlayer判断瓦片全部加载完毕
追逐丶的博客
09-20 3800
ss.map.tileQueue_.getTilesLoading()
OpenLayers学习笔记中级篇（五、地图事件）
MagicMHD的博客
06-10 3619
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...
Openlayers中Google地图的加载
weixin_30325793的博客
03-25 297
概述：本文讲述如何在Openlayers中加载Google的切片。效果：矢量图影像图实现：在实现的时候，参考了mygisforum的文章http://blog.csdn.net/mygisforum/article/details/7582449的内容，同时结合gwc的gridset，实现了google切片在Openlayers2中的调用与展示。1、扩展的GoogleLayer代码如下：Ope...
OpenLayers笔记3：地图事件监听概述及部分简单应用
getMoreTime的博客
04-17 5718
目录地图事件监听概述1.鼠标触发事件2.地图移动事件3.图层渲染事件4.change事件5.其它事件地图事件监听的部分简单应用监听鼠标触发获取地图坐标监听指针移动获取指针位置矢量要素的属性值监听地图移动实现图层的动态显隐 地图事件监听概述 地图能够监听的事件主要包括： 1.鼠标触发事件 click：鼠标单击地图触发的事件（鼠标单击多少次地图，该事件就触发多少次）； singleclick：鼠标单击...
OpenLayers 3 之 事件体系详解
热门推荐
研究与专注
05-04 2万+
地图上的各种事件触发到底是怎么回事？熟悉前端的肯定知道 javascript 的事件机制，openlayers 既然是 javascript 实现的，那么它就也不例外，也遵循 W3C 的标准，只不过是 openlayers 进行的简化实现。文章首先讲解 openlayers 的事件结构实现，然后结合“切片WMS数据源”（ol.source.TileWMS）对象的事件机制进行实例分析。一. 介绍事件机
环形加载进度条封装：Vue插件与原生js实现
"环形加载进度条封装代码分享，包括Vue插件版和原生JavaScript实现" 环形加载进度条是一种常见的UI元素，通常用于显示数据加载或过程完成的进度。在网页开发中，它能提供用户友好的交互体验，让用户知道系统正在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值