openlayers 添加标记点击弹窗 定位图标闪烁

环境vue3.0 ,地图为公用组件，将添加图标标记的方法放在公共地图的初始化方法里

  //矢量标注样式设置函数，设置image为图标ol.style.Icon
    function createLabelStyle(feature, icon, scale, opacity) {
      return (new ol.style.Style({
        image: new ol.style.Icon({
          opacity: opacity,
          src: icon,
          scale: scale // 标注图标大小
        }),
        text: new ol.style.Text({
          textAlign: "center", // 位置
          textBaseline: "middle", // 基准线
          font: "normal 12px 微软雅黑", // 文字样式
          text: feature.get("name"),
          fill: new ol.style.Fill({
            // 文本填充样式（即文字颜色)
            color: "#333"
          }),
          stroke: new ol.style.Stroke({
            color: "#Fff",
            width: 1
          })
        })
      }));
    }

    // 添加标注
    function draw(arr, icon, scale, opacity) {
      var me = this;
      /*********************显示地标**************************/
      // 设置标识范围
      var maxX = 99;
      var minX = 78;
      var maxY = 36;
      var minY = 26;
      //创建空的矢量容器
      var vectorSource = new ol.source.Vector({});
      // 设置要素点
      for (let i = 1; i <= arr.length; i++) {
        let t1 = Math.random() * (maxX - minX + 1) + minX;
        let t2 = Math.random() * (maxY - minY + 1) + minY;
        //创建图标特性
        var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point([t1, t2], "XY"),
          name: arr[i - 1]
        });
        //设置点要素样式
        iconFeature.setStyle(
          createLabelStyle(iconFeature, icon, scale, opacity)
        );
        //将图标特性添加进矢量中
        vectorSource.addFeature(iconFeature);
      }
      //创建矢量层
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: createLabelStyle(iconFeature, icon, scale, opacity)
      });
      kpst._this.rvl = vectorLayer
      // kpst._this.removeLayer(vectorLayer);
      // kpst._this.addLayer(vectorLayer);
    }

    // 标志方法  挂载到地图对象
    kpst._this.draw = draw
    // 将给 为的Feature
    kpst._this.createLabelStyle = createLabelStyle
    // 设置标识文字
    var arr = ["s0", "s1", "s2", "s3", "s4", "s5", "s6", "s7", "s8", "s9"];
    // 设置标识图标
    var src = "https://openlayers.org/en/latest/examples/data/icon.png";
    var scale = 0.5;
    var opacity = 0.5;
    // 将图标放到地图对象
    draw(arr, src, scale, opacity);
    /*********************显示弹出层**************************/
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content");
    var popupCloser = document.getElementById("popup-closer");
    var overlay = new ol.Overlay({
      element: container,
      autoPan: true
    });
    // 弹窗显示
    function showPop(coodinate) {
      if (container) {
        overlay.setPosition(coodinate);
        coodinate = [coodinate[0].toFixed(2), coodinate[1].toFixed(2)]
        content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
        kpst._this.addOverlay(overlay);
      }
    }
    // 将弹窗显示方法挂载到地图对象
    kpst._this.showPop = showPop
    // 点击弹窗
    kpst._this.on('click', function (e) {
      var pixel = kpst._this.getEventPixel(e.originalEvent);
      kpst._this.forEachFeatureAtPixel(pixel, function (feature) {
        var coodinate = e.coordinate;
        overlay.setPosition(coodinate);
        coodinate = [coodinate[0].toFixed(2), coodinate[1].toFixed(2)]
        content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
        kpst._this.addOverlay(overlay);
      });
    });
    // 弹窗关闭按钮
    if (popupCloser) {
      popupCloser.addEventListener('click', function () {
        overlay.setPosition(undefined);
      });
    }

    // 定位图标显示
    function showDot(coordinate) {
      // 动态创建这个div，并将这个div作为overlay的Element，添加到地图中
      // var point_div = document.createElement('div');
      // point_div.id = "dot";
      // point_div.style.width = '10px'
      // point_div.style.height = '10px'
      // point_div.style.background = 'red'
      var point_div = document.getElementById('dot');
      point_div.style.display = 'block'
      var point_overlay = new ol.Overlay({
        element: point_div,
        positioning: 'center-center'
      });
      point_overlay.setPosition(coordinate);
      point_overlay.setPositioning("center-center");
      kpst._this.point = point_overlay
    }
    kpst._this.markOverlay = overlay
    kpst._this.showDot = showDot