openlayer实现浮标与悬浮框以及扩散闪烁效果

1.基于vue以及采用的引入ol.js的方法

2.浮标的实现

setMark(params) {//params为外部导入的数据
      this.markerLayer = new ol.layer.Vector({ //申请一个图层对象
        source: null,
        style: null,
        zIndex: 30500,
      });
      this.source = new ol.source.Vector(); // 创建矢量图
      this.markerLayer.setSource(this.source); //设置图源
      var style = new ol.style.Style({
        image: new ol.style.Icon(
          /** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 1],
            scale: 0.8,
            src: `../../../static/imgs/resumption/shuizhicezhan-6.png`,
          })
        ),
      });
      this.markerLayer.setStyle(style); // 设置地图元素样式
      this.featureArr = [];  //用于批量添加浮标
      params.forEach((item, index) => { //对数据进行遍历处理
        var feature = new ol.Feature({
          geometry: new ol.geom.Point([item.lgtd, item.lttd]),//geometry：浮标要显示的位置
        });//获取一个浮标对象
        feature.setProperties({
          label: true,
          stcd: item.stcd,
          name: item.stName,
          stationArea: item.city + item.district + item.country,
          river: item.bsName,
          newWaterQuality: item.qualityLevel,
          oldWaterQuality: item.preQualityLevel,
          updateTime: moment(item.reportTime).format("YYYY-MM-DD HH:mm"),
          sectionInformation: item.section,
          mainPolution: item.pollutionIndicators,
          upStreamAndQuality: "",
        });//给每个浮标对象赋予属性用于后期悬浮或者点击事情时触发相关函数使用
        this.featureArr.push(feature);
      });
      this.source.addFeatures(this.featureArr);
      this.map.addLayer(this.markerLayer);给地图对象添加处理好的图层
    },

3.实现自定义悬浮框(点击的原理是一样的，只要pointermove变为click就行)

首先在html中：
    <div id="popup" class="ol-popup">
      <div class="pophead" style="width: 100%; height: 20px">
        <div
          id="popup-title"
          style="
            font: bold 15px sans-serif;
            align: left;
            position: absolute;
            top: 5px;
            left: 8px;
            color: #000000;
          "
        >
          设备信息
        </div>
        <a
          href="#"
          id="popup-closer"
          class="ol-popup-closer"
          style="color: #8e908c"
        ></a>
      </div>
      <div id="popup-content" style="padding: 10px"></div>
    </div>    




css样式：
.ol-popup {
  position: absolute;
  background-color: #eeeeee;
  -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;
  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: "✖";
}



js:
   var container = document.getElementById("popup");
    //拿到弹出框内容元素
    var content = document.getElementById("popup-content");
    //拿到弹出框关闭元素
    var popupCloser = document.getElementById("popup-closer");
    var popupTitle = document.getElementById("popup-title");
//创建弹出框容器
    var overlay1 = new ol.Overlay({
      //设置弹出框的容器
      element: container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true,
      autoPanAnimation: {
        duration: 250,
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
      },
    });
    //悬浮图标显示自定义弹出框
    _this.map.on("pointermove", function (e) {
      //用于设置浮标显示
      var feature1 = _this.map.forEachFeatureAtPixel(
        e.pixel,
        function (feature) {
          return feature;
        }
      );
      if (feature1) { //判断悬浮对象是否为浮标
        var pixel = _this.map.getEventPixel(e.originalEvent);
        _this.map.forEachFeatureAtPixel(pixel, function (feature) {
          var attr = feature.getProperties();
          if(attr.label)//用于判断浮标是否为你所想添加悬浮框的
          {
            var coodinate = e.coordinate;
          popupTitle.innerHTML = attr.name;
          content.innerHTML = `<div class="reservoir-tips"></div>`;//添加内容
          overlay1.setPosition(coodinate);//用于设置是否出现悬浮框：通过设置坐标实现
          _this.map.addOverlay(overlay1);//将覆盖物添加到地图
          }
          
        });
      } else {
        overlay1.setPosition(undefined);//不让悬浮框出现
      }
    });

 4.闪烁效果

css样式：
.css_animation{
        height:50px;
        width:50px;
        border-radius: 25px;
        background: rgba(255, 0, 0, 0.4);
        transform: scale(0);
        animation: myfirst 3s;
        animation-iteration-count: infinite;
    }
    @keyframes myfirst{
        to{
            transform: scale(2);
            background: rgba(0, 0, 0, 0);
        }
    }



js代码：
setMarkAnimation(params){
      let _this = this;
      params.forEach((item, index)=>{
        var point_div = document.createElement('div');
        point_div.className="css_animation";//主要通过样式来实现闪烁效果
         var point_overlay = new ol.Overlay({
            element: point_div,
            positioning: 'center-center'
        });
         point_overlay.setPosition([item.lgtd, item.lttd]);
         _this.map.addOverlay( point_overlay);
      })
    },

5.效果