xx_sw_dp/src/utils/TFMapUitl.ts

import bw from '../assets/images/bw.png';
declare const TFMap;
declare const Cesium;
class TFMapUitl {
  PointLocation_listImg = '../assets/images/bw.png';
  PointLocation_listId = 'PointLocation_listId*';
  bwImg = '../assets/images/bw.png';
  bwClass = 'PointLocation_listId*';
  entiListId = [];
  bwEntiListId = []; //波纹实体数组
  specialControl = {
    //特殊图层的识别码
    zdgzzhd: 'layerControl_zdgzzhd*', //"重点关注灾害点"
    pczhd: 'layerControl_pczhd*', //"普查灾害点"
    hllx: 'hllx', //河流流向
    zhjcsb: 'layerControl_zhjcsb*', //
    zhfwsyt: 'dzdfw_geojson*,dzdfw_geojson_fw*', //地灾范围是特殊情况使用两个进行控制
    dzfb: 'layerControl_dzfbsb*', //电站分布-工程
    shuiwenzhan: 'layerControl_shuiwenzhan*', //水文站,
    shuiweizhan: 'layerControl_shuiweizhan*', //水位站,
    yuliangzhan: 'layerControl_yuliangzhan*', //雨量站,
    yibanqixiangzhan: 'layerControl_yibanqixiangzhan*', //一般气象站,
    biaozhunqixiangzhan: 'layerControl_biaozhunqixiangzhan*', //标准气象站,
    tanshuitongliangzhan: 'layerControl_tanshuitongliangzhan*', //碳水通量站,
    gc: 'layerControl_gc*', //工程点,
    yuliangfenqu: 'yuliangfenqu'
  };

  /**
   * 本方法用于判断传入值是否有效，为null、undefined、""返回false
   * */
  valueIsEmpty(vale) {
    const typeValue = typeof vale;
    if (typeValue == 'undefined') {
      return false;
    } else if (typeValue == 'object' || typeValue == 'string') {
      if (!vale) {
        return false;
      } else {
        return true;
      }
    } else {
      return true;
    }
  }

  /**
   * 地图定位，该定位适用于系统首页-工程列表，地址灾害-地址点，协同监测监测设备点
   * @param option entity定位实体, x坐标，y坐标，z高度，time定位时间，complete定位后的回调，map定位使用的地图,offset定位点偏移[x,y]
   */
  mapPointLocation_list2(option: {
    entity?: any;
    x: Number;
    y: Number;
    z?: Number;
    complete?: Function;
    time?: Number;
    map: any;
    offset?: Array<Number>;
  }) {
    option.map.viewer.entities.removeById(this.PointLocation_listId);
    if (option.entity) {
      const tempEntity = new Cesium.Entity({
        id: this.PointLocation_listId,
        position: option.entity.position,
        billboard: option.entity.billboard,
      });
      tempEntity.billboard.image = bw;
      if (option.offset) {
        tempEntity.billboard.pixelOffset = new Cesium.Cartesian2(option.offset[0], option.offset[1]);
      }
      option.map.viewer.entities.add(tempEntity);
    }
    // let cartesian = option.map.viewer.camera.pickEllipsoid(option.entity.position.getValue());
    // let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    // option.x = option.x||Cesium.Math.toDegrees(cartographic.longitude); // 经度
    // option.y =  option.y||Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    this.mapPointLocation(option);
  }

  /**
   * 清空实体波纹
   */
  clearBwList(map) {
    if (this.bwEntiListId && this.bwEntiListId.length > 0) {
      this.bwEntiListId.forEach((item) => {
        map.viewer.entities.removeById(item);
      });
    }
    this.bwEntiListId = [];
  }

  /**
   * 给实体添加波纹
   * */
  addBw(map, entityList) {
    this.clearBwList(map);
    entityList.forEach((item, index) => {
      const id = this.PointLocation_listId + '_' + index;
      let tempEn = item;
      if (item.entity) {
        tempEn = item.entity;
      }
      const tempEntity = new Cesium.Entity({
        id: id,
        position: tempEn.position,
        billboard: tempEn.billboard,
      });
      tempEntity.billboard.image = bw;
      map.viewer.entities.add(tempEntity);
      this.bwEntiListId.push(id);
    });
  }

