如何用Vue+openlayer批量添加gif动图

近期开发的一个功能是如何在openlayer中添加动图，项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。后面采用overlay的方式，gif图片赋值给DOM元素

1. 先添加一个标签，用v-for遍历数据以动态生成数个div

// An highlighted block
{{ n.name }}
 

2 .编写添加overlayer,以及使用Overlay的element属性绑定一个

标签，下面是使用参数x坐标、Y坐标以及构成id的序号来添加gif到地图上，这里是通过id来寻找overlayer进行删除，所以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}}
 

注意：删除overlayer的方法有很多种，这里使用的是方法二，以为我后面还有使用这个div反复添加
移除overlay有很多方法，这里尝试过的都列在下面

1、删除overlay图层

#这种方式会把overlay以及其指向的DOM都删除，对于再要新增overlay到这个DOM就会有问题（如点击弹窗）

map.removeOverlay(_overlay);

2、删除map中所有overlay图层，原理同1

map.getOverlays().clear();
3、推荐，这种方式会保留dom，但要记得在下次新增同类时删除，否则会生成好多dom造成冗余残留

overlay.setPosition(undefined);

overlay = null;
3.在JavaScript中调用，gifgroup是用来存储数组顺序的数组，v-for是遍历的gifgroup里面的数据，每添加一个overlayer就gifgroup+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删除，通过上面的removegif 方法获得id进行遍历删除，然后再将gifnumber赋值成0，不影响下次添加overlayer

// An highlighted blockdeleteStafOverlayer() {debugger;this.map.removeGif(this.gifnumber - 1);this.gifnumber = 0;},
 

最后生成结果，这里只截取了一个overlayer