openlayer 图层点击事件 鼠标单击

背景： 

接上一篇博客，如何渲染图层，渲染不同颜色的图层？

 一个图层创建好了，接下来我们要做的是，如何通过鼠标点击打开点击对象的详情弹框？鼠标点击的是layer图层里的featrue要素，这些要素包括的数据信息就是创建图层的那些数据。接着拿到这些数据信息，我们可以接着做之下的这些功能：

1.在创建的地图对象监听'singleclick'鼠标的单击事件，通过点击对象可以拿到这个点击的像素块上的featrue要素。

2.拿到的要素传递给一个封装好的方法，在这个方法内，主要做的事情是：根据鼠标点击的不同的图层，通过判断自定义的字段layerType，进行不同的操作。

3.点击要素弹出一个详情弹框。在这个弹框里我们可以做的操作，主要有如下几点：在打开的详情弹框，对接口返回的结果做了一个list数据展示，有一个按钮，通过点击按钮，按钮呈现选中状态且图层对应要素的高亮。通过重新绘制图层达到效果

 效果展示：

核心代码： 

1.图层点击事件

 2.打开测量时间图层——>对应的测量时间的弹框

这是一个封装好的方法。在这个方法里，做了这几种逻辑：

1.turf.js(一个类库)拿到当前点击对象的geom，之后有用到，一个网络请求的参数。

2.点击的这一个要素，选中状态，对应图层高亮样式。通过重新绘制图层达到效果

3.通过geom参数发起网络请求，根据接口设计，可以查询到当前geom的所有水深测量时间的数据。需要前端做的工作：对结果进行处理，按照图层控件绑定的事件，判断notCreate变量判断是否选中；然后判断接口返回数据res不同时间差，添加年份筛选。

4.对筛选后的数据，判断当前点击的要素是查询结果中的某一条，添加上isChoose = true，代表被选中，并设置为选中状态(通过选中样式体现)。

5.打开点击要素的详情弹框。

6.详情弹框点击查询结果的某一条，点击按钮添加高亮样式；且对应图层高亮样式。通过重新绘制图层达到效果

 

/**
   * 测量时间面弹窗
   * @param  {number} id 航标的id
   * @param  {Array} offset 弹窗位置
   */
  MeasuringTimePlanePop: function (id, offset,e) {
    const point = turf.point(ol.proj.toLonLat(e.coordinate));
    var geometry=`POINT(${point.geometry.coordinates[0]} ${point.geometry.coordinates[1]})`;
    let formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
    confDetails = CONFIG.initLayer.find(function (itme) { return itme.title === '测量时间' })
    MAPutils.redrawMeasuringTimePlane(id)
    $.post("enavapi/data/basedata/getWaterDepthMeasurementLayer", { 'param': JSON.stringify({
      geometry:geometry,
    }) }, function (data) {
      var res = data.data;
      var a = moment(formattedDate);
      var b 
      var timeDiff 
      var cLength= confDetails.children.filter(function(item){return item.notCreate == false})
      //添加年份筛选
      if(cLength && cLength.length !== 0){
        var filteredRes = res.filter(function (v) {
          b = moment(v.surend);
          timeDiff = a.diff(b, 'years', true); 
          return cLength.some(function(range) {
            return _.inRange(timeDiff, range.minVal, range.maxVal);
          });
        });
        res = filteredRes
      }else{
        return;
      }
      if (res &&res.length>0) {
        var timehtml=""
        var isChoose = false
        $.each(res,function(i,v){
          if(v.guid === id){
            isChoose = true
          }else{
            isChoose = false
          }
          timehtml +=` <tr style="height:30px" ${isChoose == true ? "class=measurTimeactive" : ""}><td style="width: 110px;">水深复核时间:</td><td>${v.surend ? moment(v.surend).format('YYYY-MM-DD'):""}</td><td style="width: 70px;"> <a class="layui-btn layui-btn-xs mtp_locate" guid=${v.guid}>${$.cookie("currentLanguage")=="cn"?"高亮":"hightLight"}</a></td> </tr>`
        })
        var str = `<style>
                      #measuringTimePlane_table td{
                        text-align: center;
                      }
                    </style>
                  <div style="padding:5px 0;font-size: 15px;" id="MeasuringTimePlanePage">
                    <table style="width: 100%;height:100%;table-layout: fixed;" id="measuringTimePlane_table" borderColor="#dddddd" cellSpacing="0" cellPadding="0" border="1">
                      <tbody>
                          ${timehtml}
                      </tbody>
                    </table>
                  </div>`;
        layer.close(MAPutils.DialogIndex);
        debounce(function () {
          MAPutils.DialogIndex = layer.open({
            type: 1,
            shade: 0,
            shift: MAPutils.getLayerAnim(),
            title: "<B i18n-text='tc_MeasuringTimePlane'>测量时间</B>",
            // area: ['500px', '300px'],
            offset: offset,
            content: str,
            maxmin: true,
            resize: false,
            success: function (layero, index) {
              I18n.language($(".lang-selected").attr('lang'))
              $(layero).css('height', '')
              $(layero).find(".mtp_locate").on("click",function(e){
                var element = $(this);
                var parentDom = element.parent().parent();
                var guid= element.attr("guid");
                //点击添加上高亮样式
                if(!parentDom.hasClass("measurTimeactive")){
                  parentDom.siblings().removeClass("measurTimeactive").end().addClass("measurTimeactive");
                }
                MAPutils.redrawMeasuringTimePlane(guid)
              })
            }
          })
        })
      } else {
        layer.msg("暂无数据", { icon: 5, anim: 6 });
      }
    });
  },

3.其它

以上调用到的方法，如下：

/**
   * 重新绘制
   */
  redrawMeasuringTimePlane: function (_key) {
    var rootLayer = MAPutils.getLayerByTitle("测量时间");
    rootLayer.getSource().clear();
    var oldDataList = MAPutils.measureTimeAllData
    var newDataList = oldDataList.filter(function (item,index) {
      return item.guid !== _key
    })
    let myFilterData = oldDataList.filter(item => item.guid == _key);
    $.each(newDataList, function (index, item) {
      if(item.isBoolean == true) {
          var v = item
          MAPutils.drawVectorFeature(rootLayer, {
            geom: v.geom,
            id: v.guid,
            kv: {
              // markType: "shoalWaterLayer",
              data: v,
              layerType: 'MeasuringTimePlaneLayer'
            },
            style: new ol.style.Style({
              fill: new ol.style.Fill({
                color: [200, 200, 200,0.4]
              }),
              stroke: new ol.style.Stroke({
                color: v.color,
                width:3
              }),
            }),
          });
      }
    });
    $.each(myFilterData, function (index, item) {
      if(item.isBoolean == true) {
          var v = item
          MAPutils.drawVectorFeature(rootLayer, {
            geom: v.geom,
            id: v.guid,
            kv: {
              // markType: "shoalWaterLayer",
              data: v,
              layerType: 'MeasuringTimePlaneLayer'
            },
            style: new ol.style.Style({
              fill: new ol.style.Fill({
                color: [78, 117, 227,0.6]
              }),
              stroke: new ol.style.Stroke({
                color: [78, 117, 227],
                width: 3
              }),
            }),
          });
      }
    });

  },

测量时间

 测量时间功能的录屏展示，如上