  /**
   * 设置空数据的显示
   * */
  setEmptyValue(value) {
    if (!this.valueIsEmpty(value)) {
      return '';
    } else {
      return value;
    }
  }
  // mapPointLocation_list(option: {
  //   entity?: any;
  //   x: Number;
  //   y: Number;
  //   z?: Number;
  //   complete?: Function;
  //   time?: Number;
  //   map: any;
  //   offset?: Array<Number>;
  // }) {
  //   this.mapPointLocation(option);

  //   // let cartesian = option.map.viewer.camera.pickEllipsoid(option.entity.position.getValue());
  //   // let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  //   // option.x = option.x||Cesium.Math.toDegrees(cartographic.longitude); // 经度
  //   // option.y =  option.y||Cesium.Math.toDegrees(cartographic.latitude); // 纬度

  // }

  mapPointLocation_list(p, callback, offX = 0, offY = 15) {
    this.clearPointLocation_list(map);
    map.addOverlay(
      new TFMap.Marker(p, bw, {
        pixelOffset: new Cesium.Cartesian2(offX, offY),
      })
        .init()
        .setClassify(this.bwClass)
    );
  }

  mapLocation(p, callback, offX = 0, offY = 15) {
    map.removeOverlay(this.bwClass);
    map.addOverlay(
      new TFMap.Marker(p, bw, {
        pixelOffset: new Cesium.Cartesian2(offX, offY),
      })
        .init()
        .flyTo({
          offset: { heading: 6.213256405596909, pitch: -0.43673551853473613, range: 8000 },
          duration: 1,
          // complete: callback && callback(),
        })
        .setClassify(this.bwClass)
    );
    setTimeout(() => callback && callback(), 1500);
  }

  /**
   * 动态扩散圆
   * @param map定位使用的地图
   */
  trends3(p, callback, fly) {
    map.removeOverlay(this.bwClass);
    var c = new TFMap.Ellipse(p, 580, 580, 89).init().img('./static/img/dizuo.png').rotation().setClassify(this.bwClass);
    if (!fly) {
      c.flyTo({
        offset: { heading: 6.152030498572154, pitch: -0.7056602336022602, range: 7231 },
        duration: 1,
      });
    }
    map.addOverlay(c);
    setTimeout(() => callback && callback(), 1500);
    // map.addOverlay(new TFMap.Ellipse(p, 100, 100, 0, '#00ff00').init().ripple(3000).setClassify('trends*'));
  }

  /**
   * 动态扩散圆
   * @param map定位使用的地图
   */
  trends2(p, callback, fly) {
    map.removeOverlay(this.bwClass);
    map.addOverlay(new TFMap.Circle(p, 100, '#057cf3').init().spread(1500).setClassify(this.bwClass));
    var c = new TFMap.Circle(p, 200, '#057cf3').init().spread(3000).setClassify(this.bwClass);
    if (!fly) {
      c.flyTo({
        offset: { heading: 6.152030498572154, pitch: -0.7056602336022602, range: 7231 },
        duration: 1,
      });
    }
    map.addOverlay(c);
    setTimeout(() => callback && callback(), 1500);
    // map.addOverlay(new TFMap.Ellipse(p, 100, 100, 0, '#00ff00').init().ripple(3000).setClassify('trends*'));
  }

  /**
   * 清空实体波纹
   */
  trends(p, callback, fly) {
    map.removeOverlay(this.bwClass);
    //Ellipse(p, 50, 50)
    var c = new TFMap.Ellipse(p, 0.00001, 0.00001).init().img('./static/img/dizuo.png').rotation(0.2).setClassify(this.bwClass);
    if (!fly) {
      c.flyTo({
        offset: { heading: 6.152030498572154, pitch: -0.7056602336022602, range: 7231 },
        duration: 1,
      });
    }
    map.addOverlay(c);
    setTimeout(() => callback && callback(), 1500);
  }

  active(id) {
    if (window.activeMarker) window.activeMarker.update(), (window.activeMarker = null);
    if (id) window.activeMarker = map.findOverlay(id);
    if (window.activeMarker) window.activeMarker.update();
  }

