openlayers6【十六】vue overlay类实现gif动态图标效果详解

文章目录

1. 写在前面
2. 效果图
3. 使用overlay类，地图添加动态图标
4. css设置gif图标
5. 完整代码

1. 写在前面

openlayer 里面支持 gif 图标上图的只有 overlay类 可以实现，矢量图层 Vector 不能设置动态的gif图标，只能设置静态的 png，jpg文件，或者base64等数据
overlay类的常见使用场景更多可以看看这篇文章地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
openlayers 不支持 svga 动画图（亲测）

2. 效果图

3. 使用overlay类，地图添加动态图标

原理：其实就是 overlay 类创建可以通过绑定 element 属性在地图上，通过属性的css设置gif图标的样式即可。

方法详解：

先在页面获取到map元素，通过遍历coordinates的数据，创建span元素，追加在页面中
创建 overlay 类，通过 element 属性与上面创建的 span 进行绑定
最后把 overlayer 类添加到 map 中

// 使用Overlay添加GIF动态图标点位信息方法
addGif() {let _that = this;let mapDom = this.$refs.map; // 获取map地图dom元素for (let i = 0; i < this.coordinates.length; i++) {var oDiv = document.createElement("span"); // 遍历coordinates创建span元素oDiv.id = "gif-" + i; //设置元素的id值mapDom.appendChild(oDiv); //span追加到map中this.$nextTick(() => {this.markerPoint = new Overlay({ // 创建一个Overlay类position: fromLonLat([_that.coordinates[i][0],_that.coordinates[i][1]]),//设置Overlay的经纬度位置positioning: "center-center",element: document.getElementById("gif-" + i),// 把上面的创建的元素绑定在Overlay中stopEvent: false});this.map.addOverlay(this.markerPoint);});}
}

我们看下dom元素的内容

4. css设置gif图标

页面有了dom元素，剩下的就是设置样式了，就是基础的css操作了。

.ol-overlay-container {span {display: block;width: 20px;height: 42px;border-radius: 50%;background: url("../../assets/images/people.gif") no-repeat;background-size: 20px 42px;}
}

5. 完整代码

<template><div id="content"><div id="map" ref="map"></div></div>
</template><script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Overlay from "ol/Overlay";
import { fromLonLat } from "ol/proj";// 弹出窗口实现
export default {name: "gif",data() {return {map: null,overlay: null,markerPoint: null,// 点信息coordinates: [[87.532236, 44.284182],[104.043505, 30.58165],[116.397289, 39.928632]]};},methods: {// 初始化地图initMap() {let target = "map";let tileLayer = new TileLayer({source: new OSM()});let view = new View({center: fromLonLat([104.912777, 34.730746]),zoom: 4.5});this.map = new Map({target: target,layers: [tileLayer],view: view});},// 使用Overlay添加GIF动态图标点位信息addGif() {let _that = this;let mapDom = this.$refs.map;for (let i = 0; i < this.coordinates.length; i++) {var oDiv = document.createElement("span");oDiv.id = "gif-" + i;mapDom.appendChild(oDiv);this.$nextTick(() => {this.markerPoint = new Overlay({position: fromLonLat([_that.coordinates[i][0],_that.coordinates[i][1]]),positioning: "center-center",element: document.getElementById("gif-" + i),stopEvent: false});this.map.addOverlay(this.markerPoint);});}}},mounted() {this.initMap();this.addGif();}
};
</script>
<style lang='scss' scope="scoped">
.ol-overlay-container {span {display: block;width: 20px;height: 42px;border-radius: 50%;background: url("../../assets/images/people.gif") no-repeat;background-size: 20px 42px;}
}
</style>

openlayers6【十六】vue overlay类实现gif动态图标效果详解相关推荐

SAP UI5 初学者教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
[Python从零到壹] 三十六.图像处理基础篇之图像算术与逻辑运算详解
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
SAP UI5 应用开发教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解
从本教程 24 步骤开始,我们接触了 OData 模型.本地学习 SAP UI5 应用开发时,如果直接消费远端的 OData 服务,就会遇到跨域错误. 步骤 24 SAP UI5 初学者教程之二十四 ...
openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解
文章目录 1. 写在前面 2. Heatmap 类实现热力图 2.1 Heatmap 参数 2.2 实现热力图 3. 完整代码 4. 添加删除map图层的方法 5. 热力图自身的get,set方法 1 ...
[Python图像识别] 五十.Keras构建AlexNet和CNN实现自定义数据集分类详解
该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门.OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子.图像增强技术.图像分割等,后期结合深度学习研究图像识别 ...
moviepy音视频剪辑：视频剪辑基类VideoClip的属性及方法详解
☞ ░ 前往老猿Python博文目录 ░ 一.概述在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...
即时通讯音视频开发（十）：实时语音通讯的回音消除技术详解
前言即时通讯应用中的实时音视频技术,几乎是IM开发中的最后一道高墙.原因在于:实时音视频技术 = 音视频处理技术 + 网络传输技术的横向技术应用集合体,而公共互联网不是为了实时通信设计的.有关实时 ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...

openlayers6【十六】vue overlay类实现gif动态图标效果详解

文章目录

1. 写在前面

2. 效果图

3. 使用overlay类，地图添加动态图标

4. css设置gif图标

5. 完整代码

openlayers6【十六】vue overlay类实现gif动态图标效果详解相关推荐

最新文章

热门文章