openlayer 添加闪烁点,并移动到点位置

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Fill, Stroke, Style, Text, Circle } from "ol/style";

 /** 定位 */
    locationFn(data) {
        //清除已添加的闪烁点图层
      if (this.temporaryLayer) {
        this.map.removeLayer(this.temporaryLayer);
      }

      let iconFeature = new Feature(
        new Point([data.coordinate.x, data.coordinate.y])
      );

      // 矢量图层源
      let vectorSourceNew = new VectorSource({
        wrapX: false,
        features: [iconFeature],
      });

      // 要素图层
      let style = new Style({
        stroke: new Stroke({
          color: "#33cccc",
          width: 2,
        }),
        fill: new Fill({
          color: "rgba(0, 255, 255, .7)",
        }),
        image: new Circle({
          //点样式
          radius: 5,
          fill: new Fill({
            color: "red",
          }),
        }),
      });
      this.temporaryLayer = new VectorLayer({
        source: vectorSourceNew,
        style: style,
      });
      this.map.addLayer(this.temporaryLayer);

      // 关键的地方在此：监听postrender事件，在里面重新设置circle的样式
      let radius = 0;
      this.temporaryLayer.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: 2 - radius / 10, //设置宽度
            }),
          }),
        });
        // 获取矢量要素上下文
        let vectorContext = getVectorContext(e);
        vectorContext.setStyle(pointStyle);
        vectorContext.drawGeometry(iconFeature.getGeometry());
        let speed = 0.3;
        radius = radius + speed; //调整闪烁速度
        //请求地图渲染（在下一个动画帧处）
        this.map.render();
      });

       //  定位到点
      this.map
        .getView()
        .animate(
          { zoom: 12 },
          { center: [data.coordinate.x, data.coordinate.y] }
        );

    },