Vue+OpenLayers7入门到实战：OpenLayers7如何使用gifler库来实现gif动态图图片叠加到地图上

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

#vue.js #前端 #javascript #OpenLayers #gif动态图 #动态图片叠加到地图

于 2024-03-07 16:19:31 首次发布
本文介绍了如何在Vue项目中利用OpenLayers7结合gifler库，通过生成canvas画板并监听重绘事件，实现在地图上显示gif动态图。详细讲解了依赖安装、Vue中OpenLayers7的使用，以及gif动态图的创建和复用方法。

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

前言

OpenLayers7本身不支持gif图片作为图标要素显示到地图上，所以需要通过其他办法来实现支持gif图片。
本章介绍如何使用OpenLayers7在地图上使用gifler库先生成canvas画板，然后通过canvas画板的重绘事件来重新渲染地图来达到实现OpenLayers的gif动态图功能。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm
了解本专栏 订阅专栏 解锁全文
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-21 1万+
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
OpenLayers 引入gif 动态图片（gifler）辅助实现
weixin_43966973的博客
04-03 1050
【代码】OpenLayers 引入gif 动态图片（gifler）辅助实现。
cesium加载动图方案二：通过gifler库实现
Fascinated0525的博客
06-16 1884
cesium加载动图方案二：通过gifler库实现
openlayers实现地图显示功能
weixin_46429290的博客
01-07 2317
openlayers作为开源GIS，是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。 基于openlayers的API显示一个瓦片地图，瓦片数据源很多都有提供开源的，比如百度、高德、天地图等 在进行瓦片地图显示时，需要创建一个地图容器对象（ol.Map）来加载瓦片图层俩绑定对应的瓦片数据源 在进行脚本区域编写代码，实现瓦片加载的功能，即创建一个地图容器对象（ol.Map），通过target参数关联到地图容器中（ID为m
四、openlayers官网示例Animated GIF解析——地图上加载GIF动画
aaa_div的博客
05-08 1244
gifler(gifUrl).frames是gitler的一个方法，在里面打印会发现控制台会一直输出，看了下它的源码，大胆猜测一下，我感觉它是把gif的每一帧返回过来，然后通过canvas绘制图片的方法ctx.drawImage绘制到地图上，再调了map.render()实时渲染地图。这篇讲的是如何在地图上加载gif动画，因为openlayers本身是不支持插入gif动画的，因此我们要下一个gifler插件。然初始化一个map，这次用到的是StadiaMaps底图，我试了下应该是可以直接加载出来的。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3503
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
OpenLayers入门，OpenLayers如何使用gifler库来实现gif动态图图片叠加到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-01 1629
OpenLayer本身不支持gif图片作为图标要素显示，所以需要通过其他办法来实现支持gif图片。本章使用gifler库先生成canvas画板，然后通过canvas画板的重绘事件来重新渲染地图来达到实现OpenLayergif动态图的功能。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4910
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7手册，OpenLayers7教程
2401_85124764的博客
06-17 629
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏基本上每章都有详细的源代码和运行示例以供参考，且保证每章代码都可以正常运行，非常适合入门读者从零开始学习。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Openlayers Overlay加载gif图片
weixin_38170255的博客
09-05 1443
说明： 项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。 后面采用overlay的方式，gif图片赋值给DOM元素 解决方案： 1、单个点 先在地图容器里新增一个id为marks的<div>标签 /*加载gif图片格式*/ function addGifMarks(...
GIF格式「gifler」-crx插件
03-14
gifler用gif替换当前网站上的每个图像 gifler用gif替换当前网站上的每个图像 支持语言:English
openlayers动态聚类图
01-26
openlayers3动态聚类分析图，点击聚类 ，缩放到合适视图范围，聚类有持续过程
openlayers面层实时动态闪烁
12-07
openlayers 加载面要素对象，map渲染，动态闪烁效果，望有帮助
085：vue+openlayers 加载gif图片动画 （示例代码）
大剑师兰特的GIS世界
08-24 1865
本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件。
Vue中使用Konva.js显示GIF
qq_41945145的博客
07-13 1079
首先安装依赖 npm install konva npm install vue-konva konva --save npm install gifler@0.1.0 --save 直接放代码 index.html main.js App.vue 在线效果链接：https://codesandbox.io/s/vue-konva-gif-w7f5w?file=/src/App.vue 注：转载请注明出处！ ...
OpenLayers的canvas图层叠加
github_39286601的博客
05-13 3099
OpenLayers中在overlayer层使用canvas图层叠加 <div id="map" style="width: 100%;position: relative"></div> <canvas id="layer1" style="position: absolute"></canvas> <canvas id="layer2" s...
openlayers6【十六】vue overlay类实现gif动态图标效果详解
@必意玲
07-17 5530
前提： openlayer 里面支持 gif 图标上图的只有 overlay类 可以实现。 openlayers 不支持 svga 动画图 文章目录1. 效果图2. 【核心】创建overlay类，循环点位根据坐标创建div点位3. css设置gif图标4. 完整代码 1. 效果图 2. 【核心】创建overlay类，循环点位根据坐标创建div点位 // 使用Overlay添加GIF动态图标点位信息 addGif() { let _that = this; let mainBox =.
openlayers 展示gif的2种方案
fupingfuping的专栏
05-19 2649
openlayers官方API上是不支持gif的(ol.style.Icon)，但是在openlayers6，官网给出了一个使用gifler插件的方式来展示gif图标的效果（经测试，在openlayers4 openlayers5也是支持的），这种实现方案可以替换之前常用展示gif的方法，先使用html代码段加入gif图片，再用overlay渲染的方式，这种方式最大的问题是使用overlay渲染的会置顶于openlayers，而gifler渲染可以通过zIndex方式控制显示在想要展示的层级（不一定时最顶层
openlayer 加载gif格式动图
最新发布
m0_73863692的博客
08-27 636
博主在自己写的时候发现，openlayers Icon image不能展示动图，把动图展示为静图，于是换了一种操作如下。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值