xx_sw_dp/src/views/map/Map.vue

<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div>
    <!-- 弹窗暂用 -->
    <Dialog :width="'1300px'" :height="900" :dialogVisable="dialogvisable" :title="title" @visible-change="closeModal">
      <div>
        <mapDialog :detailInfo="detailInfo" :title="title"/>
      </div>
    </Dialog>
    <changeMap @changeMap="changeMapBack" />
    <toolBox />
    <legendImg />
    <!-- <ToolMenu @map23changeEvent="map23change" /> -->
    <!-- <ToolMenuBot /> -->
    <div id="mapDiv" :style="addDoubleScreen ? 'width:50%' : 'width:100%'">
      <div id="leftMapMfasking" class="mapMfasking" v-if="mapStore.leftSideMenu"></div>
      <div id="rightMapMfasking" class="mapMfasking" v-if="mapStore.rightSideMenu"></div>
      <!-- <div  style="display: inline-block;font-size: 16px;padding-top: 0px;top: 100px; left: 300px; background-color: white; color: #000; position: absolute; z-index: 999;height: 24px;"><div >这里显示标题</div></div>
      <div  style="display: inline-block;font-size: 16px;padding-top: 0px;top: 100px; left: 1200px; background-color: white; color: #000; position: absolute; z-index: 999;height: 24px;"><div >这里显示标题</div></div> -->
    </div>
    <!-- <doubleScreen v-if="addDoubleScreen" /> -->
    <!-- <Curve ref="curve" /> -->
    <!-- 经纬度 -->
    <div class="jwd">
      <div>经度: &nbsp;{{ lat ? lat : '暂无数据' }}</div>
      <div>纬度: &nbsp;{{ lng ? lng : '暂无数据' }}</div>
    </div>
  </div>
  <!-- <div style="width:100vh,height:100%">
    <BasicInformation />
  </div> -->
  <!-- <detailsInfo /> -->
</template>
<script>
import Dialog from '/@/components/Dialog/index.vue';
import mapDialog from '/@/components/Dialog/mapDialog.vue';
import { defineComponent, ref, watch,onBeforeUnmount } from 'vue';
import jquery from 'jquery';
import Curve from './Curve.vue';
import BasicInformation from '/@/views/map/EngineeringModel/index.vue';
import { useGeologicalStore } from '/@/store/modules/geological';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import eventBus from '/@/utils/eventBus';
import ToolMenu from './ToolMenu.vue';
import ToolMenuBot from './ToolMenuBot.vue';
import dxh from '../../assets/json/dxh.json';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { getColorVal, getWdColorVal } from '/@/utils/getcolor.js';
import doubleScreen from './doubleScreen.vue';
import dzdSvg from '../../assets/images/dzd.svg';
import { useMapStore } from '/@/store/modules/map';
import LINGZHI from '../../assets/json/lingzhi.js';
import { getStrUnicode } from '/@/utils/fnUtils.ts';
import detailsInfo from '/@/views/map/detailsInfo/index.vue';
import ybjJson from './ybj.json';
import toolBox from './toolBox.vue';
import changeMap from './changeMap.vue';
import legendImg from './legend.vue';
// 基础测站点
import { useBasicStore } from '/@/store/modules/basicData';
import { rainMap, rainMapfq, wdMap, gcSite, getStDetailInfo, changeHeight,getImportPoint } from '/@/api/swHome/index';
import fenquData from './fenqu.json';
import { useMessage } from '/@/hooks/web/useMessage';
import  './range.js'

