如何用Vue+openlayer批量添加gif动图
近期开发的一个功能是如何在中添加动图，项目中使用图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，不支持gif图片样式。后面采用的方式，gif图片赋值给DOM元素
先添加一个标签，用v-for遍历数据以动态生成数个div
// An highlighted block<div v-for="(n, index) in gifgroup" :id="index" class="mymarker"><img class="mymarker-img" src="/image/map/walk_front.gif" /><div class="mymarker-name">{{ n.name }}</div></div>
2 .编写添加,以及使用的属性绑定一个
标签，下面是使用参数x坐标、Y坐标以及构成id的序号来添加gif到地图上，这里是通过id来寻找进行删除，所以id是使用顺序码的方式添加，
// An highlighted blockaddGif(x, y, n) {console.log(document.getElementById(n))const ov = new Overlay({id: "overlay" + n,position: [x, y],element: document.getElementById(n),offset: [0, 0],});this.map.addOverlay(ov);}removeGif(gifnumber) {for (i = 0; i <= gifnumber; i++) {var oid = "overlay" + ithis.map.getOverlayById(oid).setPosition(undefined)this.map.getOverlayById(oid) == null}}
注意：删除的方法有很多种，这里使用的是方法二，以为我后面还有使用这个div反复添加
移除有很多方法，这里尝试过的都列在下面
1、删除图层
#这种方式会把以及其指向的DOM都删除，对于再要新增到这个DOM就会有问题（如点击弹窗）
map.();
2、删除map中所有图层，原理同1
map.().clear();
3、推荐，这种方式会保留dom，但要记得在下次新增同类时删除，否则会生成好多dom造成冗余残留
.();
= null;
3.在中调用，是用来存储数组顺序的数组，v-for是遍历的里面的数据，每添加一个就+1,用来设置顺序id，
this.gifgroup.push({name: item.user.userName,});this.$nextTick(() => {debugger;console.log(document.getElementById("1"));this.map.addGif(Number(po[0]), Number(po[1]), this.gifnumber);this.gifnumber = this.gifnumber + 1;// this.gifgroup.push(this.gifnumber)debugger;});
4删除，通过上面的 方法获得id进行遍历删除，然后再将赋值成0，不影响下次添加
// An highlighted blockdeleteStafOverlayer() {debugger;this.map.removeGif(this.gifnumber - 1);this.gifnumber = 0;},
最后生成结果，这里只截取了一个
