点击地图上的地位图标显示详情-526互联

在添加地图点位的时候调用
clickToPop(){
  let that = this;
  //定义select控制器，点击标注后的事件
  const map = this.mapUtilobj.map;
  //鼠标移入点位 -- 添加鼠标的样式
  map.on('pointermove', function (e) {
    let pixel = map.getEventPixel(e.originalEvent);
    let hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });
  let info = {};
  let select = new ol.interaction.Select({
    layers: [
      that.vectorLayer
    ],
    condition: ol.events.condition.click,
  });
  //map加载该控件，默认是激活可用的
  select.on("select", function (e) {
    //点击聚合的时候显示的是第一个点位的信息
    console.log(e.selected[0],'e.selected[0]')
    console.log(e.selected[0].values_.features[0].values_.fireInfoData)
    if(e.selected[0].values_.features.length>1){
      that.$message.success(`当前点击的地方有${e.selected[0].values_.features.length}个点位`)
      return false;
      this.getFeatures().clear();//清除选中点位的样式 -- 取消选中的高亮
    }
    info = e.selected[0].values_.features[0].values_.fireInfoData
    that.jump_info = info;
    this.getFeatures().clear();//清除选中点位的样式 -- 取消选中的高亮
    //弹窗容器的dom
    let div = document.createElement('div')
    div.style.width = '220px';
    div.style.height = '105px';
    div.style.position = 'relative';
    //详情的dom
    let goInfo = document.createElement('div');
    goInfo.style.width = '60px';
    goInfo.style.height = '20px';
    goInfo.style.position = 'absolute';
    goInfo.style.bottom = '5px';
    goInfo.style.right = '10px';
    goInfo.style.cursor = 'pointer';
    goInfo.style.fontSize = '14px';
    goInfo.title = '查看火情详情';
    //关闭按钮
    let closePop = document.createElement('div');
    closePop.style.position = 'absolute';
    closePop.style.top = '3px';
    closePop.style.right = '3px';
    closePop.style.fontSize = '22px';
    closePop.style.cursor = 'pointer';
    closePop.title = '关闭弹窗';
    let fireType = '';
    if(info.firereason==31){
      fireType="杂草";
    }
    else if(info.firereason==32){
      fireType="林木";
    }
    else if(info.firereason==33){
      fireType="垃圾";
    }
    else if(info.firereason==34){
      fireType="秸秆";
    }
    else if(info.firereason==35){
      fireType="其他";
    }
    else{fireType='未知类型'}
    let strPoint = '<i style="display: inline-block;width: 10px;height: 10px;background:rgb(243, 247, 37);margin-right: 5px;border-radius: 50%;}"></i>' +
      '<span style="font-weight: bold;">火情点位信息</span>';
    let closeStr = '<div><i class="el-icon-close" style="color: #fff"></i></div>'
    let str='';
    let str2='<div><span style="display: inline-block;">行政区：</span><span style="text-indent: 14px;">'+info.placename+'</span></div>';//火情行政区
    let str3='<div><span style="display: inline-block;">火情类型：</span><span style="">'+fireType+'</span></div>';//火情类型
    let str4='<div style="text-align: right;"><span style="color:#d2931b;font-weight:bold;">详情>></span></div>';//详情跳转
    str='<div style="font-size: 14px;width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">' +
      '<div><span style="display: inline-block;">名称：</span><span style="text-indent: 28px;">'+info.towername+'</span></div>'
    div.innerHTML='<div style="height: 105px;color:white;padding:7px 5px;position:relative;border:2px solid rgb(23,117,244);border-radius:5px;background:rgba(71,105,169,0.8)">'+strPoint+str+str2+str3+'</div>';
    div.id = 'fireIndex01';
    //去详情
    goInfo.innerHTML = str4;
    goInfo.id = 'goInfoId';
    div.appendChild(goInfo)
    //关闭弹窗
    closePop.innerHTML = closeStr;
    closePop.id = 'closePopId'
    div.appendChild(closePop)
    closePop.onclick=function (){
      console.log('点击了删除按钮');
      //未定义popup位置
      that.firePop.setPosition(undefined);
      //失去焦点
      closePop.blur();
      return false;
    }
    goInfo.onclick=function (){
      console.log('点击了右下角的详情')
      that.$EventBus.$emit('activeNav',2);
      that.$router.push('/caseReview');
    }
    if(that.firePop!=null){
      map.removeOverlay(that.firePop);
    }
    that.firePop= new ol.Overlay({
      element: div,
      id: 'infoOverlay01',
      /*首页地图的鼠标悬浮地图上时，修改的框的位置*/
      offset: [0, 0],
    })
    let places = [info.longitude,info.latitude];
    map.addOverlay(that.firePop)
    that.firePop.setPositioning("left-center");
    that.firePop.setPosition(places);
  })
  map.addInteraction(select);//添加地图交互
},