let dzdxInfoList = null;
let gcInfoList = null;
let monitorSensorsList = null;
let monitorDevicesList = null;
let dzgcMarkerIdList = new Object();
const { createMessage } = useMessage();
export default defineComponent({
  name: 'Map',
  components: {
    ToolMenu,
    ToolMenuBot,
    Curve,
    doubleScreen,
    BasicInformation,
    detailsInfo,
    toolBox,
    changeMap,
    legendImg,
    Dialog,
    mapDialog,
  },

  setup() {
    const mapStore = useMapStore();
    const basicStore = useBasicStore();
    const dialogvisable = ref(false);
    const title = ref('羊村水文站（9061000183）');
    const closeModal = (i) => {
      dialogvisable.value = i;
    };
    const rainData = ref([]);
    const rainDatafq = ref([
      { name: '羊村—米林', value: 0 },
      { name: '米林—尼西—玉松', value: 0 },
      { name: '排龙站以上流域', value: 0 },
      { name: '金珠藏布流域', value: 0 },
      { name: '玉松—排龙—希让', value: 0 },
      { name: '白马西路河流域', value: 0 },
    ]);
    // 存放气象站数据
    const qixiangData = ref([]);
    const changeMapBack = (val) => {
      map.removeOverlay('rainMap*');
      map.removeOverlay('fqPolygon');
      map.removeOverlay('wdMap*');
      map.removeOverlay('fxMap*');
      if(window.iso){
        iso.remove()
      }
     
      rainData.value = basicStore.getStDetailInfo.st_rain;
      qixiangData.value = [...basicStore.getStDetailInfo.st_wea_general, ...basicStore.getStDetailInfo.st_wea_standard];
      // 关闭基础图层
      if (val.flag) {
        window.clearImpoint()
        map.showOverlay('shuiwenzhan*', false);
        map.showOverlay('shuiweizhan*', false);
        map.showOverlay('yuliangzhan*', false);
        map.showOverlay('yibanqixiangzhan*', false);
        map.showOverlay('biaozhunqixiangzhan*', false);
        map.showOverlay('tanshuitongliangzhan*', false);
        map.showOverlay('gc*', false);
        map.showOverlay('fqPolygon', false);
        // map.showLayer2D('yuliangfenqu', false);
        map.showLayer2D('sx', false);
        if (val.maptype == 1) {
          rainMap({ start_time: val.start_time, end_time: val.end_time }).then((res) => {
            // 添加value
            if (res.code == 200 && res.data?.length > 0) {
              let arr=[]
              rainData.value.forEach((item) => {
                res.data.forEach((item2) => {
                  if (item.stcd == item2.stcd) {
                    item.value = item2.value;
                    arr.push(item2.value)
                  }
                });
              });
              eventBus.emit('rainLegend', {max:Math.max(...arr),min:Math.min(...arr)});
              // 更新点
              uprainLayer();
            }
          });
          // 面雨量图
        } else if (val.maptype == 0) {
          rainMap({ start_time: val.start_time, end_time: val.end_time }).then((res) => {
            // 添加value
            if (res.code == 200 && res.data?.length > 0) {
              let arr=[]
              rainData.value.forEach((item) => {
                res.data.forEach((item2) => {
                  if (item.stcd == item2.stcd) {
                    item.value = item2.value;
                    arr.push(item2.value)
                  }
                });
              });
              eventBus.emit('rainLegend', {max:Math.max(...arr),min:Math.min(...arr)});
              // 更新点
              uprainAreaLayer()
            }
          });
        } else if (val.maptype == 2) {
          rainMapfq({ start_time: val.start_time, end_time: val.end_time }).then((res) => {
            // 添加value
            if (res.code == 200 && res.data?.length > 0) {
              let arr=[]
              rainDatafq.value.forEach((item) => {
                res.data.forEach((item2) => {
                  if (item.name == item2.name) {
                    item.value = item2.value;
                    arr.push(item2.value)
                  }
                });
              });
              eventBus.emit('rainLegend', {max:Math.max(...arr),min:Math.min(...arr)});
              // 更新分区
              loadFenquLayers();
            }
          });
          // 温度
        } else if (val.maptype == 3) {
          qixiangData.value = [...basicStore.getStDetailInfo.st_wea_general, ...basicStore.getStDetailInfo.st_wea_standard];
          wdMap({ time: val.end_time }).then((res) => {
            if (res.code == 200 && res.data?.st_temp?.length > 0) {
              let arr=[]
              qixiangData.value.forEach((item) => {
                res.data.st_temp.forEach((item2) => {
                  if (item.stcd == item2.stcd) {
                    item.value = item2.value;
                    item.cunzai = true;
                    arr.push(item2.value)
                  }
                });
              });
              eventBus.emit('wdLegend', {max:Math.max(...arr),min:Math.min(...arr)});
              // 更新点
              upwdLayer();
            }
          });
          // 风速风向
        } else if (val.maptype == 4) {
          qixiangData.value = [...basicStore.getStDetailInfo.st_wea_general, ...basicStore.getStDetailInfo.st_wea_standard];
          wdMap({ time: val.end_time }).then((res) => {
            if (res.code == 200 && res.data?.wind_info?.length > 0) {
              qixiangData.value.forEach((item) => {
                res.data.wind_info.forEach((item2) => {
                  if (item.stcd == item2.stcd) {
                    item.ws = item2.ws;
                    item.wd = item2.wd;
                    item.cunzai = true;
                  }
                });
              });
              // 更新点
              upfxLayer();
            }
          });
        }
      } else {
        // 获取重要测站点
        window.impointFlag=true
        window.getImportSites()
        map.showOverlay('shuiwenzhan*', true);
        map.showOverlay('shuiweizhan*', true);
        map.showOverlay('yuliangzhan*', true);
        map.showOverlay('yibanqixiangzhan*', true);
        map.showOverlay('biaozhunqixiangzhan*', true);
        map.showOverlay('tanshuitongliangzhan*', true);
        map.showOverlay('gc*', true);
        map.showOverlay('fqPolygon', true);
        // map.showLayer2D('sx', true);
      }
    };
    const detailInfo = ref([]);

    const uprainLayer = () => {
      rainData.value.forEach((i) => {
        i.typeName = '雨量站';
        if (i.lat && i.lng) {
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');
          let textWidth = 14;
          canvas.width = 20;
          canvas.height = 20;
          let x = 0.8;
          let y = 0.8;
          let w = canvas.width;
          let h = canvas.height;
          let r = 5;
          // 缩放
          context.scale(0.8, 0.8);
          // context.fillStyle = 'rgba(0,0,0,0.5)'
          context.fillStyle = getColorVal(i.value);
          // context.fillStyle = 'rgba(231, 231, 231,0.9)'
          // 阴影
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.shadowBlur = 2;
          context.shadowColor = 'rgba(0,0,0,0.5)';
          // 绘制圆角矩形
          context.beginPath();
          context.arc(w, h, r, 0, 2 * Math.PI);
          context.closePath();
          context.fill();

          var marker = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, canvas, {
            scale: 1.5,
          })
            // .action('./static/img/gc2.png')
            .init()
            .pierce();
          marker.setId('rain&' + i.stcd);
          const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + 'rainMap*';
          marker.setClassify(tempClass);
          dzgcMarkerIdList[marker.id] = marker;
          marker.label(i.st_name + ' ' + i.value + 'mm', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
          marker.info = i;
          // console.log(marker.info, 74);
          marker.addListener(map, (e) => {
            if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }
            var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-182, 64);
          });
          map.addOverlay(marker);
        }
      });
    };
    const colors = [
    { min: 2000, max: 99999, color: "#ffffff" },
    { min: 250, max: 2000, color: "#84003f" },
    { min: 100, max: 250, color: "#fa00fa" },
    { min: 50, max: 100, color: "#0000fe" },
    { min: 25, max: 50, color: "#61b8ff" },
    { min: 10, max: 25, color: "#3db93d" },
    { min: 1, max: 10, color: "#a6f28e" },
    { min: 0, max: 1, color: "rgba(0,0,0,0)" },
    ]
    // 更新面雨量分布图
    const uprainAreaLayer = () => {
      // window.mapConfig.isosurfaceUrl='http://106.12.170.138:4001/isosurface'
      rainData.value.forEach(i=>{
        if(Number(i.value)){
          i.value=Number(i.value)
        }else{
          i.value=0
        }
      })
      const key = 'updatable';
        createMessage.loading({ content: '正在进行面雨量分布图计算,请勿进行其他操作', key, duration: 0 });
      window.iso = new TFMap.Isosurface(map, rainData.value, range,colors,()=>{
        createMessage.success({ content: '面雨量分布图计算完成', key, duration: 2 });
      });
      iso.init();
    };
    // 温度图
    const upwdLayer = () => {
      qixiangData.value.forEach((i) => {
        i.typeName = '气象站';
        if (i.lat && i.lng && i.cunzai) {
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');
          let textWidth = 14;
          canvas.width = 20;
          canvas.height = 20;
          let x = 0.8;
          let y = 0.8;
          let w = canvas.width;
          let h = canvas.height;
          let r = 5;
          // 缩放
          context.scale(0.8, 0.8);
          // context.fillStyle = 'rgba(0,0,0,0.5)'
          context.fillStyle = getWdColorVal(i.value);
          // context.fillStyle = 'rgba(231, 231, 231,0.9)'
          // 阴影
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.shadowBlur = 2;
          context.shadowColor = 'rgba(0,0,0,0.5)';
          // 绘制圆角矩形
          context.beginPath();
          context.arc(w, h, r, 0, 2 * Math.PI);
          context.closePath();
          context.fill();

          var marker = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, canvas, {
            scale: 1.5,
          })
            // .action('./static/img/gc2.png')
            .init()
            .pierce();
          marker.setId('wd&' + i.stcd);
          const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + 'wdMap*';
          marker.setClassify(tempClass);
          dzgcMarkerIdList[marker.id] = marker;
          marker.label(i.st_name + ' ' + i.value + '℃', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
          marker.info = i;
          // console.log(marker.info, 74);
          marker.addListener(map, (e) => {
            if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }
            var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-182, 64);
          });
          map.addOverlay(marker);
        }
      });
    };
    // 风速风向图
    const upfxLayer = () => {
      qixiangData.value.forEach((i) => {
        i.typeName = '气象站';
        if (i.lat && i.lng && i.cunzai) {
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');
          let textWidth = 14;
          canvas.width = 20;
          canvas.height = 20;
          let x = 0.8;
          let y = 0.8;
          let w = canvas.width;
          let h = canvas.height;
          let r = 5;
          // 缩放
          context.scale(0.8, 0.8);
          // context.fillStyle = 'rgba(0,0,0,0.5)'
          context.fillStyle = '#fff';
          // context.fillStyle = 'rgba(231, 231, 231,0.9)'
          // 阴影
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.shadowBlur = 2;
          context.shadowColor = 'rgba(0,0,0,0.5)';
          // 绘制圆角矩形
          context.beginPath();
          context.arc(w, h, r, 0, 2 * Math.PI);
          context.closePath();
          context.fill();

          var marker = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, canvas, {
            scale: 1,
          })
            // .action('./static/img/gc2.png')
            .init()
            .pierce();
          marker.setId('fs&' + i.stcd);
          const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + 'fxMap*';
          marker.setClassify(tempClass);
          dzgcMarkerIdList[marker.id] = marker;
          marker.label(i.st_name + ' ' + '风速' + i.ws + '级', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 18, 'rgba(6,161,239,0)');
          marker.info = i;
          // console.log(marker.info, 74);
          marker.addListener(map, (e) => {
            var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-182, 64);
          });
          map.addOverlay(marker);

          var marker2 = new TFMap.Marker({  x: i.lng, y: i.lat, z: i.high  }, './static/img/siteimg/fengxiang.png', {
            scale: 0.6,
            rotation: Cesium.Math.toRadians(-i.wd),
            pixelOffset: new Cesium.Cartesian2(5, -5),
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          })
            // .action('./static/img/gc2.png')
            .init()
            .pierce();
          marker2.setId('fx&' + i.stcd);
          const tempClass2 = TFMapUitl.getId('sbd', i.stcd) + '*' + ',' + 'fxMap*';
          marker2.setClassify(tempClass2);
          // dzgcMarkerIdList[marker2.id] = marker2;
          // marker2.label(i.st_name + ' ' + '风速'+i.ws+'级', '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -80, 'rgba(6,161,239,0)');
          // marker2.info = i;
          // console.log(marker.info, 71);
          // marker2.addListener(map, (e) => {
          //   var html = TFMapUitl.gcdMarkerDom(e.graphic.overlay.info);
          //   map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
          //   map.popup.setOffset(-270, -30);
          //   TFMapUitl.active(e.graphic.overlay.id);
          //   TFMapUitl.trends(e.graphic.overlay.points, null, true);
          // });
          map.addOverlay(marker2);
        }
      });
    };
    const loadFenquLayers = () => {
      let geo = new TFMap.GeoPolygon(fenquData, 10000, '#fffff7', '#000000', true);
      geo.data.features.forEach((i) => {
        // i.properties.color='#fff';
        i.properties.fontColor = '#377DFF';
        i.properties.fontSize = 18;
        rainDatafq.value.forEach((item) => {
          if (item.name == i.properties.nameKey) {
            i.properties.color = getColorVal(item.value);
            i.properties.name = item.name + ' ' + item.value + 'mm';
            console.log(i.properties.name,8282)
          } else if (i.properties.nameKey == '尼西站以上') {
            i.properties.color = '#fffff7';
          }
        });
      });
      geo.label({
        font: 'normal 18px MicroSoft YaHei',
        fillColor: Cesium.Color.fromCssColorString('#377DFF'),
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //有填充和边框
        outlineColor: Cesium.Color.WHITE,
        outlineWidth:5 });
      // console.log(geo,87)
      geo.setClassify('fqPolygon'); //写一个类名也可不行，写了可以使用这个名字进行删除
      geo.addListener(map, (e) => {
        console.log('e:', e);
      });
      map.addOverlay(geo);
    };

    eventBus.on('mapjump', (e) => {
      console.log(e, 76);
      basicStore.getStDetailArrStore.forEach((i) => {
              if (i.st_name == e.pageTitle) {
                console.log(i,887)
                    // siteDetail(i);
                    // 高亮点
                    window.breathMarker&& window.breathMarker.breathe();window.breathMarker=null
                    window.breathMarker=map.findOverlay(`gcd&${i.stcd}`)
                    window.breathMarker.breathe(0,0.3)
              }
            });
      map.flyTo(
        {
          destination: {
            x: e.lng,
            y: e.lat,
            z: 5000,
          },
          orientation: {
            heading: 6.283185307179586,
            pitch: -1.5688928482139568,
            roll: 0,
          },
        },
        1,
        () => {
          // siteDetail(i);
           
        }
      );
    });
    // 更新站点高程
    eventBus.on('updateSTHeight', () => {
      updateStHeightInfo();
    });
    watch(
      () => mapStore.stInfo,
      (newV) => {
        basicStore.getStDetailArrStore.forEach((i) => {
          if (i.stcd == newV.stcd) {
            console.log(i,887)
            map.flyTo(
              {
                destination: {
                  x: i.lng,
                  y: i.lat,
                  z: 5000,
                },
                orientation: {
                  heading: 6.283185307179586,
                  pitch: -1.5688928482139568,
                  roll: 0,
                },
              },
              1,
              () => {
                // siteDetail(i);
                // 高亮点
                window.breathMarker&& window.breathMarker.breathe();window.breathMarker=null
                window.breathMarker=map.findOverlay(`gcd&${i.stcd}`)
                if(i.st_type == 1||i.st_type==2||i.st_type==4){
                  window.breathMarker.breathe(0,0.3)
                }else{
                  window.breathMarker.breathe()
                }
                
              }
            );
          }
        });
      }
    );
    onBeforeUnmount(() => {
      window.impointInterval&&clearInterval(window.impointInterval)
    });
    return {
      mapStore,
      dialogvisable,
      title,
      closeModal,
      detailInfo,
      changeMapBack,
      uprainLayer,
      loadFenquLayers,
    };
  },

  data() {
    return {
      markerAddType: true,
      markerAddSBType: true,
      markerAddCGQType: true,
      markerAddWordType: true,
      layerAddType: true,
      visible: false,
      addDoubleScreen: false,
      map23changeType: false,
      stDetailArrStore: [],
      lat: null,
      lng: null,
    };
  },

  mounted() {
    window.impointFlag=true
    const geologicalStore = useGeologicalStore();
    const monitorDevicesStore = useMonitorDevicesStore();
    this.init(() => { });
    setTimeout(() => {
      this.initWinWay();
      const basicStore = useBasicStore();
      // 测站信息
      // console.log(basicStore.getStDetailArrStore, 65);
      this.getMapConfig(geologicalStore);

      this.getStDetailInfoAxios();

      this.getGCSite();
      // rainMap({"start_time":"2023-07-05 10:00:00","end_time":"2023-07-05 01:00:00"})
      // //地灾点
      // this.getDzdxInfo(geologicalStore);
      // //工程
      // this.getGcInfo(geologicalStore);
      // //传感器
      // this.getMonitorSensorsList(monitorDevicesStore);
      // //设备点
      // setTimeout(() => {
      //   this.getMonitorDevicesList(monitorDevicesStore);
      //   this.getWater(monitorDevicesStore);
      //   this.getWaterDev(monitorDevicesStore);
      // }, 2000);
      // // this.gnssLine(monitorDevicesStore);
      // this.getDzdxInfoTxData(geologicalStore);

      this.controlMarker();
      this.addHL();
      map.event.wheel(() => this.controlMarker(true));
      // map.event.camera(() => this.controlMarker(true));
      map.event.moveEnd(() => setTimeout(() => this.controlMarker(true), 500));
      this.mapHover();
      // eventBus.on('doubleScreenControl', () => {
      //   this.addDoubleScreen = !this.addDoubleScreen;
      //   if (this.addDoubleScreen) {
      //     this.hideAll();
      //   } else {
      //     setTimeout(() => this.controlMarker(true), 500);
      //   }
      // });
      // eventBus.on('map23changeEvent', () => {
      //   this.map23changeType = !this.map23changeType;
      //   if (dzdxInfoList) this.dzdxInfoMarker(dzdxInfoList);
      //   if (gcInfoList) this.gcInfoMarker(gcInfoList);
      //   if (monitorDevicesList) this.devicesMarker(monitorDevicesList);
      //   if (monitorDevicesList) this.devicesMarkerWord(monitorDevicesList);
      //   this.controlMarker();
      // });

      // ybjJson.features.map((i) => {
      //   map.addOverlay(
      //     new TFMap.Line(i.geometry.coordinates, 'rgba(0,63,255,1)', 40).init().setFlow('#6fcfff', 10000).stream(map).setClassify('gnss_arrow_line*')
      //   );
      // });
    }, 3000);
  },

  methods: {
    // 获取重要测站点
    getImportSites(){
      getImportPoint().then(res=>{
        console.log(this.stDetailArrStore,366)
        if(res.code==200&&res.data){
          window.impoint=[]
          res.data.forEach(i=>{
            this.stDetailArrStore.forEach(j=>{
              if(i.stcd==j.stcd){
              let markerWindow=  new TFMap.HTMLElementOverLay(
                { x:Number(i.dlon) , y: Number(i.dlat),z:Number(j.high)  },
                TFMapUitl.impotPointDom(i)
              ).init().setOff(-230, -130)
              markerWindow.setId('imp&' + i.stcd);
              markerWindow.setClassify('impoint_marker*')
              window.impoint.push(markerWindow)
              map.addOverlay(markerWindow)
              console.log(markerWindow,7737)
              }
            })
          })
        }
      })
    },
    getMapConfig(geologicalStore) {
      geologicalStore
        .MapConfig({
          pages: 1,
          size: 1000,
          // bq: '1',
          'orders[0].column': 'fzxh',
          'orders[0].asc': 'true',
          'orders[1].column': 'fwxh',
          'orders[1].asc': 'true',
        })
        .then((res) => {
          var layerAdminList = [];
          var list = res.records;
          var list = res.records.sort(function (a, b) {
            if (!a.jzxh) return 1;
            if (!b.jzxh) return -1;
            return a.jzxh - b.jzxh;
          });
          console.log('地图的配置接口数据:', res);
          for (var i = 0; i < list.length; i++) {
            var o = list[i];
            if (!o.jclx) {
              var jzxh = o.jzxh + 1;
              if (o.code && o.fbdz && o.code == o.fbdz) {
                //特殊图层
                layerAdminList.push({
                  id: o.code,
                  title: o.zymc, //code,epsg,type,show,fbdz,bq,fwfz,fwxh,xh,scene
                  epsg: o.epsg,
                  type: '',
                  show: o.show,
                  url: o.fbdz,
                  bq: o.bq,
                  fwfz: o.fwfz,
                  fwxh: o.fwxh,
                  fzxh: o.fzxh,
                  alpha: o.tmd,
                  index: jzxh,
                });
              } else if (o.scene == 1) {
                mapConfig.demUrl = mapConfig.demUrl || o.fbdz;
                mapConfig.isSct = true;
              } else if (o.scene == 2 && o.bq == 1 && o.fwfz != '测试') {
                var layer = {
                  id: o.code,
                  title: o.zymc, //code,epsg,type,show,fbdz,bq,fwfz,fwxh,xh,scene
                  epsg: o.epsg,
                  type: o.type == '超图' ? 'SUPER' : o.type == '百度' ? 'BD' : o.type == '高德' ? 'GD' : 'SUPER_3D',
                  show: o.show,
                  url: o.fbdz,
                  bq: o.bq,
                  fwfz: o.fwfz,
                  fzxh: o.fzxh,
                  fwxh: o.fwxh,
                  alpha: o.tmd,
                  index: jzxh,
                };
                if (layer.id.indexOf('_bz') > -1) {
                  layer.gamma = 0.5;
                }
                if (layer && layer.id != 'baseyx') {
                  if (layer.title != '江面') {
                    map.layer2d.add(layer);
                  } else {
                    Cesium.when(map.viewer.scene.open(layer.url), function (e) {
                      //查找水面图层
                      if (e && e.length) {
                        var waterLayer = e[0];
                        var style = new Cesium.Style3D();
                        style.bottomAltitude = 12;
                        waterLayer.style3D = style;
                        waterLayer.refresh();
                        const tempData = {
                          destination: { x: 94.44066857601297, y: 26.00104492171595, z: 666896.88999354467 },
                          orientation: { heading: 6.283185307179586, pitch: -1.0182023771170687, roll: 6.283185307179586 },
                        };
                        map.setView(tempData);
                      }
                    });
                  }
                  mapConfig.layers2D.push(layer);
                  layerAdminList.push(layer);
                }
              } else if (o.bq == '0') {
                var layer = {
                  id: o.code,
                  title: o.zymc,
                  epsg: o.epsg,
                  type: o.type == '超图' ? 'SUPER' : o.type == '百度' ? 'BD' : o.type == '高德' ? 'GD' : 'SUPER_3D',
                  show: o.show,
                  url: o.fbdz,
                  bq: o.bq,
                  fwfz: o.fbdz || o.fwfz,
                  alpha: o.tmd,
                  fzxh: o.fzxh,
                  fwxh: o.fwxh,
                  index: jzxh,
                };
                map.layer2d.add(layer);
                mapConfig.layers2D.push(layer);
              }
            }
          }
          console.log('读取接口数据完成:', mapConfig);
          console.log('图层管理的数据:', layerAdminList);
          eventBus.emit('mapConfig', layerAdminList);
        });
    },
    // 获取测站
    getStDetailInfoAxios() {
      getStDetailInfo().then((res) => {
        const Obj = JSON.parse(JSON.stringify(res.data));
        this.stDetailArrStore = [];
        let objArr = [];
        for (const i in Obj) {
          objArr = [...objArr, ...Obj[i]];
        }
        objArr.forEach((element) => {
          this.stDetailArrStore.push(element);
        });
        // 加载测站
        this.setSTMarker(this.stDetailArrStore);
        // 获取重要测站点
        window.getImportSites()
      });
    },

    map23change() {
      this.map23changeType = !this.map23changeType;
    },

    init(callback) {
      window.map = TFMC.initMap('mapDiv');
      // map.mapLoadEnd((e) => {
      //   if (e == 2) callback && callback();
      // });
      map.setView({
        destination: { x: 93.8, y: 26.02060211195423, z: 666896.88999354467 },
        orientation: { heading: 6.283185307179586, pitch: -1.0182023771170687, roll: 6.283185307179586 },
      });
      this.addMapElement();
      // map.mouseNowLevelCoordinate(4);
      map.updateOverlayEvent();
      // map.cluster('dzdOverlayLayer', true);
      // 设置经纬度样式
      map.event.mousemove((i) => {
        this.lat = i.position?.x.toFixed(4);
        this.lng = i.position?.y.toFixed(4);
        // console.log(i.position)
      });
    },

    setLegibility(id) {
      // 获取当前的图层
      let layer = viewer.scene.imageryLayers.get(id);
      // 改变当前地图的组织结构
      layer.minificationFilter = Cesium.TextyreMinificationFiler.NEAREST;
      layer.magnificationFilter = Cesium.TextureMagnificationFilter.NEAREST;
    },

    addMapElement() {
      const pos = {
        x: 95.19195431367271,
        y: 29.286442746934686,
        z: 2000.388319131086,
      };
      //添加遮罩

      new TFMap.MaskRegion(map, LINGZHI, 'rgba(3,22,51,0.5)', 'rgba(5, 239, 238,0)', 5);

      // var url = 'http://221.182.8.141:15000/iserver/services/3D-jiangmian/rest/realspace';
      // var promise = map.viewer.scene.open(url);
      // Cesium.when(promise, function (e) {
      //   //查找水面图层
      //   console.log('查找水面图层:', e);
      // });

      // var p = [
      //   { x: 95.18070909269822, y: 29.26003526267188, z: 1122.076286944328 },
      //   { x: 95.1435908284088, y: 29.249506598514103, z: 1253.656464931965 },
      //   { x: 95.16379989840375, y: 29.226347165740222, z: 1336.4578721033515 },
      //   { x: 95.19797174941132, y: 29.240678818976612, z: 1286.692241515867 },
      // ];
      // map.addOverlay(new TFMap.WaterPrimitive(p).init().setClassify('heliu*'));

      //添加动态圆圈
      // map.addOverlay(
      //   new TFMap.Ellipse(pos, 580000, 580000, 8900)
      //     .init()
      //     .img('./static/img/circular_03.png')
      //     .rotation()
      //     .setClassify('Ellipse*')
      // );

      // map.viewer.camera.moveStart.addEventListener((e) => {
      //   console.log('1111:', e);
      // });
      // map.viewer.camera.changed.addEventListener(() => {
      //   console.log('111111');
      // });

      //添加范围墙
      // fetch('./static/json/lingzhi.json')
      //   .then(function (e) {
      //     return e.json();
      //   })
      //   .then(function (t) {
      //     var r = new TFMap.RegionWall(
      //       t,
      //       './static/img/top.png' || 'rgba(3,22,51,0)',
      //       './static/img/wall.png',
      //       35000
      //     )
      //       .init()
      //       .setClassify('RegionWall*')
      //       .setAttr('polygon', 'scale', '0.5');
      //     map.addOverlay(r);
      //   });
      //添加光柱
      // [
      //   { x: 93.45315732121456, y: 29.81648129505731, z: 35515.62049538095 },
      //   { x: 95.35242730377918, y: 29.922564437470662, z: 35593.60647778936 },
      //   { x: 94.09114807467088, y: 28.724140215045367, z: 35634.98999112331 },
      //   { x: 95.41300154867866, y: 28.411940956038322, z: 35692.68875426455 },
      //   { x: 96.47729188621418, y: 28.563591229514525, z: 35623.52302594622 },
      //   { x: 97.67456081254306, y: 28.746049506060256, z: 35763.01771823281 },
      //   { x: 96.03951832224743, y: 29.424846985291925, z: 35856.12499749074 },
      //   { x: 94.30220043303984, y: 29.63903809376401, z: 35661.36712589557 },
      // ].map((i) => {
      //   map.addOverlay(new TFMap.ConeGlow(i, 'rgba(19,91,239,0.9)', 80000, 10000).init());
      // });
    },

    getDzdxInfo(geologicalStore) {
      geologicalStore
        .DzdxInfo({
          type: 'all',
        })
        .then((res) => {
          dzdxInfoList = res;
          this.dzdxInfoMarker(dzdxInfoList);
          this.controlMarker();
        });
    },

    getGcInfo(geologicalStore) {
      geologicalStore
        .GcInfo({
          pages: 1,
          size: 1000,
        })
        .then((res) => {
          gcInfoList = res.records;
          this.gcInfoMarker(gcInfoList);
        });
    },

    // //获取地灾范围
    // getGeoDisRegList(monitorDevicesStore) {
    //   monitorDevicesStore
    //     .LiGongMonitorSensorsList({
    //       pageNo: 1,
    //       pageSize: 1000,
    //     })
    //     .then((res) => {
    //       console.log('获取传感器列表:', res);
    //       monitorSensorsList = res.result.records;
    //       this.controlMarker();
    //     });
    // },

    //获取设备列表
    getMonitorDevicesList(s) {
      s.LiGongMonitorDevicesList({
        pageNo: 1,
        pageSize: 1000,
      }).then((res) => {
        monitorDevicesList = res.result.records;
        this.devicesMarker(monitorDevicesList);
        this.devicesMarkerWord(monitorDevicesList);
        // setTimeout(() => this.controlMarker(), 2000);
      });
    },

    //获取设备列表
    getWaterDev(monitorDevicesStore) {
      // monitorDevicesStore
      //   .waterDeviceStatus({
      //     pageNo: 1,
      //     pageSize: 1000,
      //   })
      //   .then((res) => {
      //     console.log('获取水文cgq列表???????????:', res);
      //     monitorDevicesList = res.result.records;
      //     this.devicesMarker(monitorDevicesList);
      //     this.devicesMarkerWord(monitorDevicesList);
      //     setTimeout(() => this.controlMarker(), 2000);
      //   });
    },

    getWater(monitorDevicesStore) {
      monitorDevicesStore
        .waterDevice({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('', res);
          let devRes = {
            success: true,
            message: '',
            code: 200,
            result: {
              records: [
                {
                  id: '90610001',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '羊村水文站',
                  hydrologyDeviceCode: '90610001',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区山南市桑日县羊村',
                  hydrologyDeviceLon: 91.816667,
                  hydrologyDeviceLat: 29.266667,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 153191,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
                {
                  id: '90610002',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '朗县水文站',
                  hydrologyDeviceCode: '90610002',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: null,
                  hydrologyDeviceLon: 93.033333,
                  hydrologyDeviceLat: 29.05,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 162844,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
                {
                  id: '90610003',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: 'ML水文站',
                  hydrologyDeviceCode: '90610003',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市米林县扎西绕登乡甲玛村',
                  hydrologyDeviceLon: 94.233333,
                  hydrologyDeviceLat: 29.233333,
                  hydrologyDeviceonline: 1,
                  catchmentArea: 172170,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '在线',
                },
                {
                  id: '90610004',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '派镇水文站',
                  hydrologyDeviceCode: '90610004',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: null,
                  hydrologyDeviceLon: 94.866667,
                  hydrologyDeviceLat: 29.516667,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 192977,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
                {
                  id: '90610005',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '排龙水文站',
                  hydrologyDeviceCode: '90610005',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区波密县境内',
                  hydrologyDeviceLon: 95.05,
                  hydrologyDeviceLat: 30.066667,
                  hydrologyDeviceonline: 1,
                  catchmentArea: 25656,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '在线',
                },
                {
                  id: '90610006',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '汗密水文站',
                  hydrologyDeviceCode: '90610006',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市墨脱县背崩乡汗密',
                  hydrologyDeviceLon: 95.133333,
                  hydrologyDeviceLat: 29.366667,
                  hydrologyDeviceonline: 1,
                  catchmentArea: 126,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '在线',
                },
                {
                  id: '90610007',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:12',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '德兴水文站',
                  hydrologyDeviceCode: '90610007',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市墨脱县德兴乡德兴村',
                  hydrologyDeviceLon: 95.3,
                  hydrologyDeviceLat: 29.316667,
                  hydrologyDeviceonline: 1,
                  catchmentArea: 225871,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '在线',
                },
                {
                  id: '90610008',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:13',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '希让水文站',
                  hydrologyDeviceCode: '90610008',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市墨脱县背崩乡希让村',
                  hydrologyDeviceLon: 95.016667,
                  hydrologyDeviceLat: 29.166667,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 227409,
                  isNew: 0,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
                {
                  id: '90610009',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:13',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '扎西绕登水文站',
                  hydrologyDeviceCode: '90610009',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市米林县扎西绕登乡',
                  hydrologyDeviceLon: 94.033333,
                  hydrologyDeviceLat: 29.266667,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 1050,
                  isNew: 1,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
                {
                  id: '90610010',
                  createBy: 'sw',
                  createTime: '2023-07-11 14:48:13',
                  updateBy: null,
                  updateTime: '2023-07-13 00:00:01',
                  hydrologyDeviceName: '尼西水文站',
                  hydrologyDeviceCode: '90610010',
                  hydrologyDeviceKind: 'L3SW',
                  hydrologyDeviceLocation: '西藏自治区林芝市巴宜区尼西村',
                  hydrologyDeviceLon: 94.2,
                  hydrologyDeviceLat: 29.75,
                  hydrologyDeviceonline: 0,
                  catchmentArea: 16148,
                  isNew: 1,
                  hydrologyDeviceKind_dictText: '水文站',
                  hydrologyDeviceonline_dictText: '离线',
                },
              ],
              total: 94,
              size: 10,
              current: 1,
              orders: [],
              optimizeCountSql: true,
              searchCount: true,
              countId: null,
              maxLimit: null,
              pages: 10,
            },
            timestamp: 1689238515268,
          };
          monitorDevicesList = devRes.result.records;
          monitorDevicesList.map((e) => {
            e.deviceKind = e.hydrologyDeviceKind;
            e.deviceLon = e.hydrologyDeviceLon;
            e.deviceLat = e.hydrologyDeviceLat;
            e.online = e.hydrologyDeviceonline;
            e.deviceName = e.hydrologyDeviceName;
            e.elevation = '0';
            e.deviceCode = e.hydrologyDeviceCode;
          });
          // i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0
          this.waterMarker(monitorDevicesList);
          this.devicesMarkerWord(monitorDevicesList);
          setTimeout(() => this.controlMarker(), 2000);
        });
    },

    //获取传感器列表
    getMonitorSensorsList(monitorDevicesStore) {
      monitorDevicesStore
        .LiGongMonitorSensorsList({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('获取传感器列表:', res);
          monitorSensorsList = res.result.records;
          this.controlMarker();
        });
    },

    findSensorInnerCode(id) {
      var obj = monitorSensorsList.find((item) => item.deviceCode === id);
      if (obj) {
        return obj.sensorInnerCode;
      } else {
        return null;
      }
    },

    //通过设备ID获取传感器列表
    idGetSensorsList(i) {
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .LiGongMonitorSensorsList({
          pageNo: 1,
          pageSize: 1000,
          deviceId: i.id,
        })
        .then((res) => {
          if (res && res.result && res.result.records.length) {
            var obj = res.result.records[res.result.records.length - 1];
            if (i.deviceLon && i.deviceLat && obj.sensorLon && obj.sensorLat) {
              var dot = [
                [i.deviceLon, i.deviceLat],
                [obj.sensorLon, obj.sensorLat],
              ];
              map.addOverlay(new TFMap.Line(dot, 'rgba(255,255,0,1)', 5).init().setArrow().setClassify('gnss_arrow_line*'));
            }
          }
        });
    },

    devicesMarker(list) {
      list.map((i) => {
        if (i.deviceLon && i.deviceLat) {
          // i.sensorInnerCode = this.findSensorInnerCode(i.deviceCode);
          let temp = null;
          let temp2 = null;
          if (i.online == 0) {
            temp = `./static/img/offLine/${i.deviceKind}.png`;
            temp2 = `./static/img/offLine2/${i.deviceKind}.png`;
          } else if (i.online == 1) {
            temp = `./static/img/onLine/${i.deviceKind}.png`;
            temp2 = `./static/img/onLine2/${i.deviceKind}.png`;
          }
          var marker = new TFMap.Marker([i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0], temp, {
            show: false,
          }).init();
          marker.setId(TFMapUitl.getId('sbd', i.id));
          marker.setClassify(`sbdmarker,sbd${i.online}marker,sbd${i.deviceKind}marker*,${TFMapUitl.specialControl.zhjcsb}`);
          marker.action(temp2);
          marker.pierce();
          marker.label(i.deviceName, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 10);
          marker.info = i;
          marker.addListener(map, (e) => {
            var html = TFMapUitl.sbdMarkerDom(e.graphic.overlay.info);
            map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
            map.popup.setOffset(-235, 120);
            TFMapUitl.active(e.graphic.overlay.id);
            TFMapUitl.trends(e.graphic.overlay.points, null, true);
          });
          map.addOverlay(marker);
        }
      });
    },

    waterMarker(list) {
      list.map((i) => {
        if (i.deviceLon && i.deviceLat) {
          // i.sensorInnerCode = this.findSensorInnerCode(i.deviceCode);
          let temp = null;
          let temp2 = null;
          if (i.online == 0) {
            temp = `./static/img/offLine/${i.deviceKind}.png`;
            temp2 = `./static/img/offLine2/${i.deviceKind}.png`;
          } else if (i.online == 1) {
            temp = `./static/img/onLine/${i.deviceKind}.png`;
            temp2 = `./static/img/onLine2/${i.deviceKind}.png`;
          }
          var marker = new TFMap.Marker([i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0], temp).init();
          marker.setId(TFMapUitl.getId('sbd', i.id));
          marker.setClassify(`sbdmarker,sbd${i.online}marker,sbd${i.deviceKind}marker*,${TFMapUitl.specialControl.zhjcsb}`);
          marker.action(temp2);
          marker.pierce();
          marker.label(i.deviceName, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 10);
          marker.info = i;
          marker.addListener(map, (e) => {
            var html = TFMapUitl.waterMarkerDom(e.graphic.overlay.info);
            map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
            map.popup.setOffset(-235, 120);
            TFMapUitl.active(e.graphic.overlay.id);
            TFMapUitl.trends(e.graphic.overlay.points, null, true);
          });
          map.addOverlay(marker);
        }
      });
    },

    devicesMarkerWord(list) {
      list.map((i) => {
        if (i.deviceLon && i.deviceLat) {
          var color = 'rgba(255,255,255,0)';
          var bg = 'rgba(6,161,239,0)';
          var font = '12pt Source Han Sans CN';
          var word = new TFMap.Word([i.deviceLon, i.deviceLat], i.deviceName, color, bg, font, 0, -50)
            .init()
            .setClassify('devicesWord*')
            .updateHeight()
            .setAttr('label', 'heightReference', Cesium.HeightReference.CLAMP_TO_GROUND);
          // .setAttr('label', 'distanceDisplayCondition', new Cesium.DistanceDisplayCondition(0, 10000));
          map.addOverlay(word);
        }
      });
    },

    hideAll() {
      if (map.popup) map.popup.remove();
      this.markerAddType = true;
      this.markerAddWordType = true;
      this.markerAddSBType = true;
      map.showOverlay('dzdmarker*', false);
      map.showOverlay('gcdmarker*', false);
      map.showOverlay('dzdRegion*', false);
      map.showOverlay('sbdmarker*', false);
      map.showOverlay('geojson_line_dxh', false);
      eventBus.emit('TailBaseLine', false);
      for (var i in dzgcMarkerIdList) {
        var marker = dzgcMarkerIdList[i];
        if (i && marker && marker.entity) {
          marker.entity.label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,0)'));
          marker.entity.label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0)'));
        }
      }
      map.setOverlay('devicesWord*', 'label', {
        fillColor: 'rgba(255,255,255,0)',
        backgroundColor: 'rgba(6,161,239,0)',
      });
      map.showOverlay('dzdfw_geojson_fw*', false);
      map.showOverlay('dzdfw_geojson*', false);
    },

    controlMarker(type) {
      if (this.addDoubleScreen) return;
      const level = map.getLevel();
      if (this.level == level) return;
      this.level = level;
      if (level) {
        if (this.markerAddType) {
          this.markerAddType = false;
          if (window.mapConfig.layerList) {
            //根据图层控制来限制是否展示范围
            try {
              if (window.mapConfig.layerList[TFMapUitl.specialControl.zdgzzhd].type) {
                map.showOverlay(TFMapUitl.specialControl.zdgzzhd, true);
              }
              if (window.mapConfig.layerList[TFMapUitl.specialControl.pczhd].type) {
                map.showOverlay(TFMapUitl.specialControl.pczhd, true);
              }
              if (window.mapConfig.layerList[TFMapUitl.specialControl.dzfb].type) {
                map.showOverlay(TFMapUitl.specialControl.dzfb, true);
              }
              // if (window.mapConfig.layerList[TFMapUitl.specialControl.shuiwenzhan].type) {
              //   map.showOverlay(TFMapUitl.specialControl.shuiwenzhan, true);
              // }
              if (window.mapConfig.layerList[TFMapUitl.specialControl.pczhd].type) {
                map.showOverlay(TFMapUitl.specialControl.pczhd, true);
              }
            } catch (error) {
              console.log('error:', error);
            }
          } else {
            map.showOverlay(TFMapUitl.specialControl.zdgzzhd, true);
            map.showOverlay(TFMapUitl.specialControl.pczhd, false);
            map.showOverlay(TFMapUitl.specialControl.dzfb, true);
          }
        }
      } else {
        this.markerAddType = true;
        map.showOverlay(TFMapUitl.specialControl.zdgzzhd, false);
        map.showOverlay(TFMapUitl.specialControl.pczhd, false);
        map.showOverlay('gcdmarker*', false);
      }
      //控制旋转的圆
      // if (level > 10) {
      //   map.showOverlay('Ellipse*', false);
      // } else {
      //   map.showOverlay('Ellipse*', true);
      // }

      // if (this.markerAddWordType && monitorDevicesList && level > 16) {
      //   this.markerAddWordType = false;
      //   // this.devicesMarkerWord(monitorDevicesList);
      //   // map.showOverlay('devicesWord*', true);
      //   map.setOverlay('devicesWord*', 'label', {
      //     fillColor: 'rgba(255,255,255,1)',
      //     backgroundColor: 'rgba(6,161,239,0)',
      //   });
      // } else if (level < 16 || level == 16) {
      //   this.markerAddWordType = true;
      //   // map.removeOverlay('devicesWord*');
      //   // map.showOverlay('devicesWord*', false);
      //   map.setOverlay('devicesWord*', 'label', {
      //     fillColor: 'rgba(255,255,255,0)',
      //     backgroundColor: 'rgba(6,161,239,0)',
      //   });
      // }

      // if (level > 11) {
      // if (i.graphic && i.graphic.id && i.graphic.id.id.indexOf('devices') > -1) {
      //     i.graphic.id.label.fillColor.setValue(
      //       Cesium.Color.fromCssColorString('rgba(255,255,255,1)')
      //     );
      //   }

      //控制河流和河流尾迹线
      if (type && level > 9) {
        map.showOverlay('geojson_line_dxh', false);
        eventBus.emit('TailBaseLine', false);
      } else if (type) {
        map.showOverlay('geojson_line_dxh', true);
        eventBus.emit('TailBaseLine', true);
      }

      // //地灾工程文字控制
      // if (level > 13) {
      //   for (var i in dzgcMarkerIdList) {
      //     var marker = dzgcMarkerIdList[i];
      //     if (i && marker && marker.entity) {
      //       marker.entity.label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,1)'));
      //       marker.entity.label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0.6)'));
      //     }
      //   }
      // } else {
      //   for (var i in dzgcMarkerIdList) {
      //     var marker = dzgcMarkerIdList[i];
      //     if (i && marker && marker.entity) {
      //       marker.entity.label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,0)'));
      //       marker.entity.label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0)'));
      //     }
      //   }
      // }
      const tempFun3 = () => {
        if (level > 13) {
          if (this.markerAddSBType && monitorDevicesList) {
            this.markerAddSBType = false;
            // this.devicesMarker(monitorDevicesList);
            map.showOverlay('sbdmarker*', true);
          }
        } else if (level < 15) {
          this.markerAddSBType = true;
          map.showOverlay('sbdmarker*', false);
        }
      };
      const tempFun2 = () => {
        //地灾工程文字控制
        if (level > 10) {
          for (var i in dzgcMarkerIdList) {
            var marker = dzgcMarkerIdList[i];
            if (i && marker && marker.entity) {
              marker.entity.label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,1)'));
              marker.entity.label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0.6)'));
            }
          }
        } else {
          for (var i in dzgcMarkerIdList) {
            var marker = dzgcMarkerIdList[i];
            if (i && marker && marker.entity) {
              marker.entity.label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,0)'));
              marker.entity.label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0)'));
            }
          }
        }
      };
      tempFun2();
      const tempFun = () => {
        //变形体文字控制
        if (level > 14) {
          map.showOverlay('dzdfw_geojson_fw*', true);
          map.showOverlay('dzdfw_geojson*', true);
        } else {
          map.showOverlay('dzdfw_geojson_fw*', false);
          map.showOverlay('dzdfw_geojson*', false);
        }
      };

      // if (window.mapConfig.layerList) {
      //   //根据图层控制来限制是否展示范围
      //   if (window.mapConfig.layerList[TFMapUitl.specialControl.zhfwsyt].type) {
      //     tempFun();
      //   }
      //   if (window.mapConfig.layerList[TFMapUitl.specialControl.dzfb].type) {
      //     tempFun2();
      //   }
      //   if (window.mapConfig.layerList[TFMapUitl.specialControl.zhjcsb].type) {
      //     tempFun3();
      //   }
      // } else {
      //   tempFun2();
      //   tempFun();
      //   tempFun3;
      // }

      // if (this.layerAddType && level > 12) {
      //   this.layerAddType = false;
      //   map.showLayer2D('wrjyx', true);
      //   map.showLayer2D('tdtjb', false);
      // } else if (!this.layerAddType && level < 12) {
      //   this.layerAddType = true;
      //   map.showLayer2D('wrjyx', false);
      //   map.showLayer2D('tdtjb', true);
      // }
    },

    setLingth() {
      // 获取 Scene 实例
      const scene = map.viewer.scene;
      // 开启深度测试和光照漫反射
      scene.globe.depthTestAgainstTerrain = true;
      scene.globe.enableLighting = true;
      // 配置光照效果
      // scene.lightingModel = Cesium.LightingModel.PBR;
      // scene.light.direction = new Cesium.Cartesian3.fromArray([
      //   -1.0, -1.0, -1.0,
      // ]);
      scene.light.color = new Cesium.Color.fromBytes(255, 255, 255, 255);
      scene.light.intensity = 2.0;
    },

    addHL() {
      const geo = new TFMap.GeoPolyline([dxh], 5, 'rgba(11,161,236,1)');
      geo.setClassify('geojson_line_dxh');
      map.addOverlay(geo);
    },

    dzdxInfoMarker(list) {
      if (!list) return;
      list.map((i, index) => {
        //地灾点地图加载
        if (i.x && i.y) {
          let url = '';
          let url2 = '';
          let otherClass = '';
          let id = TFMapUitl.getId('dzd', i.id);
          if (i.gztyp == '重点关注') {
            url = `./static/img/dzd/${i.dzlx}_zd.png`;
            url2 = `./static/img/dzd2/${i.dzlx}.png`;
            otherClass = TFMapUitl.specialControl.zdgzzhd;
          } else {
            url = `./static/img/dzd/${i.dzlx}.png`;
            url2 = `./static/img/dzd2/${i.dzlx}.png`;
            otherClass = TFMapUitl.specialControl.pczhd;
          }
          var marker = new TFMap.Marker({ x: i.x, y: i.y, z: map.terrain ? i.z : 0 }, url || dzdSvg, {
            show: otherClass == TFMapUitl.specialControl.pczhd ? false : true,
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            // height: 0,
            // heightDisplayCondition: new Cesium.HeightDisplayCondition(0, 1000),
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), //设置可见距离 500-10000米可见
          })
            .init()
            .action(url2)
            .pierce();
          marker.setId(id);
          let tempClass = id + getStrUnicode(i.dzlxmc) + '*' + ',' + otherClass;
          marker.setClassify(tempClass);
          dzgcMarkerIdList[marker.id] = marker;
          marker.label(i.dzmc, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -60, 'rgba(6,161,239,0)');
          marker.info = i;
          marker.addListener(map, (e) => {
            var html = TFMapUitl.dzdMarkerDom(e.graphic.overlay.info);
            map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
            map.popup.setOffset(-235, 120);
            TFMapUitl.active(e.graphic.overlay.id);
            TFMapUitl.trends(e.graphic.overlay.points, null, true);
          });
          map.addOverlay(marker);
        }
      });
      // map.showOverlay(TFMapUitl.specialControl.pczhd, false);
      // var arr = map.findOverlay('dzdmarker*');
      // console.log('arr:', arr);
      // var a = map.billboardCluster(arr);

      // var maxDistance = 5000000000;
      // var image = '/path/to/aggregated-image.png';
      // var aggregatedBillboards = map.createAggregatedBillboards(arr, maxDistance, image);
      // console.log('聚合算法:', aggregatedBillboards);

      // map.markerJH(arr, {
      //   clusterRadius: 50, // 聚合半径F
      //   pixelRange: 10, // 屏幕像素误差
      //   aggregateImage: './images/cluster.png', // 聚合后的图标
      // });
      // map.markerJH2(arr);
      // map.markerGather(arr);
      // map.makerJH4(arr);
    },

    gcInfoMarker(list) {
      list.map((i) => {
        if (i.x && i.y) {
          var marker = new TFMap.Marker({ x: i.x, y: i.y }, './static/img/gc1.png', {
            scale: 0.8,
          })
            .action('./static/img/gc2.png')
            .init()
            .pierce();
          marker.setId('gcd&' + i.id);
          const tempClass = TFMapUitl.getId('gcd', i.id) + '*' + ',' + TFMapUitl.specialControl.dzfb;
          marker.setClassify(tempClass);
          dzgcMarkerIdList[marker.id] = marker;
          marker.label(i.gcmc, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -60, 'rgba(6,161,239,0)');
          marker.info = i;
          marker.addListener(map, (e) => {
            var html = TFMapUitl.gcdMarkerDom(e.graphic.overlay.info);
            map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
            map.popup.setOffset(-235, 120);
            TFMapUitl.active(e.graphic.overlay.id);
            TFMapUitl.trends(e.graphic.overlay.points, null, true);
          });
          map.addOverlay(marker);
        }
      });
    },
    getGCSite() {
      gcSite().then((res) => {
        if (res.code == 200 && res.data?.length > 0) {
          let gcList = res.data;
          gcList.forEach((i) => {
            i.typeName = '工程点';
            if (i.lat && i.lng) {
              var marker = new TFMap.Marker({ x: i.lng, y: i.lat }, './static/img/siteimg/gc.png', {
                scale: 0.8,
              })
                // .action('./static/img/gc2.png')
                .init()
                .pierce();
              marker.setId('gcd&' + i.stcd);
              const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.gc;
              marker.setClassify(tempClass);
              dzgcMarkerIdList[marker.id] = marker;
              marker.label(i.name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
              marker.info = i;
              // console.log(marker.info, 71);
              marker.addListener(map, (e) => {
                //   if(window.breathMarker){
                //   window.breathMarker.breathe()
                //   window.breathMarker=null
                // }
                // if (e && e.graphic && e.graphic.overlay) {
                //     e.graphic.overlay.breathe()
                //     window.breathMarker=e.graphic.overlay
                //     TFMapUitl.clearPointLocation_list(map)
                // }
                // var html = TFMapUitl.gcdMarkerDom(e.graphic.overlay.info);
                // map.openInfoWindowHtml(html, e, () => TFMapUitl.clearPointLocation_list(map));
                // map.popup.setOffset(-270, -30);
                // TFMapUitl.active(e.graphic.overlay.id);
                // TFMapUitl.trends(e.graphic.overlay.points, null, true);
              });
              map.addOverlay(marker);
            }
          });
        }
      });
    },
    // 加载测站点
    setSTMarker(list) {
      // console.log(list,88)
      // 4.测站类型:1(水文站),2(水位站),4(雨量站),5(一般气象站),6(碳水通量站),7(标准气象站)
      list.forEach((i) => {
        // console.log(i);
        if (i.st_type == 1) {
          i.typeName = '水文站';
          if (i.lat && i.lng) {
            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, './static/img/siteimg/shuiwen.png', {
              scale: 0.8,
              rotation: Cesium.Math.toRadians(-i.angle),
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.shuiwenzhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e => {
              if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }

              var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-191, 70);
              window.clearImpoint()
            });
            map.addOverlay(marker);
          }
        } else if (i.st_type == 2) {
          i.typeName = '水位站';
          if (i.lat && i.lng) {
            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, './static/img/siteimg/shuiwei.png', {
              scale: 0.8,
              rotation: Cesium.Math.toRadians(-i.angle),
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.shuiweizhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e =>{
              if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }

              var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-191, 70);
              window.clearImpoint()
            });
            map.addOverlay(marker);
          }
        } else if (i.st_type == 4) {
          i.typeName = '雨量站';
          if (i.lat && i.lng) {
            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');
            let textWidth = 14;
            canvas.width = 20;
            canvas.height = 20;
            let x = 0.8;
            let y = 0.8;
            let w = canvas.width;
            let h = canvas.height;
            let r = 5;
            // 缩放
            context.scale(0.8, 0.8);
            // context.fillStyle = 'rgba(0,0,0,0.5)'
            context.fillStyle = '#e7e7e7';
            // context.fillStyle = 'rgba(231, 231, 231,0.9)'
            // 阴影
            context.shadowOffsetX = 5;
            context.shadowOffsetY = 5;
            context.shadowBlur = 2;
            context.shadowColor = 'rgba(0,0,0,0.5)';
            // 绘制圆角矩形
            context.beginPath();
            context.arc(w, h, r, 0, 2 * Math.PI);
            context.closePath();
            context.fill();

            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, canvas, {
              scale: 1.2,
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.yuliangzhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e => {
              if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }

              var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-182, 68);
              window.clearImpoint()
            });
            map.addOverlay(marker);
          }
        } else if (i.st_type == 5) {
          i.typeName = '一般气象站';
          if (i.lat && i.lng) {
            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, './static/img/siteimg/qixiang.png', {
              scale: 0.8,
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.yibanqixiangzhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, -10, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e => TFMapUitl.setSTMarkerPopup(e));
            map.addOverlay(marker);
          }
        } else if (i.st_type == 6) {
          i.typeName = '碳水通量站';
          if (i.lat && i.lng) {
            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, './static/img/siteimg/tanshui.png', {
              scale: 1,
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.tanshuitongliangzhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 20, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e => {
              if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0.3)
                  window.breathMarker=e.graphic.overlay
              }

              var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-185, 70);
              window.clearImpoint()
            });
            map.addOverlay(marker);
          }
        } else if (i.st_type == 7) {
          i.typeName = '标准气象站';
          if (i.lat && i.lng) {
            var marker = new TFMap.Marker({ x: i.lng, y: i.lat, z: i.high }, './static/img/siteimg/qixiang2.png', {
              scale: 0.9,
            })
              // .action('./static/img/gc2.png')
              .init()
              .pierce();
            marker.setId('gcd&' + i.stcd);
            const tempClass = TFMapUitl.getId('gcd', i.stcd) + '*' + ',' + TFMapUitl.specialControl.biaozhunqixiangzhan;
            marker.setClassify(tempClass);
            dzgcMarkerIdList[marker.id] = marker;
            marker.label(i.st_name, '12pt Source Han Sans CN', 'rgba(255,255,255,0)', 0, 14, 'rgba(6,161,239,0)');
            marker.info = i;
            marker.addListener(map, e => {
              if(window.breathMarker){
                window.breathMarker.breathe()
                window.breathMarker=null
              }
              if (e && e.graphic && e.graphic.overlay) {
                  e.graphic.overlay.breathe(0,0)
                  window.breathMarker=e.graphic.overlay
              }

              var i = e.graphic.overlay.info
              map.openInfoWindowHtml(TFMapUitl.gcdMarkerDom(i), { position: [i.lng, i.lat, i.high] }, () => TFMapUitl.clearPointLocation_list(map));
              map.popup.setOffset(-185, 58);
              window.clearImpoint()
            });
            map.addOverlay(marker);
          }
        }
      });
    },

    gnssLine(monitorDevicesStore) {
      monitorDevicesStore
        .LigongDeviceSensor({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('gnss:', res);
          if (!res) return;
          res.result.records.map((i) => {
            if (i.value1 && i.value2) {
              const gnssOffsetScale = 1;
              const x = i.value2 * gnssOffsetScale;
              const y = i.value1 * gnssOffsetScale;
              var s = Cesium.Cartesian3.fromDegrees(Number(i.sensorLon), Number(i.sensorLat), Number(0));
              const e = Cesium.Cartesian3.add(s, new Cesium.Cartesian3(x, y, 0), new Cesium.Cartesian3());
              map.addOverlay(
                new TFMap.Line([s, e], 'rgba(255,255,0,1)').init().label(e, Cesium.Cartesian3.distance(s, e)).setClassify('arrow_line*').setArrow()
              );
            }
          });
        });
    },

    getDzdxInfoTxData(store) {
      store.GetDzdxInfoTxData().then((res) => {
        if (!res) return;
        res.map((i) => {
          if (i.txjson) {
            const l = new TFMap.GeoPolygon(JSON.parse(i.txjson), 0, 'rgba(255,255,255,0)', 'rgba(255,255,0,1)', 0.01)
              .setId('dzdfw_geojson_fw')
              .setClassify('dzdfw_geojson*')
              .label({ name: 'name', show: false, color: 'rgba(255,255,0,1)' }, 'line', 'line_segment');
            map.addOverlay(l);
          }
        });
      });
    },

    mapHover() {
      let label = null;
      map.event.mousemove((i) => {
        const level = map.getLevel();
        if (level > 10) return;
        if (label) {
          label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,0)'));
          label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0)'));
        }
        if (
          i.graphic &&
          i.graphic.id &&
          (i.graphic.id.id.indexOf('dzdmarker') > -1 ||
            i.graphic.id.id.indexOf('gcd') > -1 ||
            i.graphic.id.id.indexOf('rain') > -1 ||
            i.graphic.id.id.indexOf('wd') > -1 ||
            i.graphic.id.id.indexOf('fs') > -1)
        ) {
          label = i.graphic.id.label;
          label.fillColor.setValue(Cesium.Color.fromCssColorString('rgba(255,255,255,1)'));
          label.backgroundColor.setValue(Cesium.Color.fromCssColorString('rgba(6,161,239,0.6)'));
          return;
        }
      });
    },
    getUrl(x, y) {
      return new Promise((resolve, reject) => {
        var url = window.mapConfig.updateHeight;
        var data = {
          geometries: [{ type: 'POINT3D', x: x, y: y, z: 0 }],
          sceneName: window.mapConfig.sceneName,
          layerName: window.mapConfig.layerName,
          interpolationDistance: 0,
        };
        fetch(url, {
          method: 'post',
          body: JSON.stringify(data),
          headers: {
            'Content-Type': 'application/json',
          },
        })
          .then(function (e) {
            return e.json();
          })
          .then((n) => {
            resolve(n);
          });
      });
    },
    getPoint(n) {
      return new Promise((resolve, reject) => {
        fetch(n.newResourceLocation + '.json')
          .then((e) => {
            return e.json();
          })
          .then((n) => {
            resolve(n);
          });
      });
    },

    initWinWay() {
      const geologicalStore = useGeologicalStore();
      const monitorDevicesStore = useMonitorDevicesStore();
      const _this = this;
      function getUrl(x, y) {
        return new Promise((resolve, reject) => {
          var url = window.mapConfig.updateHeight;
          var data = {
            geometries: [{ type: 'POINT3D', x: x, y: y, z: 0 }],
            sceneName: window.mapConfig.sceneName,
            layerName: window.mapConfig.layerName,
            interpolationDistance: 0,
          };
          fetch(url, {
            method: 'post',
            body: JSON.stringify(data),
            headers: {
              'Content-Type': 'application/json',
            },
          })
            .then(function (e) {
              return e.json();
            })
            .then((n) => {
              resolve(n);
            });
        });
      }

      function getPoint(n) {
        return new Promise((resolve, reject) => {
          fetch(n.newResourceLocation + '.json')
            .then((e) => {
              return e.json();
            })
            .then((n) => {
              resolve(n);
            });
        });
      }
      // 获取重要测站点
      window.getImportSites=function (){
        window.impointInterval&&clearInterval(window.impointInterval)
        window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
        if(window.impointFlag&&!window.impointNotShow){
          getImportPoint().then(res=>{
                  if(res.code==200&&res.data){
                    if(window.impoint&&window.impoint.length){
                        window.impoint.forEach(j=>{
                          map.removeOverlay(j);
                        })
                        window.impoint=[]
                      }
                      window.impoint=[]
                      // 记录指标数组长度
                    window.impointDataLength= res.data[0].data_real.length
                    window.impointDataLengthNow=0
                    res.data.forEach(i=>{
                      _this.stDetailArrStore.forEach(j=>{
                        if(i.stcd==j.stcd){
                          let data=j
                          data.dlat=i.dlat
                          data.dlon=i.dlon
                          data.data_real=i.data_real
                          data.st_name=i.st_name
                          console.log(i,j,3663)
                        let markerWindow=  new TFMap.HTMLElementOverLay(
                          { x:Number(data.dlon) , y: Number(data.dlat),z:Number(data.high)  },
                          TFMapUitl.impotPointDom(data)
                        ).init().setOff(-52, -0)
                        markerWindow.setId('imp&' + data.stcd);
                        markerWindow.setClassify('impoint_marker*')
                        markerWindow.info = data;
                        window.impoint.push(markerWindow)
                        map.addOverlay(markerWindow)
                        }
                      })
                    })
                    // 单独记录每一个的指标数量和当前滚动位置
                    window.indexNumInfo=[]
                    window.impoint&&window.impoint.forEach(i=>{
                              // console.log(i,'8383')
                              window.indexNumInfo.push({
                                impointDataLengthNow:0,
                                impointDataLength:i.info.sensor.length?i.info.sensor.length:0
                              })
                            })
                        // 指标滚动
                        window.impointFlowInterval=
                          setInterval(()=>{
                            window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
                                if(i.impointDataLengthNow<i.impointDataLength-1){
                                i.impointDataLengthNow++
                              }else{
                                i.impointDataLengthNow=0
                              }
                              jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
                            })
                            // if(window.impointDataLength){
                            //   if(window.impointDataLengthNow<window.impointDataLength-1){
                            //     window.impointDataLengthNow++
                            //   }else{
                            //     window.impointDataLengthNow=0
                            //   }
                            //     jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
                            //   }                              
                            },5000)  
                  }
                })

          window.impointInterval=
            setInterval(
                ()=>{
                  window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
                  if(window.impoint&&window.impoint.length){
                        window.impoint.forEach(j=>{
                          map.removeOverlay(j);
                        })
                        window.impoint=[]
                      }
                  if(window.impointFlag){
                    getImportPoint().then(res=>{
                  if(res.code==200&&res.data){
                    if(window.impoint&&window.impoint.length){
                        window.impoint.forEach(j=>{
                          map.removeOverlay(j);
                        })
                        window.impoint=[]
                      }
                      window.impoint=[]
                      // 记录指标数组长度
                    window.impointDataLength= res.data[0].data_real.length
                    window.impointDataLengthNow=0
                    res.data.forEach(i=>{
                      _this.stDetailArrStore.forEach(j=>{
                        if(i.stcd==j.stcd){
                          let data=j
                          data.dlat=i.dlat
                          data.dlon=i.dlon
                          data.data_real=i.data_real
                          data.st_name=i.st_name
                          // console.log(i,j,3663)
                        let markerWindow=  new TFMap.HTMLElementOverLay(
                          { x:Number(data.dlon) , y: Number(data.dlat),z:Number(data.high)  },
                          TFMapUitl.impotPointDom(data)
                        ).init().setOff(-52, -0)
                        markerWindow.setId('imp&' + data.stcd);
                        markerWindow.setClassify('impoint_marker*')
                        markerWindow.info = data;
                        window.impoint.push(markerWindow)
                        map.addOverlay(markerWindow)
                        }
                      })
                    })
                    // 单独记录每一个的指标数量和当前滚动位置
                    window.indexNumInfo=[]
                    window.impoint&&window.impoint.forEach(i=>{
                              // console.log(i,'8383')
                              window.indexNumInfo.push({
                                impointDataLengthNow:0,
                                impointDataLength:i.info.sensor.length?i.info.sensor.length:0
                              })
                            })
                        // 指标滚动
                        window.impointFlowInterval=
                          setInterval(()=>{
                            window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
                                if(i.impointDataLengthNow<i.impointDataLength-1){
                                i.impointDataLengthNow++
                              }else{
                                i.impointDataLengthNow=0
                              }
                              jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
                            })
                            // if(window.impointDataLength){
                            //   if(window.impointDataLengthNow<window.impointDataLength-1){
                            //     window.impointDataLengthNow++
                            //   }else{
                            //     window.impointDataLengthNow=0
                            //   }
                            //     jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
                            //   }                              
                            },5000)  
                  }
                })
             }
              },5*60*1000
            )  
        }else{
          if(window.impoint&&window.impoint.length){
                        window.impoint.forEach(j=>{
                          map.removeOverlay(j);
                        })
                        window.impoint=[]
                      }
        }
      }
      window.clearImpoint=function(){
        window.impointInterval&&clearInterval(window.impointInterval)
        window.impointFlowInterval&&clearInterval(window.impointFlowInterval)
        window.impointFlag=false
        if(window.impoint&&window.impoint.length){
                window.impoint.forEach(j=>{
                  map.removeOverlay(j);
                })
                window.impoint=[]
              }
        
      }
      // 
      // 获取测站并更新测站高程
      window.updateStHeightInfo = async function () {
        const key = 'updatable';
        createMessage.loading({ content: '更新站点高程中,请稍后', key, duration: 0 });
        // console.log(765)
        let res = await getStDetailInfo();
        if (res.code == 200) {
          const Obj = JSON.parse(JSON.stringify(res.data));
          _this.stDetailArrStore = [];
          let objArr = [];
          for (const i in Obj) {
            objArr = [...objArr, ...Obj[i]];
          }
          for (var i = 0; i < objArr.length; i++) {
            let data = await map.iserver.getHeight(objArr[i].lng, objArr[i].lat);
            if (data && data.geometries && data.geometries.length) {
              objArr[i].high = data.geometries[0].z;
              _this.stDetailArrStore.push(objArr[i]);
              // 修改高程
              let re = await changeHeight({ stcd: objArr[i].stcd, high: objArr[i].high });
              console.log('更新高度:', re);
            }
          }
          // 重新加载站点
          createMessage.success({ content: '更新站点高程成功,重新加载测站点', key, duration: 2 });
          // 移除测站点
          map.removeOverlay('shuiwenzhan*', false);
          map.removeOverlay('shuiweizhan*', false);
          map.removeOverlay('yuliangzhan*', false);
          map.removeOverlay('yibanqixiangzhan*', false);
          map.removeOverlay('biaozhunqixiangzhan*', false);
          map.removeOverlay('tanshuitongliangzhan*', false);
          // 加载测站
          _this.setSTMarker(_this.stDetailArrStore);
        } else {
          createMessage.error({ content: '获取站点失败', key, duration: 2 });
        }
      };
      window.updateDZ = async function () {
        var list = map.findOverlay('dzdmarker*');
        for (var i = 0; i < list.length; i++) {
          var info = list[i].info;
          if (!info.z) {
            var data = await getPoint(await getUrl(info.x, info.y));
            if (data && data.geometries && data.geometries.length) {
              var f = new FormData();
              f.append('id', info.id);
              f.append('z', data.geometries[0].position.z);
              var re = await geologicalStore.UpdateDzdxInfo(f);
              console.log('更新高度:', re);
            }
          }
        }
      };

      window.updateGC = async function () {
        var list = map.findOverlay('gcdmarker*');
        for (var i = 0; i < list.length; i++) {
          var info = list[i].info;
          if (!info.z) {
            var data = await getPoint(await getUrl(info.x, info.y));
            if (data && data.geometries && data.geometries.length) {
              var f = new FormData();
              f.append('id', info.id);
              f.append('z', data.geometries[0].position.z);
              var re = await geologicalStore.UpdateGcdxInfo(f);
              console.log('工程更新高度:', re);
            }
          }
        }
      };

      window.updateSB = async function () {
        var list = map.findOverlay('sbdmarker*');
        for (var i = 0; i < list.length; i++) {
          var info = list[i].info;
          if (!info.elevation) {
            var data = await getPoint(await getUrl(info.deviceLon, info.deviceLat));
            if (data && data.geometries && data.geometries.length) {
              var re = await monitorDevicesStore.updateElevation({
                id: info.id,
                elevation: data.geometries[0].position.z,
              });
              console.log('更新高度:', re);
            }
          }
        }
      };

      window.saveView = function (id, type) {
        var user = JSON.parse(sessionStorage.getItem('user'));
        geologicalStore.Visualangle({
          type: type,
          typeId: id + '',
          createdBy: user.userId,
          visualAngle: map.getView(),
        });
      };

      window.aroundPoint = function (x, y, z) {
        map.rotateAroundPoint([x, y, z], null, 5);
      };

      window.siteDetail = (i) => {
        _this.detailInfo = i;
        _this.title = i.st_name + i.typeName + '（' + i.stcd + '）';
        _this.dialogvisable = true;
      };

      // var video = new TFMap.VideoFuse(map, null);
      // window.playVideo = function (p) {
      //   window.openModelVideo(p, true);
      //   geologicalStore
      //     .getVideoprojection({
      //       deviceId: p.id,
      //     })
      //     .then((r) => {
      //       if (!r) return;
      //       setTimeout(() => {
      //         var dom = jquery('.fmp4-player canvas');
      //         if (dom && dom.length) {
      //           window.video2 = video.polygonWay(r, dom[0]);
      //         } else {
      //           // window.video2 = video.polygonWay(r);
      //         }
      //       }, 1000);
      //     });
      // };

      window.editVideo = (r) => {
        map.draw('polygon', (e) => {
          geologicalStore
            .Videoprojection({
              deviceId: r.id,
              projectionPoint: JSON.stringify(e.getPosition()),
            })
            .then(() => {
              if (map.drawObj) map.drawObj.remove();
            });
        });
      };
    },
  },
});
</script>
<style lang="less">
::v-deep .cesium-roller-blind {
  z-index: 0;
}

