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

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

1. 先添加一个标签，用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 .编写添加overlayer,以及使用Overlay的element属性绑定一个

// An highlighted block
  addGif(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" + i
      this.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 block
    deleteStafOverlayer() {
      debugger;
      this.map.removeGif(this.gifnumber - 1);
      this.gifnumber = 0;
    },

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