给openlayers添加Overlay,给Overlay添加动画

162 阅读1分钟
    initStatisticsMapDot() {
      //statisticsMapDot
      this.statisticsMapDot.forEach((item, index) => {
        //创建图片标签
        var newElement = this.createEl(
          "img",
          {
            class: "",
            id: "gif-" + item.relationId,
          },
          {
            margin: "0 auto",
          }
        );
        var markerPoint = new Overlay({
          position: [item.positionX * 1, item.positionY * 1],
          positioning: "center-center",
          element: newElement,
          stopEvent: false,
        });

        //根据类型选择不同图片
        var imgurl;
        switch (item.type) {
          case "statistics-gyz":
            imgurl = require("@/assets/xxx/location1.png");
            break;
          case "statistics-gmz":
            imgurl = require("@/assets/xxx/location2.png");
            break;
          case "statistics-gjz":
            imgurl = require("@/assets/xxx/location3.png");
            break;
          case "statistics-sksjsk":
            imgurl = require("@/assets/xxx/location4.png");
            break;
          case "statistics-jxdzysj":
            imgurl = require("@/assets/xxx/location5.png");
            break;
          default:
            break;
        }
        newElement.src = imgurl;
        this.map.addOverlay(markerPoint);
        //先后添加动画
        setTimeout(() => {
          newElement.animate(
            [
              { transform: "scale(0.8)" },
              { transform: "translate(0px, -1vh)" },
              { transform: "scale(1.2)" },
              { transform: "translate(0px, 0vh)" },
              { transform: "scale(0.8)" },
              { transform: "translate(0px, -1vh)" },
            ],
            {
              duration: 2500,
              iterations: Infinity,
            }
          );
        }, index * 80);
      });
    }



    createEl(t,a,y,x ) {
      var e = document.createElement(t);
      document.body.appendChild(e); //漏了这一句,否则行不通
      if (a) {
        for (var k in a) {
          if (k == "class") e.className = a[k];
          else if (k == "id") e.id = a[k];
          else e.setAttribute(k, a[k]);
        }
      }
      if (y) {
        for (var k in y) e.style[k] = y[k];
      }
      if (x) {
        e.appendChild(document.createTextNode(x));
      }
      return e;
    },