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

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

同一时间弹窗和定位标识都只有一个，因而我把弹窗和定位标记的dom预先写好放到了页面

  //矢量标注样式设置函数，设置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
    });
    // 图标hover渲染
    function showHover(t, coordinate) {
      var tip = document.getElementById('tip');
      tip.style.display = 'block'
      tip.innerText = t
      var t_overlay = new ol.Overlay({
        element: tip,
        positioning: 'center-center'
      });
      t_overlay.setPosition(coordinate);
      kpst._this.addOverlay(t_overlay)
    }

    // 标记hover效果
    kpst._this.on('pointermove', function (e) {
      var pixel = kpst._this.getEventPixel(e.originalEvent);
      var coordinate = kpst._this.getEventCoordinate(e.originalEvent);
      var feature = kpst._this.forEachFeatureAtPixel(pixel, function (feature) {
        // showHover(feature.get('name'), coordinate)
        return feature;
      })
    })
    // 弹窗显示
    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;
        showPop(coodinate)
      });
    });
    // 弹窗关闭按钮
    if (popupCloser) {
      popupCloser.addEventListener('click', function () {
        overlay.setPosition(undefined);
      });
    }

    // 定位图标显示
    function showDot(coordinate) {//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"); //与positioning: 'center-center' 作用同 使圆点的中心与坐标重合
    }
    kpst._this.markOverlay = overlay
    kpst._this.showDot = showDot

调用方法，渲染图标标记

       // 图标移除
        map.removeLayer(map.rvl);
        // 图标的添加
        map.addLayer(map.rvl);

  // 定位到拉萨并弹窗 点闪烁
          map.showDot([91.1, 29.41]);
          map.showPop([91.1, 29.41]);
          map.removeOverlay(map.point);
          map.addOverlay(map.point);
          map.getView().setCenter([91.15, 29]); //使定位点为地图中心

弹窗 圆点 hover html

 <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <div id="dot"></div>
    <div class="icon-hover" id="tip"></div>

样式

  .ol-popup {
    position: absolute;
    background-color: #eeeeeee3;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    // bottom: 30px;
    left: -50px;
    min-width: 280px;
  }

  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .ol-popup:after {
    border-top-color: #eeeeee;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .ol-popup-closer:after {
    content: "✖";
  }
}
    #dot{
      height:16px;
      width:16px;
      border-radius: 25px;
      background: rgba(255, 0, 0, 0.9);
      transform: scale(0);
      animation: myfirst 1s;
      animation-iteration-count: infinite;
      display: none;
    }

    @keyframes myfirst{
      to{
          transform: scale(2);
          background: rgba(0, 0, 0, 0);
      }
    }
#tip{
  width: 20px;
  height: 20px;
  background-color:rgba(0, 195, 255, 0.87);
  color: #fff;
  display: none;
  font-size: 12px;
  text-align: center;
 }