  /**
   * 通过实体列表与实体id列表进行定位，
   * @param map定位使用的地图
   */
  mapPointLocation_list3(map, entiListId: Array<any>) {
    this.clearPointLocation_list(map);
    const entList = [];
    if (entiListId && entiListId.length > 0) {
      this.entiListId = entiListId;
    } else {
      return;
    }
    this.entiListId.forEach((item) => {
      entList.push(map.findOverlay(item));
    });
    if (entList.length > 0) {
      entList.map((m) => (m.entity.billboard.scale = 1.5));
      this.addBw(map, entList);
      map.flyToRectangle(entList, 0.1, {
        complete: () => {
          this.entiListId.forEach((itemId) => {
            map.showOverlay(itemId, true);
          });
        },
      });
    }
  }

  /**
   * 清空定位点
   * @param map定位使用的地图
   */
  clearPointLocation_list(map) {
    if(window.breathMarker){
      window.breathMarker.update()
      window.breathMarker.breathe()
      window.breathMarker=null
    }
    window.impointFlag=true
    if(!window.isThematicMap){
      window.getImportSites()
    } 
    this.active();
    map.viewer.entities.removeById(this.PointLocation_listId);
    map.removeOverlay(this.bwClass);
    if (this.entiListId.length > 0) {
      this.entiListId.forEach((itemId) => {
        const temp = map.findOverlay(itemId);
        if (temp && temp.entity) {
          temp.entity.billboard.scale = 1;
        }
      });
    }
    this.clearBwList(map);
  }

  /**
   * 地图定位
   * @param option x坐标，y坐标，z高度，time定位时间，complete定位后的回调，map定位使用的地图,entity实体
   */
  mapPointLocation(option: {
    entity?: any;
    x: Number;
    y: Number;
    z?: Number;
    id: String;
    offset?: Array<Number>;
    complete?: Function;
    time?: Number;
    map: any;
  }) {
    if (!this.valueIsEmpty(option.z)) {
      option.z = 8000;
    }
    if (!this.valueIsEmpty(option.time)) {
      option.time = 0;
    }
    if (!this.valueIsEmpty(option.time)) {
      option.complete = (e) => { };
    }
    option.map.flyTo(
      {
        destination: {
          x: option.x,
          y: option.y,
          z: option.z,
        },
        orientation: {
          heading: 6.283185307179586,
          pitch: -1.5688928482139568,
          roll: 0,
        },
      },
      option.time,
      (e) => {
        this.getEntityBy(option.map, option.id, (e) => {
          this.addLocaltion(option.map, e, option.offset);
        });
        if (option.complete) {
          option.complete(e);
        }
      }
    );
  }

  /**
   * 定位图标添加
   */
  addLocaltion(map, Entity, offset) {
    map.viewer.entities.removeById(this.PointLocation_listId);
    if (Entity) {
      const tempEntity = new Cesium.Entity({
        id: this.PointLocation_listId,
        position: Entity.entity.position,
        billboard: Entity.entity.billboard,
      });
      tempEntity.billboard.image = bw;
      if (offset) {
        tempEntity.billboard.pixelOffset = new Cesium.Cartesian2(offset[0], offset[1]);
      }
      map.viewer.entities.add(tempEntity);
    }
  }

  /**
   * 根据id获取实体
   */
  getId(type: string, id: any): string {
    if (type == 'dzd' || type == '地灾点') {
      return `dzdmarker&&${id}`;
    } else if (type == 'dzdfw' || type == '地灾范围') {
      return `dzdRegion&&${id}`;
    } else if (type == 'gcd' || type == '工程') {
      return `gcdmarker&&${id}`;
    } else if (type == 'sbd' || type == '设备') {
      return `sbdmarker&&${id}`;
    } else if (type == 'ly' || type == '流域') {
      return `lymarker&&${id}`;
    } else if (type == 'yj' || type == '预警') {
      return `yjmarker&&${id}`;
    } else if (type == 'drainageBasin') {
      return `drainageBasin&&${id}`;
    } else if (type == 'drainageBasinStart') {
      return `drainageBasinStart&&${id}`;
    } else if (type == 'drainageBasinEnd') {
      return `drainageBasinEnd&&${id}`;
    }
  }

