Vue+Openlayer批量設置閃爍點的實現代碼(基於postrender機制)

<template>
  <div id="map" style="width: 100vw; height: 100vh" />
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature } from "ol";
import { Style, Circle, Stroke } from "ol/style";
import { Point } from "ol/geom";
import { getVectorContext } from "ol/render";
 
// 邊界json數據
export default {
  data() {
    return {
      map: {},
      coordinates: [
        { x: "106.918082", y: "31.441314" }, //重慶
        { x: "86.36158200334317", y: "41.42448570787448" }, //新疆
        { x: "89.71757707811526", y: "31.02619817424643" }, //西藏
        { x: "116.31694544853109", y: "39.868508850821115" }, //北京
        { x: "103.07940932026341", y: "30.438580338450862" }, //成都
      ],
      speed: 0.3,
    };
  },
  mounted() {
    this.initMap();
    this.addDynamicPoints(this.coordinates);
  },
  methods: {
    /**
     * 初始化地圖
     */
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [108.522097, 37.272848],
          zoom: 4.7,
        }),
      });
    },
    /**
     * 批量添加閃爍點
     */
    addDynamicPoints(coordinates) {
      // 設置圖層
      let pointLayer = new VectorLayer({ source: new VectorSource() });
      // 添加圖層
      this.map.addLayer(pointLayer);
      // 循環添加feature
      let pointFeature = [];
      for (let i = 0; i < coordinates.length; i++) {
        // 創建feature，一個feature就是一個點坐標信息
        const feature = new Feature({
          geometry: new Point([coordinates[i].x, coordinates[i].y]),
        });
        pointFeature.push(feature);
      }
      //把要素集合添加到圖層
      pointLayer.getSource().addFeatures(pointFeature);
      // 關鍵的地方在此：監聽postrender事件，在裡面重新設置circle的樣式
      let radius = 0;
      pointLayer.on("postrender", (e) => {
        if (radius >= 20) radius = 0;
        let opacity = (20 - radius) * (1 / 20); //不透明度
        let pointStyle = new Style({
          image: new Circle({
            radius: radius,
            stroke: new Stroke({
              color: "rgba(255,0,0" + opacity + ")",
              width: 3 - radius / 10, //設置寬度
            }),
          }),
        });
        // 獲取矢量要素上下文
        let vectorContext = getVectorContext(e);
        vectorContext.setStyle(pointStyle);
        pointFeature.forEach((feature) => {
          vectorContext.drawGeometry(feature.getGeometry());
        });
        radius = radius + this.speed; //調整閃爍速度
        //請求地圖渲染（在下一個動畫幀處）
        this.map.render();
      });
    },
  },
};
</script>