Vue+Openlayer中实现动画animate

参考：Openlayer animate动效优化_追逐丶的博客-CSDN博客

 效果1：

<template>
  <div class="test">
    <div class="css_animation" style="margin: 300px"></div>
  </div>
</template>
<style lang="scss">
.test {
  width: 100vw;
  height: 100vh;
  .css_animation {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.9);
    box-shadow: inset 0 0 30px red;
    transform: scale(0);
    animation: myfirst 2.5s;
    animation-iteration-count: infinite; //无限循环
  }

  @keyframes myfirst {
    to {
      transform: scale(2);
      background: rgba(0, 0, 0, 0);
      box-shadow: inset 0 0 30px rgba(255, 0, 0, 0);
    }
  }
}
</style>

效果2： 

 

注意： scss 中有@keyframes 时，千万不要有scoped！！！否则动画效果可能出不来！！！！！！！！！！！！！！浪费一下午时间！！

<template>
  <div class="test">
    <div style="position: fixed; top: 350px; left: 490px; z-index: 999">
      <el-button @click="addGif()">添加</el-button>
      <el-button @click="deleteGif()">删除</el-button>
    </div>
    <div id="map" style="width: 100vw; height: 100vh"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
  name: "test",
  data() {
    return {
      map: {},
      point_overlay: {},
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.912777, 34.730746],
          zoom: 4.5,
        }),
      });
    },
    addGif() {
      let point_div = document.createElement("div");
      point_div.className = "css_animation";

      document.getElementById("map").appendChild(point_div);
      this.$nextTick(() => {
        this.point_overlay = new Overlay({
          position: [87.532236, 44.284182],
          element: point_div,
        });
        this.map.addOverlay(this.point_overlay);
      });
    },
    deleteGif() {
      this.point_overlay.setPosition("");
    },
  },
};
</script>
<style lang="scss" >
.test {
  .css_animation {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.9);
    box-shadow: inset 0 0 8px red;
    transform: scale(0);
    animation: myfirst 3s;
    animation-iteration-count: infinite; //无限循环
  }
  @keyframes myfirst {
    to {
      transform: scale(2);
      background: rgba(0, 0, 0, 0);
      box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
    }
  }
}
</style>

多个点：

<!--LjOlWave-->
<template>
  <div class="LjOlWave"></div>
</template>

<script>
import { Overlay } from "ol";
export default {
  name: "LjOlWave",
  components: {},
  props: {
    map: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      point_overlay: {},
      point_div: {},
      // coordinates: [
      //   [91.48879670091165, 37.83814884701121],
      //   [99.19515576149941, 26.713646654711134],
      //   [123.74363825288785, 44.363694825734726],
      // ],
      geojsonData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              title: "警报1",
            },
            geometry: {
              type: "Point",
              coordinates: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            type: "Feature",
            properties: {
              title: "警报2",
            },
            geometry: {
              type: "Point",
              coordinates: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            type: "Feature",
            properties: {
              title: "警报3",
            },
            geometry: {
              type: "Point",
              coordinates: [123.74363825288785, 44.363694825734726],
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    //根据geojson数据获取坐标集
    getCoordinatesByGeojson(geojsonData) {
      let coordinates = [];
      geojsonData.features.map((feature) => {
        coordinates = [...coordinates, feature.geometry.coordinates];
      });
      return coordinates;
    },
    addWave() {
      let coordinates = this.getCoordinatesByGeojson(this.geojsonData);
      for (const i in coordinates) {
        let point_div = document.createElement("div");
        point_div.className = "css_animation";
        point_div.id = `coordinate_${i}`;
        document.documentElement.appendChild(point_div);
        console.log("point_div", point_div);
        this.$nextTick(() => {
          this.point_overlay = new Overlay({
            position: coordinates[i],
            element: point_div,
          });
          this.map.addOverlay(this.point_overlay);
        });
      }
    },
    deleteWave() {
      this.point_overlay.setPosition("");
      this.map.removeOverlay(this.point_overlay);
      this.point_overlay = {};
      this.point_div.parentNode.removeChild(this.point_div);
    },
  },
  watch: {},
};
</script>