  // gcdMarkerDom(i) {
  //   const data = JSON.stringify(i).replace(/\"/g, "'");
  //   return `<div class="popup">
  //   <h3>工程信息</h3>
  //     <ul style="padding: 0 0px 0px 0px;background: transparent;margin-bottom: 5px;">
  //       <li><span>工程名称:</span> <b>${i.st_name}</b></li>
  //       <li><span>工程位置:</span> <b>${i.gcwz || '暂无数据'}</b></li>
  //       <li><span>挡水建筑物类型:</span> <b>${i.dsjzwlx || '暂无数据'}</b></li>
  //       <li><span>挡水建筑物最大高度(m):</span> <b>${i.dsjzwzdgd || '暂无数据'}</b></li>
  //       <li><span>库容(m³):</span> <b>${i.zkr || '暂无数据'}</b></li>
  //       <li><span>查看详情:</span> <b class="see" onclick="openEngineeringModel(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
  //     </ul>
  //     <div class='popupBut'>
  //       <img title='绕点飞行' onclick="aroundPoint(${i.x},${i.y},${i.z})" src='./static/img/view_rd.png' />
  //       <img title='保存视角' onclick="saveView(${i.id},'gc')" src='./static/img/save_view.png' />
  //     </div>
  //   </div>`;
  // }
  gcdMarkerDom(i) {
    const data = JSON.stringify(i).replace(/\"/g, "'");
    let str = `<div class="popup">
    <div style="display:flex;align-items: center;">
    <span style="font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;color: #FFFFFF;margin-right:10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"
    title="${i.st_name + i.typeName}"
    >${i.st_name + i.typeName}</span> 
    <img style="display: inline-block;width:12px"  title='查看详情' onclick="siteDetail(${data})" src='./static/img/detailArrow.png' />
    </div>
    <ul style="background: transparent; overflow: auto;height:150px">`

    let str2 = ''
    let str3 = `</ul>
    </div>`;
    for (let j = 0; j < i.sensor?.length; j++) {
      str2 += `<li><span> ${i.sensor[j].sensor_name} </span>  <br/>
      <span style=" display: inline-block;"><span style="font-size:17px;color:#00A2FF; display: inline-block;margin-right:5px"> ${i.sensor[j].sensor_name.indexOf('风向') ==-1 ? i.sensor[j].real_value : this.setWd(i.sensor[j].real_value)}</span><span style="font-size:14px; display: inline-block;margin-right:10px"> ${i.sensor[j].sensor_name.indexOf('风向') ==-1  ? i.sensor[j].dchar : ''}</span>     ${i.sensor[j].real_time?.slice(5, 16)}</span></li>`
    }
    return str + str2 + str3
  }
  // 重要测站点
  impotPointDom(i) {
    const data = JSON.stringify(i).replace(/\"/g, "'");
    let str = 
    `<div class="impopup">
    <div class="impopup-content">`
    let str2 = ''
    
    for (let j = 0; j < i.data_real?.length; j++) {
      str2 += `
      <div style="height:52px; display:flex;align-items: center; flex-direction: column;justify-content: space-evenly;">
      <div style="display:flex;align-items: center;justify-content: space-between;width:100%">
      <span style="font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: 500;
      color: #FFFFFF;margin-right:10px;"><span style="margin-right:10px">${i.st_name}</span> ${i.data_real[j].real_time?.slice(5, 16)}</span> 
      <img style="display: inline-block;width:12px"  title='查看详情' onclick="siteDetail(${data})" src='./static/img/detailArrow.png' />
      </div>
      <div style="width:100%">
      <span style=" display: inline-block;color: rgba(255, 255, 255, 1);">
      <span style="color: #FFFFFF; margin-right:10px"> ${i.data_real[j].sensor_name}</span>
      <span style="font-size:14px; display: inline-block;margin-right:2px"> ${i.data_real[j].real_value}</span>
      <span style="font-size:14px; display: inline-block;"> ${ i.data_real[j].dchar}</span>     
      </span></div>
      </div>
      `
    }
    let str3 = `</div></div>`;
    // return str
    // <ul style="background: transparent; overflow: auto;height:150px">`
    // let str2 = ''
    // let str3 = `</ul>
    // </div>`;
    // for (let j = 0; j < i.data_real?.length; j++) {
    //   str2 += `<li><span> ${i.data_real[j].sensor_name} </span>  <br/>
    //   <span style=" display: inline-block;"><span style="font-size:17px;color:#00A2FF; display: inline-block;margin-right:5px"> ${i.data_real[j].real_value}</span><span style="font-size:14px; display: inline-block;margin-right:10px"> ${ i.data_real[j].dchar}</span>     ${i.data_real[j].real_time?.slice(11, 16)}</span></li>`
    // }
    return str + str2 + str3
  }
  setWd(wds) {
    let wd = wds*1
    if (wd >= 348.76 || wd <= 11.25) {
      return 'N';
    }
    if (wd >= 11.26 && wd <= 33.75) {
      return 'NNE';
    }
    if (wd >= 33.76 && wd <= 56.25) {
      return 'NE';
    }
    if (wd >= 56.26 && wd <= 78.75) {
      return 'ENE';
    }
    if (wd >= 78.76 && wd <= 101.25) {
      return 'E';
    }
    if (wd >= 101.26 && wd <= 123.75) {
      return 'ESE';
    }
    if (wd >= 123.76 && wd <= 146.25) {
      return 'SE';
    }
    if (wd >= 146.26 && wd <= 168.75) {
      return 'SSE';
    }
    if (wd >= 168.76 && wd <= 191.25) {
      return 'S';
    }
    if (wd >= 191.26 && wd <= 213.75) {
      return 'SSW';
    }
    if (wd >= 213.76 && wd <= 236.25) {
      return 'SW';
    }
    if (wd >= 236.26 && wd <= 258.75) {
      return 'WSW';
    }
    if (wd >= 258.76 && wd <= 281.25) {
      return 'W';
    }
    if (wd >= 281.76 && wd <= 303.75) {
      return 'WNW';
    }
    if (wd >= 303.76 && wd <= 326.25) {
      return 'NW';
    }
    if (wd >= 326.26 && wd <= 348.75) {
      return 'NNW';
    }
  }

  dzdMarkerDom(i) {
    console.log('dzdMarkerDom', i);
    console.log('dzdMarkerDom', i.id);
    // <li><span>地理位置:</span> <b>${i.dqwz || '暂无数据'}</b></li>
    return `<div class="popup">
    <h3>灾害点信息</h3>
    <ul style="padding: 10px 0px 0px 0px;background: transparent;">
      <li><span>灾害名称:</span> <b>${i.dzmc}</b></li>
      <li><span>灾害类型:</span> <b>${i.dzlxmc || '暂无数据'}</b></li>
      <li><span>危险性分级:</span> <b>${i.wxxfjmc || '暂无数据'}</b></li>
      <li><span>当前状态:</span> <b>${i.dqzt || '暂无数据'}</b></li>
      <li><span>查看详情:</span> <b class="see" onclick="openModelDzd('${i.id}')" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
    </ul>
    <div class='popupBut'>
      <img title='绕点飞行' onclick="aroundPoint(${i.x},${i.y},${i.z})" src='./static/img/view_rd.png' />
      <img title='保存视角' onclick="saveView(${i.id},'dz')" src='./static/img/save_view.png' />
    </div>
    </div>`;
  }

  sbdMarkerDom(i) {
    const iTemp = JSON.parse(JSON.stringify(i));
    delete iTemp.tableCellIcon;

    const data = JSON.stringify(iTemp).replace(/\"/g, "'");

    let state = '';
    if (iTemp.online_dictText) {
      state = iTemp.online_dictText;
    } else {
      state = this.valueIsEmpty(iTemp.videoIsOnline) ? (iTemp.videoIsOnline == '0' ? '离线' : '在线') : '暂无数据';
    }
    console.log('sbdMarkerDom:', iTemp);
    if (i.deviceKind == 'L4SP') {
      return `<div class="popup">
      <h3>监测设备信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
        <li><span>设备名称:</span> <b>${iTemp.deviceName || '暂无数据'}</b></li>
        <li><span>设备类型:</span> <b>${'视频监测仪'}</b></li>
        <li><span>设备状态:</span> <b>${state}</b></li>
        <li><span>安装位置:</span> <b>${iTemp.location || '暂无数据'}</b></li>
        <li><span>视频预览:</span> 
          <b class="see" onclick="openModelVideo(${data})" style="color: rgba(21, 254, 254, 1)">查看</b>
          <b class="see" onclick="editVideo(${data})" style="color: rgba(21, 254, 254, 1)">编辑</b>
          <b class="see" onclick="playVideo(${data})" style="color: rgba(21, 254, 254, 1)">融合</b>
        </li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    } else {
      return `<div class="popup">
      <h3>监测设备信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
        <li><span>设备名称:</span> <b>${iTemp.deviceName || '暂无数据'}</b></li>
        <li><span>设备类型:</span> <b>${iTemp.deviceKind_dictText || '暂无数据'}</b></li>
        <li><span>设备状态:</span> <b>${iTemp.online_dictText || '暂无数据'}</b></li>
        <li><span>传感器数量:</span> <b>${iTemp.sensorCount || '暂无数据'}</b></li>
        <li><span>查看详情:</span> <b class="see" onclick="openModel(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    }
  }

  waterMarkerDom(i) {
    const iTemp = JSON.parse(JSON.stringify(i));
    delete iTemp.tableCellIcon;
    iTemp.deviceName = iTemp.hydrologyDeviceName;
    iTemp.deviceKind = iTemp.hydrologyDeviceKind;
    iTemp.deviceKind_dictText = iTemp.hydrologyDeviceKind;
    iTemp.monitorPointName = iTemp.hydrologyDeviceLocation;
    iTemp.online_dictText = iTemp.hydrologyDeviceonline_dictText;
    iTemp.startMonitorTime = iTemp.createTime;
    iTemp.deviceCode = iTemp.hydrologyDeviceCode;
    iTemp.isWater = true;
    const data = JSON.stringify(iTemp).replace(/\"/g, "'");
    let state = '';
    if (iTemp.online_dictText) {
      state = iTemp.online_dictText;
    } else {
      state = this.valueIsEmpty(iTemp.videoIsOnline) ? (iTemp.videoIsOnline == '0' ? '离线' : '在线') : '暂无数据';
    }
    console.log('waterMarkerDom:', iTemp);
    console.log('data:', data);
    if (i.deviceKind == 'L4SP') {
      return `<div class="popup">
      <h3>监测设备信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
        <li><span>设备名称:</span> <b>${iTemp.deviceName || '暂无数据'}</b></li>
        <li><span>设备类型:</span> <b>${'视频监测仪'}</b></li>
        <li><span>设备状态:</span> <b>${iTemp.hydrologyDeviceonline}</b></li>
        <li><span>安装位置:</span> <b>${iTemp.location || '暂无数据'}</b></li>
        <li><span>视频预览:</span> <b class="see" onclick="openModelVideo(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        <li><span>视频融合:</span> <b class="see" onclick="playVideo(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    } else {
      return `<div class="popup">
      <h3>监测设备信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
        <li><span>设备名称:</span> <b>${iTemp.hydrologyDeviceName || '暂无数据'}</b></li>
        <li><span>设备类型:</span> <b>${iTemp.hydrologyDeviceKind || '暂无数据'}</b></li>
        <li><span>设备状态:</span> <b>${iTemp.hydrologyDeviceonline || '暂无数据'}</b></li>
        <li><span>传感器数量:</span> <b>${iTemp.hydrologyDeviceonline || '暂无数据'}</b></li>
        <li><span>查看详情:</span> <b class="see" onclick="openModel(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    }
  }

  waterDevMarkerDom(i) {
    console.log('这个是传感器弹窗');

    const iTemp = JSON.parse(JSON.stringify(i));
    delete iTemp.tableCellIcon;
    iTemp.deviceName = '';
    iTemp.deviceKind = '';
    iTemp.deviceKind_dictText = '';
    // iTemp.monitorPointName=''
    iTemp.online_dictText = iTemp.state;
    iTemp.startMonitorTime = iTemp.onlineTime;
    iTemp.isWater = true;
    const data = JSON.stringify(iTemp).replace(/\"/g, "'");
    let state = '';
    if (iTemp.online_dictText) {
      state = iTemp.online_dictText;
    } else {
      state = this.valueIsEmpty(iTemp.videoIsOnline) ? (iTemp.videoIsOnline == '0' ? '离线' : '在线') : '暂无数据';
    }
    console.log('waterMarkerDom:', iTemp);
    console.log('data:', data);
    if (i.deviceKind == 'L4SP') {
      return `<div class="popup">
      <h3>传感器信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
        <li><span>传感器名称:</span> <b>${iTemp.monitorPointName || '暂无数据'}</b></li>
        <li><span>传感器类型:</span> <b>${'视频监测仪'}</b></li>
        <li><span>传感器状态:</span> <b>${iTemp.deviceOnline}</b></li>
        <li><span>采集时间:</span> <b>${iTemp.location || '暂无数据'}</b></li>
        <li><span>视频预览:</span> <b class="see" onclick="openModelVideo(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        <li><span>视频融合:</span> <b class="see" onclick="playVideo(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    } else {
      return `<div class="popup">
      <h3>传感器信息</h3>
      <ul style="padding: 0 0px 0px 0px;background: transparent;">
      <li><span>传感器名称:</span> <b>${iTemp.sensorSiteCode || '暂无数据'}</b></li>
      <li><span>传感器类型:</span> <b>${iTemp.sensorType}</b></li>
      <li><span>传感器状态:</span> <b>${iTemp.deviceOnline}</b></li>
 
        <li><span>查看详情:</span> <b class="see" onclick="openModel(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
        </ul>
        <div class='popupBut'>
          <img title='保存视角' onclick="saveView(${iTemp.deviceCode},'sb')" src='./static/img/save_view.png' />
        </div>
      </div>`;
    }
    // <li><span>采集时间:</span> <b>${iTemp.location || '暂无数据'}</b></li>
  }

  getOffset(type: string, id: any): Array<number> {
    if (type == 'dzd' || type == '地灾点') {
      return [0, 15];
    } else if (type == 'gcd' || type == '工程') {
      return [0, 15];
    } else if (type == 'sbd' || type == '设备') {
      return [0, 15];
    } else if (type == 'ly' || type == '流域') {
      return [0, 15];
    } else if (type == 'yj' || type == '预警') {
      return [0, 15];
    } else {
      return [];
    }
  }

  /**
   * @description 传感器弹窗 => HTML
   */
  sensorMarkerDom(i) {
    if (i.hydrologyDeviceCode) {
      i.isWater = true
      console.log('这是水文站');

    }

    const iTemp = JSON.parse(JSON.stringify(i));
    delete iTemp.tableCellIcon;
    const data = JSON.stringify(iTemp).replace(/\"/g, "'");
    console.log(data, '');

    return `<div class="popup">
    <h3>传感器信息</h3>
    <ul style="padding: 0 0px 0px 0px;background: transparent;">
      <li><span>传感器名称:</span> <b>${iTemp.sensorSiteCode || '暂无数据'}</b></li>
      <li><span>传感器类型:</span> <b title='${iTemp.sensorType}'>${iTemp.sensorType || '暂无数据'}</b></li>
      <li><span>传感器状态:</span> <b>${iTemp.state || '暂无数据'}</b></li>
    
      <li><span>查看详情:</span> <b class="see" onclick="openModel(${data})" style="color: rgba(21, 254, 254, 1)">查看>></b></li>
      </ul>
    </div>`;
  }
  // <li><span>采集时间:</span> <b title='${iTemp.onlineTime}'>${iTemp.onlineTime || '暂无数据'}</b></li>
  /**
   *使用定时任务确保实体的获取，最多循环5次
   */
  getEntityBy(map, id, callBack) {
    let tempNumber = 0;
    const maxNumber = 5; //最多循环5次
    const tempEvent = window.setTimeout((e) => {
      const tempData = map.findOverlay(id);
      tempNumber++;
      if (tempData || tempNumber == maxNumber) {
        window.clearInterval(tempEvent);
        callBack(tempData);
      }
    }, 200);
  }

  /**
   * 清空数组数据
   */
  clearArray(data: Array<any>) {
    data.splice(0, data.length);
    return data;
  }

  /**
   * 清空数组数据
   */
  clearObject(data: Object) {
    for (let item in data) {
      data[item];
    }
    return data;
  }


  /**
 * 所有点位点击事件后的弹框
 */
  setSTMarkerPopup(e) {
    if(window.breathMarker){
      window.breathMarker.update()
      window.breathMarker.breathe()
      window.breathMarker=null
    }
    if (e && e.graphic && e.graphic.overlay) {
        e.graphic.overlay.update()
        e.graphic.overlay.breathe(0,0)
        window.breathMarker=e.graphic.overlay
    }
    window.clearImpoint()

    var i = e.graphic.overlay.info
    map.openInfoWindowHtml(this.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => this.clearPointLocation_list(map));
    map.popup.setOffset(-185, 50);
  }
}
const tFMapUitl = new TFMapUitl();
export default tFMapUitl;