#leftMapMfasking {
  position: absolute;
  left: 0px;
  // width: 960px;
  width: 500px;
  background-image: url('../../assets/images/zuo.png');
  background-size: 100% 100%;
}

#rightMapMfasking {
  background-size: 100% 100%;
  position: absolute;
  right: 0px;
  // width: 960px;
  width: 500px;
  background-image: url('../../assets/images/you.png');
}

#mapDiv2 {
  background-image: url('../../assets/images/map.jpg');
}

#mapMfasking {
  background-image: url('../../assets/images/bg2.png');
}

#mapMfasking1 {
  background-image: url('../../assets/images/zuo.png');
}

#mapMfasking2 {
  background-image: url('../../assets/images/you.png');
}

.mapMfasking {
  height: 100%;
  width: 1920px;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.mfasking1 {
  box-shadow: inset 420px 100px 100px rgba(0, 0, 0, 0.5);
}

.mfasking2 {
  opacity: 1;
  box-shadow: inset -420px -100px 100px rgba(0, 0, 0, 0.5);
}

.mfasking22 {
  opacity: 1;
  box-shadow: inset -420px -100px 100px rgba(0, 0, 0, 0.5);
  background: url('../../assets/images/bj.png') no-repeat center center;
  background-size: 100% 100%;
}

.mfasking3 {
  background: rgba(0, 0, 0, 0);
}

#mapDiv {
  height: 100vh;
  position: relative;
  float: left;
}

.jwd {
  position: absolute;
  right: 450px;
  bottom: 18px;
  z-index: 10;
  color: #fff;
  font-size: 12px;
}
</style>