085：vue+openlayers 加载gif图片动画 （示例代码）

已于 2024-05-13 22:48:15 修改
阅读量1.4k 收藏
点赞数
分类专栏： # openlayers综合教程300+ 文章标签： vue.js openlayers openlayers学习 openlayers教程 openlayers示例
于 2022-08-24 07:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/126478716
版权
openlayers综合教程300+ 专栏收录该内容
286 篇文章 214 订阅 ¥259.90 ¥399.90
订阅专栏
本文由高级前端工程师分享，展示在Vue项目中结合OpenLayers加载GIF图片动画的详细步骤。包括示例效果图、配置说明、源代码展示，以及相关文章参考，帮助开发者快速实现地图上的动态效果。
摘要由CSDN通过智能技术生成

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 085个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+openlayers中通过gifler来添加gif文件。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意

了解本专栏 订阅专栏 解锁全文
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2189
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Vue+OpenLayers实现加载GIF文件并采用CSS设置背景的方法
ByteZenith的博客
08-13 442
本文介绍了如何使用Vue和OpenLayers加载GIF文件，并通过CSS设置为背景。首先，在Vue项目中准备好GIF文件，然后在Vue组件中引入并设置CSS背景。其中，加载GIF文件，并通过CSS设置为背景是一种常见的需求。通过访问生成的本地服务器地址，您将会看到一个非常简单的OpenLayers地图，其中背景设置为加载的GIF文件。希望本文对您在Vue和OpenLayers中加载GIF文件并采用CSS设置背景有所帮助！的文件夹，并把要加载的GIF文件放在该文件夹中。在Vue组件中，使用。
openlayer 加载gif格式动图
最新发布
m0_73863692的博客
08-27 205
博主在自己写的时候发现，openlayers Icon image不能展示动图，把动图展示为静图，于是换了一种操作如下。
Openlayers Overlay加载gif图片
weixin_38170255的博客
09-05 1364
说明： 项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。 后面采用overlay的方式，gif图片赋值给DOM元素 解决方案： 1、单个点 先在地图容器里新增一个id为marks的<div>标签 /*加载gif图片格式*/ function addGifMarks(...
vue实现动态图片(gif)
huiaixing的博客
07-14 1168
vue实现动态图
openlayers添加gif图
Gr_lbxx的博客
04-28 289
)&:hover {
四、openlayers官网示例Animated GIF解析——地图上加载GIF动画
aaa_div的博客
05-08 848
gifler(gifUrl).frames是gitler的一个方法，在里面打印会发现控制台会一直输出，看了下它的源码，大胆猜测一下，我感觉它是把gif的每一帧返回过来，然后通过canvas绘制图片的方法ctx.drawImage绘制到地图上，再调了map.render()实时渲染地图。这篇讲的是如何在地图上加载gif动画，因为openlayers本身是不支持插入gif动画的，因此我们要下一个gifler插件。然初始化一个map，这次用到的是StadiaMaps底图，我试了下应该是可以直接加载出来的。
087：vue+openlayers 地图中某位置闪烁点动画 （示例代码）
大剑师兰特的GIS世界
08-25 1001
本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3449
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 9613
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 980
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
Vue中的表单绑定（全 gif 演示）
01-08
目录 文本input的输入绑定 多行文本textarea的输入绑定 复选框checkbox的绑定 单选框radio的绑定 选择框select的绑定 表单绑定中的修饰符 v-model.lazy v-model.number v-model.trim 文本input的输入绑定 这是我们最常见的使用方法，在input标签上使用v-model 文本的输入绑定 {{value}} var vm = new Vue({ el: #app, data: {
“正在加载”的动态gif图标
03-19
19个正在加载的动态图标，32*32、16*16，肯定有你想要的。
220：vue+openlayers 加载动画，采用css的@keyframes方式
大剑师兰特的GIS世界
03-13 792
第220个本示例的目的是介绍演示如何在vue+openlayers中加载动画，采用css的@keyframes方式。
openlayers 展示gif的2种方案
fupingfuping的专栏
05-19 2334
openlayers官方API上是不支持gif的(ol.style.Icon)，但是在openlayers6，官网给出了一个使用gifler插件的方式来展示gif图标的效果（经测试，在openlayers4 openlayers5也是支持的），这种实现方案可以替换之前常用展示gif的方法，先使用html代码段加入gif图片，再用overlay渲染的方式，这种方式最大的问题是使用overlay渲染的会置顶于openlayers，而gifler渲染可以通过zIndex方式控制显示在想要展示的层级（不一定时最顶层
如何用Vue+openlayer批量添加gif动图
weixin_45174000的博客
09-07 1325
如何用Vue+openlayer批量添加gif动图 近期开发的一个功能是如何在openlayer中添加动图，项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。后面采用overlay的方式，gif图片赋值给DOM元素 先添加一个标签，用v-for遍历数据以动态生成数个div // An highlighted block <div v-for="(n, index) in gifgroup" :id="index"
openlayers加载动态gif及css样式
gisdoer
06-05 4554
原文：https://stackoverflow.com/questions/43277959/can-openlayers-3-render-the-animated-marker-using-gif 1.添加html元素 &amp;lt;div id=&quot;marker&quot; title=&quot;Marker&quot; style=&quot;height:40px;width:27px;&quot;&amp;gt
学习vue加OpenLayers（3）动画 GIF
qq_52959651的博客
08-26 1152
不知道为什么官网的案例一直说没有gifler()方法，所以我又去网上查了查，发现openlayers官方API上是不支持gif的，openlayer 里面支持 gif 图标上图的只有 overlay类。 案例 gjf图片定位在地图的一些点上，这个我也是参照了另一位博主的博客加上官网写的，附上链接博客 代码 <template> <div id="content"> <div id="map" class="map" ref="map"></div&gt
049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
06-06
Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码： ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。 接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下： ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。 最后，我们需要在模板中添加一个 div 元素，用于显示城市名片： ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值