Newer
Older
HuangJiPC / src / pages / views / WatershedOneMap / modalPart / legend.vue
@zengcong zengcong on 5 Jul 89 KB update
<template>
  <!-- 公共图例 -->
  <div class="lengendPage">
    <n-select
      class="selectedPoi"
      v-model:value="selectedPoi"
      :options="selectedPois"
      filterable
      clearable
      placeholder="站点搜索"
      @update:value="getPOIinfo"
    />
    <!-- 展开收起 -->
    <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
    <!-- 图例框 -->
    <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
      <!-- 流域选择 -->
      <div>
        <div class="titleB">流域选择</div>
        <div class="part" v-for="item2 in legendLy" @click="changeLiuyu(item2)" :key="item2.layername">
          <img :src="getLayerImg(item2.url)" class="img" />
          <p class="title">{{ item2.name }}</p>
          <n-icon size="22" :class="item2.isCheck ? 'active' : ''">
            <Checkmark />
          </n-icon>
        </div>
      </div>
      <!-- 非流域选择 -->
      <div v-for="item in legendList" :key="item.layername">
        <div class="titleB">{{ item.title }}</div>
        <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
          <img :src="getLayerImg(item2.url)" class="img" />
          <p class="title">{{ item2.name }}</p>
          <n-icon size="22" :class="item2.isCheck ? 'active' : ''">
            <Checkmark />
          </n-icon>
        </div>
      </div>
    </div>
    <!-- 水质详情弹窗页面 -->
    <n-modal
      v-model:show="showModalSzjcz"
      :show-icon="false"
      :mask-closable="false"
      preset="card"
      title="水质监测站详情"
      style="width: 950px"
    >
      <ShuizhiModal v-if="showModalSzjcz" :stationCode="stationCode" />
    </n-modal>
    <!-- 水位详情弹窗页面 -->
    <n-modal v-model:show="showModalSwjcz" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
      <ShuiweiModal v-show="showModalSwjcz" :YWstationCode="YWstationCode" />
    </n-modal>

    <!-- 内涝点详情弹窗页面 -->
    <n-modal v-model:show="showModalNld" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
      <NldModal :valueModalNld="valueModalNld" />
    </n-modal>

    <!-- 湖泊详情弹窗页面 -->
    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 580px">
      <HuPoModal :valueModalhp="valueModalhp" />
    </n-modal>
  </div>
</template>

<script>
import NewFiberMapUtils from '@/utils/gis/NewfiberMap.js';
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import { getLayerImg } from '@/utils/util';
import bus from '@/utils/util';
import { legendData } from './legendData.js';
import { Checkmark } from '@vicons/ionicons5';
import {
  lyInfoStationListall,
  sheHuiStationListall,
  sheHuiLineListall,
  StationPointInfo,
  getAllSiteEquipmentProjectPoint,
  jsdListHjly,
  lakelistdata,
  canllistdata,
  pumplistdata,
} from '@/services';
import Popup from './Popup.vue';
import ShuizhiModal from './modal/shuizhiModal.vue'; //水质监测弹窗
import ShuiweiModal from './modal/shuiweiModal.vue'; //水位监测弹窗
import HuPoModal from './modal/HuPoModal.vue'; //湖泊监测弹窗
import NldModal from './modal/nldModal/index.vue';

import Area from '@/assets/json/政区cesium.json';
import AreaLine from '@/assets/json/政区Linecesium.json';
import Areaname from '@/assets/json/政区name.json';
import LiuyuArea from '@/assets/json/LiuyuAreaCesium.json'; //合改
import LiuyuAreaLine from '@/assets/json/LiuyuAreaLineCesium.json';
import Liuyuname from '@/assets/json/Liuyuname.json';
import rainAreaone from '@/assets/json/雨水一级Cesium.json';
import rainAreaoneLine from '@/assets/json/雨水一级lineCesium.json';
import rainAreanameone from '@/assets/json/雨水一级name.json';
import rainAreatwo from '@/assets/json/雨水二级Cesium.json';
import rainAreatwoLine from '@/assets/json/雨水二级lineCesium.json';
import rainAreanametwo from '@/assets/json/雨水二级name.json';
import wsAreaone from '@/assets/json/污水一级Cesium.json';
import wsAreaoneLine from '@/assets/json/污水一级lineCesium.json';
import wsAreanameone from '@/assets/json/污水一级name.json';
import wsAreatwo from '@/assets/json/污水二级Cesium.json';
import wsAreatwoLine from '@/assets/json/污水二级lineCesium.json';
import wsAreanametwo from '@/assets/json/污水二级name.json';
import anquJSON from '@/assets/json/anhan_cesium.json';
import ahNameJSON from '@/assets/json/暗涵name.json';
import mingqupolygon from '@/assets/json/明渠polygon.json';
import mqNameJSON from '@/assets/json/明渠name.json';
import xhjson from '@/assets/json/xianghan_cesium.json';
import xhNameJSON from '@/assets/json/箱涵name.json';
import bspoint from '@/assets/json/补水点.json';
import shengtai from '@/assets/json/shengtai_cesium.json';

import fensanIcon from '@/assets/newImgs/layerIcon/fsclss_gis.png';
import pailaoIcon from '@/assets/newImgs/layerIcon/plbz_gis.png';
import wscIcon from '@/assets/newImgs/layerIcon/wsclc_gis.png';
import wushuiIcon from '@/assets/newImgs/layerIcon/wsbz_gis.png';
import zhamenIcon from '@/assets/newImgs/layerIcon/zhamen_gis.png';
import tiaoxuIcon from '@/assets/newImgs/layerIcon/txc_gis.png';
import yeweiIcon from '@/assets/newImgs/layerIcon/waterLevel_gis.png';
import liuliangIcon from '@/assets/newImgs/layerIcon/flow_gis.png';
import shuizhiIcon from '@/assets/newImgs/layerIcon/waterQuality_gis.png';
import CSOIcon from '@/assets/newImgs/layerIcon/qhclss_gis.png';
import bushui from '@/assets/newImgs/layerIcon/补水工程s.png';
import yuliangImg from '@/assets/newImgs/layerIcon/rainStation_gis.png';
import anhan_Line from '@/assets/newImgs/layerIcon/anhan_Line.png';
import xianghan_Line from '@/assets/newImgs/layerIcon/xianghan_Line.png';
import shengtai_Line from '@/assets/newImgs/layerIcon/shengtai_Line.png';
import dynamicWater from '@/assets/newImgs/layerIcon/dynamicWater.png';
import waterLoging from '@/assets/newImgs/layerIcon/waterLoging_icon.png';
import riversging from '@/assets/newImgs/layerIcon/Riversging_icon.png';
import GangquLoging from '@/assets/newImgs/layerIcon/GangquLoging.png_icon.png';
import Stationging from '@/assets/newImgs/layerIcon/Stationging_icon.png';
import WKT from 'terraformer-wkt-parser';

export default {
  name: 'lengendPage',
  components: {
    Checkmark,
    Popup,
    ShuizhiModal,
    ShuiweiModal,
    NldModal,
    HuPoModal,
  },
  setup() {
    const allData = reactive({
      showModalSzjcz: false,
      showModalSwjcz: false,
      stationCode: '',
      YWstationCode: '',
      ifExpand: true,
      qingyu: null,
      bushui: null,
      tuokuan: null,
      qingyuname: null,
      bushuiname: null,
      tuokuaname: null,
      selectedPoi: null,
      selectedPois: [],
      POIinfo: {},
      legendLy: [
        {
          isCheck: false,
          name: '全部流域', //切换视角
          layername: 'allArea',
          url: 'bushuixian.png',
          type: 'view',
        },
        {
          isCheck: false,
          name: '黄孝河流域', //切换视角
          layername: 'huangxiaoArea',
          url: 'bushuixian.png',
          type: 'view',
        },
        {
          isCheck: false,
          name: '机场河流域', //切换视角
          layername: 'jichangArea',
          url: 'bushuixian.png',
          type: 'view',
        },
      ],
      legendList: legendData,
      showModalHP: false,
      showModalNld: false,
      valueModalNld: {},
      valueModalhp: {},
      valueModal: {},
    });
    // 初始化默认选中的图层判断显示
    const getDefaultLayer = () => {
      bus.on('showDefaultLegend', (data) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].isCheck == false) {
            // 选中
            allData.legendList.map((item) => {
              item.children.map((item2) => {
                if (data[i].layername == item2.layername) {
                  item2.isCheck = true;
                  changeLegend(data[i]);
                }
              });
            });
          } else {
            // 取消选中
            allData.legendList.map((item) => {
              item.children.map((item2) => {
                if (data[i].layername == item2.layername) {
                  item2.isCheck = false;
                  changeLegend(data[i]);
                }
              });
            });
          }
          // }
        }
      });
    };
    // 流域选择点击
    const changeLiuyu = (params) => {
      allData.legendLy.map((item) => {
        item.isCheck = false;
      });
      params.isCheck = true;
      if (params.layername == 'allArea') {
        toAll();
      } else if (params.layername == 'huangxiaoArea') {
        toHuangxiao();
      } else if (params.layername == 'jichangArea') {
        toJichang();
      }
    };
    //定位全局
    function toAll() {
      newfiberMap.flyTo({
        lon: 114.264596,
        lat: 30.500028,
        heading: 2.281299097855777,
        zoom: 5358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });
    }
    //定位黄孝河
    function toHuangxiao() {
      newfiberMap.flyTo({
        lon: 114.262596,
        lat: 30.625028,
        heading: 45.281299097855777,
        zoom: 3358.12942752382,
        pitch: -30.2508969308367,
        roll: 0.005453465256790101,
      });
    }
    //定位机场河
    function toJichang() {
      newfiberMap.flyTo({
        lon: 114.295596,
        lat: 30.62028,
        heading: -60.281299097855777,
        zoom: 3358.12942752382,
        pitch: -30.2508969308367,
        roll: 0.005453465256790101,
      });
    }
    //液位、流量
    const getMapJSON = async () => {
      let params = {
        stationType: 'all',
      };
      let res = await lyInfoStationListall(params);
      if (res && res.code == 200) {
        let arry15 = res.data.filter((item) => item.stationType == '流量站');
        let arry14 = res.data.filter((item) => item.stationType == '水位站');
        let arry16 = res.data.filter((item) => item.stationType == '水质站(地表水)');
        let liuliangjson = newfiberMap.getgeojson(arry15);
        newfiberMap.addGeojsonPoint({
          id: 'layer15',
          data: liuliangjson,
          icon: liuliangIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(215, 142, 0,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(liuliangIcon, 'layer15', liuliangjson, 'stName', false); // 加载流量监测站点位
        let yeweijson = newfiberMap.getgeojson(arry14);
        newfiberMap.addGeojsonPoint({
          id: 'layer14',
          data: yeweijson,
          icon: yeweiIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(32, 133, 130,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(yeweiIcon, 'layer14', yeweijson, 'stName', false); // 加载液位监测站点位
        let shuizhijson = newfiberMap.getgeojson(arry16);
        newfiberMap.addGeojsonPoint({
          id: 'layer16',
          data: shuizhijson,
          icon: shuizhiIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(32, 133, 130,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });

        //mapbox.loadPointsLayer(shuizhiIcon, 'layer16', shuizhijson, 'stName', false); // 加载水质监测站点位
      }

      let sataion = await sheHuiStationListall();
      if (sataion && sataion.code == 0) {
        let arry5 = sataion.data.filter((item) => item.stationClass == '污水泵站' && item.projectClass == '已建工程');
        let arry3 = sataion.data.filter((item) => item.stationClass == '闸门' && item.projectClass != '第二阶段新建');
        let arry8 = sataion.data.filter((item) => item.stationClass == '污水处理厂' && item.projectClass == '已建工程');
        let arry9 = sataion.data.filter((item) => item.stationClass == '污水处理厂' && item.projectClass == '第二阶段新建');
        let arry0 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '已建工程');
        let arry10 = sataion.data.filter((item) => item.stationClass == '分散处理设施' && item.projectClass == '第一阶段新建');
        let arry1 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '第二阶段新建');
        let arry4 = sataion.data.filter((item) => item.stationClass == '闸门' && item.projectClass == '第二阶段新建');
        let arry6 = sataion.data.filter((item) => item.stationClass == '污水泵站' && item.projectClass == '第二阶段新建');
        let arry11 = sataion.data.filter((item) => item.stationClass == '调蓄池' && item.projectClass == '第二阶段新建');
        let arry7 = sataion.data.filter((item) => item.stationClass == '调蓄池' && item.projectClass == '第三阶段新建');
        let arry2 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '第三阶段新建');
        let arry12 = sataion.data.filter((item) => item.stationClass == 'CSO强化处理设施' && item.projectClass == '第二阶段新建');
        let arry13 = sataion.data.filter((item) => item.stationClass == 'CSO强化处理设施' && item.projectClass == '第三阶段新建');

        let pailao1 = newfiberMap.getWKTtoGeojson(arry0);
        newfiberMap.addGeojsonPoint({
          id: 'layer0',
          data: pailao1,
          icon: pailaoIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(161, 119, 34,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(pailaoIcon, 'layer0', pailao1, 'name', false); //排涝泵站一
        let wushuibeng1 = newfiberMap.getWKTtoGeojson(arry5);
        newfiberMap.addGeojsonPoint({
          id: 'layer5',
          data: wushuibeng1,
          icon: wushuiIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(175, 50, 50,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(wushuiIcon, 'layer5', wushuibeng1, 'name', false); //污水泵站一
        let fensan = newfiberMap.getWKTtoGeojson(arry10);
        newfiberMap.addGeojsonPoint({
          id: 'layer10',
          data: fensan,
          icon: fensanIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(6, 179, 85,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(fensanIcon, 'layer10', fensan, 'name', false); //分散设施
        let zhamen1 = newfiberMap.getWKTtoGeojson(arry3);
        newfiberMap.addGeojsonPoint({
          id: 'layer3',
          data: zhamen1,
          icon: zhamenIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(6, 179, 85,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(zhamenIcon, 'layer3', zhamen1, 'name', false); //闸门一
        let pailao2 = newfiberMap.getWKTtoGeojson(arry1);
        newfiberMap.addGeojsonPoint({
          id: 'layer1',
          data: pailao2,
          icon: pailaoIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(167, 126, 38,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(pailaoIcon, 'layer1', pailao2, 'name', false); //排涝泵站二
        let zhamen2 = newfiberMap.getWKTtoGeojson(arry4);
        newfiberMap.addGeojsonPoint({
          id: 'layer4',
          data: zhamen2,
          icon: zhamenIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(6, 179, 85,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(zhamenIcon, 'layer4', zhamen2, 'name', false); //闸门二
        let wushuibeng2 = newfiberMap.getWKTtoGeojson(arry6);
        newfiberMap.addGeojsonPoint({
          id: 'layer6',
          data: wushuibeng2,
          icon: wushuiIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(175, 50, 50,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(wushuiIcon, 'layer6', wushuibeng2, 'name', false); //污水泵二
        let tiaoxuchi = newfiberMap.getWKTtoGeojson(arry11);
        newfiberMap.addGeojsonPoint({
          id: 'layer11',
          data: tiaoxuchi,
          icon: tiaoxuIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(35, 147, 145,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(tiaoxuIcon, 'layer11', tiaoxuchi, 'name', false); //调蓄池
        let tiaoxuchi3 = newfiberMap.getWKTtoGeojson(arry7);
        newfiberMap.addGeojsonPoint({
          id: 'layer7',
          data: tiaoxuchi3,
          icon: tiaoxuIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(35, 147, 145,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(tiaoxuIcon, 'layer7', tiaoxuchi3, 'name', false); //调蓄池三
        let pailao3 = newfiberMap.getWKTtoGeojson(arry2);
        newfiberMap.addGeojsonPoint({
          id: 'layer2',
          data: pailao3,
          icon: pailaoIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(167, 126, 38,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(pailaoIcon, 'layer2', pailao3, 'name', false); //排涝泵站三
        let wushuichang = newfiberMap.getWKTtoGeojson(arry8);
        newfiberMap.addGeojsonPoint({
          id: 'layer8',
          data: wushuichang,
          icon: wscIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(169, 57, 57,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(wscIcon, 'layer8', wushuichang, 'name', false); //污水厂
        let wushuichang2 = newfiberMap.getWKTtoGeojson(arry9);
        newfiberMap.addGeojsonPoint({
          id: 'layer9',
          data: wushuichang2,
          icon: wscIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(169, 57, 57,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(wscIcon, 'layer9', wushuichang2, 'name', false); //污水厂二
        let CSO = newfiberMap.getWKTtoGeojson(arry12);
        newfiberMap.addGeojsonPoint({
          id: 'layer12',
          data: CSO,
          icon: CSOIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(152, 16, 192,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(CSOIcon, 'layer12', CSO, 'name', false); //CSO
        let CSO3 = newfiberMap.getWKTtoGeojson(arry13);
        newfiberMap.addGeojsonPoint({
          id: 'layer13',
          data: CSO,
          icon: CSOIcon,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(152, 16, 192,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
        //mapbox.loadPointsLayer(CSOIcon, 'layer13', CSO3, 'name', false); //CSO三
      }
      let resline = await sheHuiLineListall();
      if (resline && resline.code == 0) {
        let arryqy = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '第一阶段新建');
        let arryqyname_1 = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '第三阶段新建');
        let arryqyname_2 = resline.data.filter((item) => item.stationClass == '修复工程' && item.projectClass == '第三阶段新建');
        let arrybs = resline.data.filter((item) => item.stationClass == '补水工程' && item.projectClass == '第一阶段新建');
        let arrytkname = resline.data.filter((item) => item.stationClass == '扩宽工程' && item.projectClass == '第三阶段新建');
        let arryqyname = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '' && item.dataType == 1);
        let arryqy_1 = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '' && item.dataType == 2);
        let arrybsname = resline.data.filter((item) => item.stationClass == '补水工程' && item.projectClass == '' && item.dataType == 1);
        let arrytk = resline.data.filter((item) => item.stationClass == '扩宽工程' && item.projectClass == '' && item.dataType == 2);
        let arryqy_2 = resline.data.filter((item) => item.stationClass == '修复工程' && item.projectClass == '' && item.dataType == 2);
        allData.qingyu = newfiberMap.getWKTtoGeojson(arryqy.concat(arryqy_1).concat(arryqy_2));
        allData.bushui = newfiberMap.getWKTtoGeojson(arrybs);
        allData.qingyuname = newfiberMap.getWKTtoGeojson(arryqyname.concat(arryqyname_1).concat(arryqyname_2));
        allData.bushuiname = newfiberMap.getWKTtoGeojson(arrybsname);
        allData.tuokuan = newfiberMap.getWKTtoGeojson(arrytk);
        allData.tuokuaname = newfiberMap.getWKTtoGeojson(arrytkname);
      }

      // mapbox.loadWmsLayer(
      //   'layer17',
      //   'http://139.196.225.242:7002/geoserver/hj2work/wms?service=WMS&version=1.1.0&request=GetMap&layers=hj2work:pipe_main_all&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
      //   false
      // );

      allData.legendList
        .find((item) => item.title === '监测测站')
        .children.forEach(async (item) => {
          item.pointData = await item.loader();
          console.log(item);
          return;
          item.pointData.forEach((ele) => {
            console.log(ele);
            newfiberMap.addGeojsonPoint({
              id: item.layername,
              data: waterlogingGeojson,
              icon: waterLoging,
              text: '',
              fontSize: '18',
              font: 'Source Han Sans CN',
              height: 124,
              width: 64,
              labelOffset: [0, -140],
              imgOffset: [0, 0],
              showBackground: false,
              backgroundColor: '#ff0000',
              fillColor: 'rgba(156, 42, 42,1)',
              outlineColor: 'rgba(0, 0, 0, 0.8)',
              outlineWidth: 6,
              show: false,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE, // Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
            });
          });
        });

      console.log(allData.legendList);
    };
    //添加内涝点图层
    const addWaterLogingLayer = async () => {
      let waterLogingData = await jsdListHjly({ currentPage: 1, pageSize: 10, searchFilters: [] });
      if (waterLogingData) {
        let data = waterLogingData.result;
        data.forEach((item) => {
          item.name = item.STNM;
          item.SWVal = item.Z || '--';
          item.stationType = 'waterLoging';
        });
        let waterlogingGeojson = getWaterlogingGeojson(data);
        newfiberMap.addGeojsonPoint({
          id: 'waterLoging',
          data: waterlogingGeojson,
          icon: waterLoging,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(156, 42, 42,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
      }
    };
    //获取内涝点geojson
    const getWaterlogingGeojson = (dataList) => {
      return turf.featureCollection(
        dataList.map((data) => {
          if (data.LNG & data.LAT) {
            return turf.point([Number(data.LNG), Number(data.LAT)], data);
          }
          if (data.LGTD & data.LTTD) {
            return turf.point([Number(data.LGTD), Number(data.LTTD)], data);
          }
        })
      );
    };
    //添加湖泊监测点
    const addRiversgingLayer = async () => {
      let riversgingData = await lakelistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
      if (riversgingData) {
        let data = riversgingData.result;
        data.forEach((item) => {
          item.name = item.STNM;
          //item.SWVal = item.Z || '--';
          item.stationType = 'riversging';
        });
        let riversgingGeojson = getWaterlogingGeojson(data);
        newfiberMap.addGeojsonPoint({
          id: 'Riversging',
          data: riversgingGeojson,
          icon: riversging,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(44, 99, 162,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
      }
    };
    //添加港渠监测点
    const addGangqugLayer = async () => {
      let gangquData = await canllistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
      if (gangquData) {
        let data = gangquData;
        data.forEach((item) => {
          item.name = item.STNM;
          //item.SWVal = item.Z || '--';
          item.stationType = 'gangquLoging';
        });
        let gangQuGeojson = getWaterlogingGeojson(data);
        newfiberMap.addGeojsonPoint({
          id: 'GangquLoging',
          data: gangQuGeojson,
          icon: GangquLoging,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(24, 126, 123,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
      }
    };
    //添加厂站监测点
    const addStationgingLayer = async () => {
      let StationgingData = await pumplistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
      if (StationgingData) {
        let data = StationgingData;
        data.forEach((item) => {
          item.name = item.STNM;
          //item.SWVal = item.Z || '--';
          item.stationType = 'Stationging';
        });
        let StationgingGeojson = getWaterlogingGeojson(data);
        newfiberMap.addGeojsonPoint({
          id: 'Stationging',
          data: StationgingGeojson,
          icon: Stationging,
          text: '',
          fontSize: '18',
          font: 'Source Han Sans CN',
          height: 124,
          width: 64,
          labelOffset: [0, -140],
          imgOffset: [0, 0],
          showBackground: false,
          backgroundColor: '#ff0000',
          fillColor: 'rgba(41, 97, 162,1)',
          outlineColor: 'rgba(0, 0, 0, 0.8)',
          outlineWidth: 6,
          show: false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        });
      }
    };
    // 图例点击
    const changeLegend = (item) => {
      item.isCheck = !item.isCheck;
      /**
       * isCheck:true为选中,false未选中
       * layer:图层名称
       * url:icon的图片地址(/src/assets/newImgs/layerIcon/)
       */
      if (item.isCheck) {
        // 显示图层
        if (item.layername == 'zhengqu') {
          addArealayer();
        }
        if (item.layername == 'rainAndwu') {
          addLiuyuArealayer();
        }
        if (item.layername == 'rainArea') {
          addRainArea();
        }
        if (item.layername == 'wsArea') {
          addSewageArea();
        }
        if (item.layername == 'anhan') {
          addanhanlayer();
        }
        if (item.layername == 'mingqu') {
          addmingquLayer();
        }
        if (item.layername == 'xianghan') {
          addanhxianglayer();
        }
        if (item.layername == 'bushui') {
          addBushuiLine();
        }
        if (item.layername == 'qingyu') {
          addQingyuLine();
        }
        if (item.layername == 'waterLoging') {
          newfiberMap.setVisibility(item.layername, true);
        }
        if (item.layername == 'Riversging') {
          newfiberMap.setVisibility(item.layername, true);
        }
        if (item.layername == 'GangquLoging') {
          newfiberMap.setVisibility(item.layername, true);
        }
        if (item.layername == 'Stationging') {
          newfiberMap.setVisibility(item.layername, true);
        }
        if (item.layername == 'sanArea') {
          let selectedBuilding = newfiberMap.map.scene.primitives._primitives.filter((i) => !!i._url && i._url.includes('preview'));
          if (!selectedBuilding.length) {
            newfiberMap.loadCesium3DTileSet({
              id: 'jianzhu5',
              url: '/models-rest/rest/models/preview/CIM3-5/tileset.json',
            });
            newfiberMap.loadCesium3DTileSet({
              id: 'jianzhu7',
              url: '/models-rest/rest/models/preview/CIM3-7/tileset.json',
            });
            newfiberMap.loadCesium3DTileSet({
              id: 'jianzhu8',
              url: '/models-rest/rest/models/preview/CIM3-8/tileset.json',
            });
          } else {
            selectedBuilding.forEach((item) => {
              item.show = true;
            });
          }
        }
        for (let i = 0; i < 18; i++) {
          if (item.layername == 'layer' + i) {
            if (i != 17) {
              newfiberMap.setVisibility(item.layername, true);
            } else {
              newfiberMap.addGeoserverWMS({
                url: 'http://139.196.225.242:7002/geoserver/hj2work/wms',
                layerId: 'hj2work:pipe_main_all',
                id: 'layer17',
              });
            }
          }
        }
        if (item.layername == 'hedaotuokuan') {
          addTuokuanLine();
        }
        if (item.layername == 'wushuiroad') {
          addSewageRoad();
        }
        if (item.layername == 'bushuipoint') {
          addBushuiPoint();
        }
      } else {
        // 隐藏图层
        if (item.layername == 'zhengqu') {
          removeArealayer();
        }
        if (item.layername == 'rainAndwu') {
          removeLiuyuArealayer();
        }
        if (item.layername == 'rainArea') {
          removeRainArea();
        }
        if (item.layername == 'wsArea') {
          removeSewageArea();
        }
        if (item.layername == 'anhan') {
          removeanhanlayer();
        }
        if (item.layername == 'mingqu') {
          removemingquLayer();
        }
        if (item.layername == 'xianghan') {
          removexianghanlayer();
        }
        if (item.layername == 'bushui') {
          removeBushuiLine();
        }
        if (item.layername == 'qingyu') {
          removeQingyuLine();
        }
        if (item.layername == 'waterLoging') {
          newfiberMap.setVisibility(item.layername, false);
        }
        if (item.layername == 'Riversging') {
          newfiberMap.setVisibility(item.layername, false);
        }
        if (item.layername == 'GangquLoging') {
          newfiberMap.setVisibility(item.layername, false);
        }
        if (item.layername == 'Stationging') {
          newfiberMap.setVisibility(item.layername, false);
        }
        if (item.layername == 'sanArea') {
          let selectedBuilding = newfiberMap.map.scene.primitives._primitives.filter((i) => !!i._url && i._url.includes('preview'));
          console.log('selectedBuilding---', selectedBuilding);
          selectedBuilding.forEach((item) => {
            item.show = false;
          });
        }
        for (let i = 0; i < 18; i++) {
          if (item.layername == 'layer' + i) {
            let closePopup = false;
            bus.emit('closePopup', closePopup);
            newfiberMap.setVisibility(item.layername, false);
          }
        }
        if (item.layername == 'hedaotuokuan') {
          removeTuokuanLine();
        }
        if (item.layername == 'wushuiroad') {
          removeSewageRoad();
        }
        if (item.layername == 'bushuipoint') {
          removeBushuiPoint();
        }
      }
    };

    //添加政区图
    function addArealayer() {
      newfiberMap.addGeojsonPolygon({
        id: 'Area',
        data: Area,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
      });
      Areaname.features.forEach((feature) => {
        let AreanameEntity = {
          newFiberId: 'Areaname',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#00dd66'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            // disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性,指定从相机到该距离时禁用深度测试的距离
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
          },
        };
        newfiberMap.map.entities.add(AreanameEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'Arealine',
        data: AreaLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
      });
      // mapbox.addGeolayer('Area', Area, true);
      // mapbox.addPolylineLayer('Arealine', AreaLine, true);
      // mapbox._map.setPaintProperty('Arealine_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('Arealine_layer', 'Area_layer');
      // mapbox._map.moveLayer('Area_layer', 'bulding_layer');
      // mapbox.addmapchart('Areaname', Areaname, true);
      // mapbox._map.setPaintProperty('Areaname_layer', 'text-color', 'rgba(0, 225, 104,1)');
    }
    //移除政区图
    function removeArealayer() {
      newfiberMap.removeLayer('Area');
      newfiberMap.removeLayer('Areaname');
      newfiberMap.removeLayer('Arealine');
      // if (mapbox._map.getLayer('Area_layer') && mapbox._map.getLayer('Arealine_layer') && mapbox._map.getLayer('Areaname_layer')) {
      //   mapbox._map.removeLayer('Area_layer').removeSource('Area_source');
      //   mapbox._map.removeLayer('Arealine_layer').removeSource('Arealine_source');
      //   mapbox._map.removeLayer('Areaname_layer').removeSource('Areaname_source');
      // }
    }
    //添加雨污分流改造
    function addLiuyuArealayer() {
      newfiberMap.addGeojsonPolygon({
        id: 'LiuyuArea',
        data: LiuyuArea,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
      });
      Liuyuname.features.forEach((feature) => {
        let LiuyunameEntity = {
          newFiberId: 'LiuyuAreaname',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#8a5011'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            // disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性,指定从相机到该距离时禁用深度测试的距离
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
          },
        };
        newfiberMap.map.entities.add(LiuyunameEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'LiuyuArealine',
        data: LiuyuAreaLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
      });
      // mapbox.addGeolayer('LiuyuArea', LiuyuArea, true);
      // mapbox.addPolylineLayer('LiuyuArealine', LiuyuAreaLine, true);
      // mapbox._map.setPaintProperty('LiuyuArealine_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('LiuyuArealine_layer', 'LiuyuArea_layer');
      // mapbox._map.moveLayer('LiuyuArea_layer', 'bulding_layer');
      // mapbox.addmapchart('LiuyuAreaname', Liuyuname, true);
      // mapbox._map.setPaintProperty('LiuyuAreaname_layer', 'text-color', 'rgba(185, 106, 17,1)');
    }
    //移除雨污分流改造
    function removeLiuyuArealayer() {
      newfiberMap.removeLayer('LiuyuArea');
      newfiberMap.removeLayer('LiuyuAreaname');
      newfiberMap.removeLayer('LiuyuArealine');
      // if (
      //   mapbox._map.getLayer('LiuyuArea_layer') &&
      //   mapbox._map.getLayer('LiuyuArealine_layer') &&
      //   mapbox._map.getLayer('LiuyuAreaname_layer')
      // ) {
      //   mapbox._map.removeLayer('LiuyuArea_layer').removeSource('LiuyuArea_source');
      //   mapbox._map.removeLayer('LiuyuArealine_layer').removeSource('LiuyuArealine_source');
      //   mapbox._map.removeLayer('LiuyuAreaname_layer').removeSource('LiuyuAreaname_source');
      // }
    }
    //添加雨水分区
    function addRainArea() {
      //一级
      newfiberMap.addGeojsonPolygon({
        id: 'rainArea1',
        data: rainAreaone,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
        distanceDisplayCondition: [30000, 1000000],
      });
      rainAreanameone.features.forEach((feature) => {
        let rainAreanameoneEntity = {
          newFiberId: 'rainAreaname1',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#970251'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(30000, 1000000),
          },
        };
        newfiberMap.map.entities.add(rainAreanameoneEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'rainArea1line',
        data: rainAreaoneLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
        distanceDisplayCondition: [30000, 1000000],
      });
      // mapbox.addGeolayer('rainArea1', rainAreaone, true);
      // mapbox.addPolylineLayer('rainArea1line', rainAreaoneLine, true);
      // mapbox._map.setPaintProperty('rainArea1line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('rainArea1line_layer', 'rainArea1_layer');
      // mapbox.addmapchart('rainAreaname1', rainAreanameone, true);
      // mapbox._map.moveLayer('rainArea1_layer', 'bulding_layer');
      // mapbox._map.setLayerZoomRange('rainArea1_layer', 2, 13);
      // mapbox._map.setLayerZoomRange('rainArea1line_layer', 2, 13);
      // mapbox._map.setLayerZoomRange('rainAreaname1_layer', 2, 13);
      // mapbox._map.setPaintProperty('rainAreaname1_layer', 'text-color', 'rgba(188, 0, 98,1)');
      //二级
      newfiberMap.addGeojsonPolygon({
        id: 'rainArea2',
        data: rainAreatwo,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
        distanceDisplayCondition: [0, 30000],
      });
      rainAreanametwo.features.forEach((feature) => {
        let rainAreanametwoEntity = {
          newFiberId: 'rainAreaname2',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#970251'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
          },
        };
        newfiberMap.map.entities.add(rainAreanametwoEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'rainArea2line',
        data: rainAreatwoLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
        distanceDisplayCondition: [0, 30000],
      });
      // mapbox.addGeolayer('rainArea2', rainAreatwo, true);
      // mapbox.addPolylineLayer('rainArea2line', rainAreatwoLine, true);
      // mapbox._map.setPaintProperty('rainArea2line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('rainArea2line_layer', 'rainArea2_layer');
      // mapbox.addmapchart('rainAreaname2', rainAreanametwo, true);
      // mapbox._map.moveLayer('rainArea2_layer', 'bulding_layer');
      // mapbox._map.setLayerZoomRange('rainArea2_layer', 13, 24);
      // mapbox._map.setLayerZoomRange('rainArea2line_layer', 13, 24);
      // mapbox._map.setLayerZoomRange('rainAreaname2_layer', 13, 24);
      // mapbox._map.setPaintProperty('rainAreaname2_layer', 'text-color', 'rgba(188, 0, 98,1)');
    }
    //移除雨水分区
    function removeRainArea() {
      newfiberMap.removeLayer('rainArea1');
      newfiberMap.removeLayer('rainAreaname1');
      newfiberMap.removeLayer('rainArea1line');
      newfiberMap.removeLayer('rainArea2');
      newfiberMap.removeLayer('rainAreaname2');
      newfiberMap.removeLayer('rainArea2line');
      // if (
      //   mapbox._map.getLayer('rainArea1_layer') &&
      //   mapbox._map.getLayer('rainArea1line_layer') &&
      //   mapbox._map.getLayer('rainAreaname1_layer') &&
      //   mapbox._map.getLayer('rainArea2_layer') &&
      //   mapbox._map.getLayer('rainAreaname2_layer') &&
      //   mapbox._map.getLayer('rainArea2line_layer')
      // ) {
      //   mapbox._map.removeLayer('rainArea1_layer').removeSource('rainArea1_source');
      //   mapbox._map.removeLayer('rainArea1line_layer').removeSource('rainArea1line_source');
      //   mapbox._map.removeLayer('rainAreaname1_layer').removeSource('rainAreaname1_source');
      //   mapbox._map.removeLayer('rainArea2_layer').removeSource('rainArea2_source');
      //   mapbox._map.removeLayer('rainAreaname2_layer').removeSource('rainAreaname2_source');
      //   mapbox._map.removeLayer('rainArea2line_layer').removeSource('rainArea2line_source');
      // }
    }
    //添加污水分区
    function addSewageArea() {
      //一级
      newfiberMap.addGeojsonPolygon({
        id: 'wsArea1',
        data: wsAreaone,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
        distanceDisplayCondition: [30000, 1000000],
      });
      wsAreanameone.features.forEach((feature) => {
        let wsAreanameoneEntity = {
          newFiberId: 'wsAreaname1',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#8b4e0e'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(30000, 1000000),
          },
        };
        newfiberMap.map.entities.add(wsAreanameoneEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'wsArea1line',
        data: wsAreaoneLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
        distanceDisplayCondition: [30000, 1000000],
      });
      // mapbox.addGeolayer('wsArea1', wsAreaone, true);
      // mapbox.addPolylineLayer('wsArea1line', wsAreaoneLine, true);
      // mapbox._map.setPaintProperty('wsArea1line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('wsArea1line_layer', 'wsArea1_layer');
      // mapbox.addmapchart('wsAreaname1', wsAreanameone, true);
      // mapbox._map.moveLayer('wsArea1_layer', 'bulding_layer');
      // mapbox._map.setLayerZoomRange('wsArea1_layer', 2, 13);
      // mapbox._map.setLayerZoomRange('wsArea1line_layer', 2, 13);
      // mapbox._map.setLayerZoomRange('wsAreaname1_layer', 2, 13);
      // mapbox._map.setPaintProperty('wsAreaname1_layer', 'text-color', 'rgba(196, 107, 12,1)');
      //二级
      newfiberMap.addGeojsonPolygon({
        id: 'wsArea2',
        data: wsAreatwo,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 6,
        strokeColor: '#1c95ab',
        groundHeight: 0,
        distanceDisplayCondition: [0, 30000],
      });
      wsAreanametwo.features.forEach((feature) => {
        let wsAreanametwoEntity = {
          newFiberId: 'wsAreaname2',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#8b4e0e'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
          },
        };
        newfiberMap.map.entities.add(wsAreanametwoEntity);
      });
      newfiberMap.addGeojsonLine({
        id: 'wsArea2line',
        data: wsAreatwoLine,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: null,
        width: 3,
        distanceDisplayCondition: [0, 30000],
      });
      // mapbox.addGeolayer('wsArea2', wsAreatwo, true);
      // mapbox.addPolylineLayer('wsArea2line', wsAreatwoLine, true);
      // mapbox._map.setPaintProperty('wsArea2line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
      // mapbox._map.moveLayer('wsArea2line_layer', 'wsArea2_layer');
      // mapbox.addmapchart('wsAreaname2', wsAreanametwo, true);
      // mapbox._map.moveLayer('wsArea2_layer', 'bulding_layer');
      // mapbox._map.setLayerZoomRange('wsArea2_layer', 13, 24);
      // mapbox._map.setLayerZoomRange('wsArea2line_layer', 13, 24);
      // mapbox._map.setLayerZoomRange('wsAreaname2_layer', 13, 24);
      // mapbox._map.setPaintProperty('wsAreaname2_layer', 'text-color', 'rgba(196, 107, 12,1)');
    }
    //移除污水分区
    function removeSewageArea() {
      newfiberMap.removeLayer('wsArea1');
      newfiberMap.removeLayer('wsAreaname1');
      newfiberMap.removeLayer('wsArea1line');
      newfiberMap.removeLayer('wsArea2');
      newfiberMap.removeLayer('wsAreaname2');
      newfiberMap.removeLayer('wsArea2line');
      // if (
      //   mapbox._map.getLayer('wsArea1_layer') &&
      //   mapbox._map.getLayer('wsArea1line_layer') &&
      //   mapbox._map.getLayer('wsAreaname1_layer') &&
      //   mapbox._map.getLayer('wsArea2_layer') &&
      //   mapbox._map.getLayer('wsAreaname2_layer') &&
      //   mapbox._map.getLayer('wsArea2line_layer')
      // ) {
      //   mapbox._map.removeLayer('wsArea1_layer').removeSource('wsArea1_source');
      //   mapbox._map.removeLayer('wsArea1line_layer').removeSource('wsArea1line_source');
      //   mapbox._map.removeLayer('wsAreaname1_layer').removeSource('wsAreaname1_source');
      //   mapbox._map.removeLayer('wsArea2_layer').removeSource('wsArea2_source');
      //   mapbox._map.removeLayer('wsArea2line_layer').removeSource('wsArea2line_source');
      //   mapbox._map.removeLayer('wsAreaname2_layer').removeSource('wsAreaname2_source');
      // }
    }
    //添加明渠
    function addmingquLayer() {
      // //明渠水流动效
      newfiberMap.dynamicWaterToMap(mingqupolygon, dynamicWater);
      mqNameJSON.features.forEach((feature) => {
        let mqNameEntity = {
          newFiberId: 'mqName',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#11796f'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
          },
        };
        newfiberMap.map.entities.add(mqNameEntity);
      });
      // mapbox.addwaterflow('http://server1.wh-nf.cn:6083/water', 'mingqupolygon', mingqupolygon, true);
      // mapbox._map.moveLayer('mingqupolygon_layer', 'bulding_layer');
      // //渲染明渠文字
      // mapbox.addmapchart('mqName', mqNameJSON, true);
      // mapbox._map.setPaintProperty('mqName_layer', 'text-color', 'rgba(24, 163, 149,1)');
    }
    //清除明渠
    function removemingquLayer() {
      newfiberMap.removeLayer('mqName');
      let deleteLayer = newfiberMap.map.scene.primitives._primitives.filter(
        (primitive) => primitive._instanceIds && primitive._instanceIds.indexOf('dynamicWater') != -1
      );
      if (!deleteLayer.length) return;
      deleteLayer.forEach((layer) => {
        newfiberMap.map.scene.primitives.remove(layer);
      });
      // clearInterval(window.timerwater);
      // if (mapbox._map.getLayer('mingqupolygon_layer') && mapbox._map.getLayer('mqName_layer')) {
      //   mapbox._map.removeLayer('mingqupolygon_layer').removeSource('mingqupolygon_source');
      //   mapbox._map.removeLayer('mqName_layer').removeSource('mqName_source');
      // }
    }
    //添加暗涵
    function addanhanlayer() {
      // //暗涵流动光效
      newfiberMap.addGeojsonLine({
        id: 'brightenangqu',
        data: anquJSON,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: new Cesium.Spriteline1MaterialProperty(1000, anhan_Line),
        width: 5,
      });
      ahNameJSON.features.forEach((feature) => {
        let ahNameEntity = {
          newFiberId: 'ahName',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#642494'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
          },
        };
        newfiberMap.map.entities.add(ahNameEntity);
      });
      // mapbox.addbrightenanhan('brightenangqu', anquJSON, true);
      // mapbox._map.moveLayer('brightenangqu_layer', 'bulding_layer');
      // for (let i = 0; i < 10; i++) {
      //   mapbox._map.moveLayer('brightenangqu' + i, 'bulding_layer');
      // }
      // mapbox._map.setPaintProperty('brightenangqu_layer', 'line-color', 'rgba(134, 46, 195,1)');
      // //渲染暗涵文字
      // mapbox.addmapchart('ahName', ahNameJSON, true);
      // mapbox._map.setPaintProperty('ahName_layer', 'text-color', 'rgba(134,46,195,1)');
    }
    //清除暗涵
    function removeanhanlayer() {
      newfiberMap.removeLayer('brightenangqu');
      newfiberMap.removeLayer('ahName');
      // clearInterval(window.timeranhan);
      // if (mapbox._map.getLayer('brightenangqu_layer') && mapbox._map.getLayer('ahName_layer')) {
      //   mapbox._map.removeLayer('brightenangqu_layer');
      //   mapbox._map.removeLayer('ahName_layer').removeSource('ahName_source');
      // }
      // for (let i = 0; i < 10; i++) {
      //   if (mapbox._map.getLayer('brightenangqu' + i)) {
      //     mapbox._map.removeLayer('brightenangqu' + i).removeSource('brightenangqu' + i);
      //   }
      // }
      // if (mapbox._map.getSource('brightenangqu_source')) {
      //   mapbox._map.removeSource('brightenangqu_source');
      // }
    }
    //添加箱涵
    function addanhxianglayer() {
      // //箱涵流动光效
      newfiberMap.addGeojsonLine({
        id: 'brightenxianghan',
        data: xhjson,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: new Cesium.Spriteline1MaterialProperty(1000, xianghan_Line),
        width: 5,
      });
      xhNameJSON.features.forEach((feature) => {
        let xhNameEntity = {
          newFiberId: 'xhName',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#189d8a'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
          },
        };
        newfiberMap.map.entities.add(xhNameEntity);
      });
      // mapbox.addbrightenLine('brightenxianghan', xhjson, true);
      // mapbox._map.moveLayer('brightenxianghan_layer', 'bulding_layer');
      // for (let i = 0; i < 10; i++) {
      //   mapbox._map.moveLayer('brightenxianghan' + i, 'bulding_layer');
      // }
      // mapbox._map.setPaintProperty('brightenxianghan_layer', 'line-color', 'rgba(30, 196, 201,1)');
      // //渲染暗涵文字
      // mapbox.addmapchart('xhName', xhNameJSON, true);
      // mapbox._map.setPaintProperty('xhName_layer', 'text-color', 'rgba(30, 196, 171,1)');
    }
    //清除箱涵
    function removexianghanlayer() {
      newfiberMap.removeLayer('brightenxianghan');
      newfiberMap.removeLayer('xhName');
      // clearInterval(window.timerflow);
      // if (mapbox._map.getLayer('brightenxianghan_layer') && mapbox._map.getLayer('xhName_layer')) {
      //   mapbox._map.removeLayer('brightenxianghan_layer');
      //   mapbox._map.removeLayer('xhName_layer').removeSource('xhName_source');
      // }
      // for (let i = 0; i < 10; i++) {
      //   if (mapbox._map.getLayer('brightenxianghan' + i)) {
      //     mapbox._map.removeLayer('brightenxianghan' + i).removeSource('brightenxianghan' + i);
      //   }
      // }
      // if (mapbox._map.getSource('brightenxianghan_source')) {
      //   mapbox._map.removeSource('brightenxianghan_source');
      // }
    }
    //添加补水路线
    function addBushuiLine() {
      newfiberMap.addGeojsonLine({
        id: 'bushui',
        data: shengtai,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: new Cesium.Spriteline1MaterialProperty(2000, shengtai_Line),
        width: 3,
      });
      allData.bushuiname.features.forEach((feature) => {
        let bushuinameEntity = {
          newFiberId: 'bushuiName',
          position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
          label: {
            text: feature.properties.name, //文字描述
            font: 20 + ' ' + 'Source Han Sans CN', //字体样式
            fillColor: Cesium.Color.fromCssColorString('#00d564'), //字体颜色
            showBackground: false, //是否显示背景颜色
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
            outlineColor: Cesium.Color.fromCssColorString('#000909'),
            outlineWidth: 6, //外轮廓宽度
            pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
            //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            show: true,
            disableDepthTestDistance: 1000000,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
          },
        };
        newfiberMap.map.entities.add(bushuinameEntity);
      });
      // mapbox.addbrightenbushui('bushui', allData.bushui, true);
      // mapbox._map.moveLayer('bushui_layer', 'bulding_layer');
      // for (let i = 0; i < 10; i++) {
      //   mapbox._map.moveLayer('bushui' + i, 'bulding_layer');
      // }
      // mapbox._map.setPaintProperty('bushui_layer', 'line-color', 'rgba(0, 225, 104,1)');
      // //渲染暗涵文字
      // mapbox.addmapchart('bushuiName', allData.bushuiname, true);
      // mapbox._map.setPaintProperty('bushuiName_layer', 'text-color', 'rgba(0, 225, 104,1)');
    }
    //移除补水路线
    function removeBushuiLine() {
      newfiberMap.removeLayer('bushui');
      newfiberMap.removeLayer('bushuiName');
      // clearInterval(window.timerbushui);
      // if (mapbox._map.getLayer('bushui_layer') && mapbox._map.getLayer('bushuiName_layer')) {
      //   mapbox._map.removeLayer('bushui_layer');
      //   mapbox._map.removeLayer('bushuiName_layer').removeSource('bushuiName_source');
      // }
      // for (let i = 0; i < 10; i++) {
      //   if (mapbox._map.getLayer('bushui' + i)) {
      //     mapbox._map.removeLayer('bushui' + i).removeSource('bushui' + i);
      //   }
      // }
      // if (mapbox._map.getSource('bushui_source')) {
      //   mapbox._map.removeSource('bushui_source');
      // }
    }
    //添加补水点
    function addBushuiPoint() {
      newfiberMap.addGeojsonPoint({
        id: 'bushuipoint',
        data: bspoint,
        icon: bushui,
        text: '',
        fontSize: '18',
        font: 'Source Han Sans CN',
        height: 20,
        width: 20,
        labelOffset: [0, -140],
        imgOffset: [0, 0],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: 'rgba(169, 57, 57,1)',
        outlineColor: 'rgba(0, 0, 0, 0.8)',
        outlineWidth: 6,
        show: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      });
      //mapbox.loadPointsLayer(bushui, 'bushuipoint', bspoint, '', true);
    }
    //移除补水点
    function removeBushuiPoint() {
      newfiberMap.removeLayer('bushuipoint');
      // if (mapbox._map.getLayer('bushuipoint_layer')) {
      //   mapbox._map.removeLayer('bushuipoint_layer').removeSource('bushuipoint_source');
      // }
    }
    //添加清淤路线
    function addQingyuLine() {
      newfiberMap.addGeojsonPoint({
        id: 'qingyuname',
        data: allData.qingyuname,
        text: '',
        fontSize: '19',
        font: 'Source Han Sans CN',
        height: 124,
        width: 64,
        labelOffset: [0, -20],
        imgOffset: [0, 0],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: 'rgba(154, 85, 11,1)',
        outlineColor: 'rgba(0, 0, 0, 0.8)',
        outlineWidth: 6,
        show: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      });
      newfiberMap.addGeojsonLine({
        id: 'qingyuline',
        data: allData.qingyu,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.1,
          color: Cesium.Color.fromCssColorString('rgba(136, 254, 136,1)'),
        }),
        width: 15,
      });
    }
    //移除清淤路线
    function removeQingyuLine() {
      newfiberMap.removeLayer('qingyuline');
      newfiberMap.removeLayer('qingyuname');
    }
    //添加拓宽路线
    function addTuokuanLine() {
      newfiberMap.addGeojsonPoint({
        id: 'tuokuaname',
        data: allData.tuokuaname,
        text: '',
        fontSize: '19',
        font: 'Source Han Sans CN',
        height: 124,
        width: 64,
        labelOffset: [0, -20],
        imgOffset: [0, 0],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: 'rgba(112, 40, 167,1)',
        outlineColor: 'rgba(0, 0, 0, 0.8)',
        outlineWidth: 6,
        show: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      });
      newfiberMap.addGeojsonLine({
        id: 'tuokuanline',
        data: allData.tuokuan,
        text: '',
        fontSize: '',
        font: 'Source Han Sans CN',
        labelOffset: [0, 20],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: '#ffffff',
        outlineColor: '',
        outlineWidth: 1,
        style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
        material: new Cesium.PolylineGlowMaterialProperty({
          glowPower: 0.1,
          color: Cesium.Color.fromCssColorString('rgba(151, 71, 151,1)'),
        }),
        width: 15,
      });
    }
    //移除拓宽路线
    function removeTuokuanLine() {
      newfiberMap.removeLayer('tuokuanline');
      newfiberMap.removeLayer('tuokuaname');
    }
    //添加污水收集路由
    function addSewageRoad() {
      //阶段1  机场河
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.232251952664, 30.6282251989571],
        endPosition: [114.224961046929, 30.6688376133188],
        height: 500,
        color: '#e5e510',
        with: 5,
      });

      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.197439638586, 30.6215452723643],
        endPosition: [114.224961046929, 30.6688376133188],
        height: 500,
        color: '#e5e510',
        with: 5,
      });
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.222606449822, 30.627295887292],
        endPosition: [114.224961046929, 30.6688376133188],
        height: 500,
        color: '#e5e510',
        with: 5,
      });
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.229789375448, 30.6597774540696],
        endPosition: [114.224961046929, 30.6688376133188],
        height: 500,
        color: '#e5e510',
        with: 5,
      });

      setTimeout(() => {
        //阶段2 机场河
        newfiberMap.parabolaFlowInit({
          id: 'wushuiRoad',
          startPosition: [114.224961046929, 30.6688376133188],
          endPosition: [114.229, 30.658],
          height: 500,
          color: '#d10000',
          with: 5,
        });
      }, 2000);
      //阶段1 黄孝河
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.279463029093, 30.6313298840337],
        endPosition: [114.291159649014, 30.6677937697572],
        height: 500,
        color: '#e5e510',
        with: 5,
      });
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.268088655832, 30.6428962001639],
        endPosition: [114.291159649014, 30.6677937697572],
        height: 500,
        color: '#e5e510',
        with: 5,
      });
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.28484027597, 30.6450852278393],
        endPosition: [114.291159649014, 30.6677937697572],
        height: 500,
        color: '#e5e510',
        with: 5,
      });
      newfiberMap.parabolaFlowInit({
        id: 'wushuiRoad',
        startPosition: [114.304897748493, 30.6603356257536],
        endPosition: [114.291159649014, 30.6677937697572],
        height: 500,
        color: '#e5e510',
        with: 5,
      });

      setTimeout(() => {
        //阶段二 黄孝河
        newfiberMap.parabolaFlowInit({
          id: 'wushuiRoad',
          startPosition: [114.291159649014, 30.6677937697572],
          endPosition: [114.286368350578, 30.6709689294036],
          height: 500,
          color: '#d10000',
          with: 5,
        });
      }, 2000);
    }
    //清除污水收集理由
    function removeSewageRoad() {
      newfiberMap.removeLayer('wushuiRoad');
      // if (
      //   mapbox._map.getLayer('jichangEast_layer') &&
      //   mapbox._map.getLayer('jichangWeat1_layer') &&
      //   mapbox._map.getLayer('jichangWeat2_layer') &&
      //   mapbox._map.getLayer('jichangWeat3_layer') &&
      //   mapbox._map.getLayer('jichangWeat4_layer') &&
      //   mapbox._map.getLayer('huangxiao1_layer') &&
      //   mapbox._map.getLayer('huangxiao2_layer') &&
      //   mapbox._map.getLayer('huangxiao3_layer') &&
      //   mapbox._map.getLayer('huangxiao4_layer') &&
      //   mapbox._map.getLayer('huangxiao5_layer')
      // ) {
      //   mapbox._map.removeLayer('jichangEast_layer');
      //   mapbox._map.removeLayer('jichangWeat1_layer');
      //   mapbox._map.removeLayer('jichangWeat2_layer');
      //   mapbox._map.removeLayer('jichangWeat3_layer');
      //   mapbox._map.removeLayer('jichangWeat4_layer');
      //   mapbox._map.removeLayer('huangxiao1_layer');
      //   mapbox._map.removeLayer('huangxiao2_layer');
      //   mapbox._map.removeLayer('huangxiao3_layer');
      //   mapbox._map.removeLayer('huangxiao4_layer');
      //   mapbox._map.removeLayer('huangxiao5_layer');
      // }
    }

    // 展开收起
    function changeZhan() {
      this.ifExpand = !this.ifExpand;
    }
    //搜索框获取所有站点
    async function getAllSelectPoi() {
      allData.selectedPois = [];
      let res = await getAllSiteEquipmentProjectPoint();
      if (res && res.code == 200) {
        res.data.forEach((element) => {
          allData.selectedPois.push({
            label: element.stName,
            value: element.stCode,
            geometry: element.geometrys,
            stationType: element.stationType,
          });
        });
      }
    }
    //搜索后定位及弹窗
    function getPOIinfo(value, options) {
      if (!!!options) {
        // if (!!mapbox._map.getLayer('selectedSta_layer')) {
        //   mapbox._map.removeLayer('selectedSta_layer');
        //   mapbox._map.removeSource('selectedSta_source');
        // }
        newfiberMap.removeLayer('selectedSta');
        allData.showModalSzjcz = false;
        allData.showModalSwjcz = false;
        let closePopup = false;
        bus.emit('closePopup', closePopup);
        return;
      }
      // //删除上次查询显示出的站点及弹窗
      // if (!!mapbox._map.getLayer('selectedSta_layer')) {
      //   mapbox._map.removeLayer('selectedSta_layer');
      //   mapbox._map.removeSource('selectedSta_source');
      // }
      // allData.showModalSzjcz = false;
      // allData.showModalSwjcz = false;
      // if (!!mapbox._popup) {
      //   mapbox._popup.remove();
      // }
      newfiberMap.removeLayer('selectedSta');
      allData.showModalSzjcz = false;
      allData.showModalSwjcz = false;
      let closePopup = false;
      bus.emit('closePopup', closePopup);
      let url;
      let geometry = WKT.parse(options.geometry);
      let selectedSta = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry,
            properties: options,
          },
        ],
      };
      // //选择站点图标
      if (options.stationType == '雨量站') {
        url = yuliangImg;
      } else if (options.stationType == '水质站(地表水)') {
        url = shuizhiIcon;
      } else if (options.stationType == '水位站') {
        url = yeweiIcon;
      } else if (options.stationType == '流量站') {
        url = liuliangIcon;
      } else if (options.stationType == '污水泵站') {
        url = wushuiIcon;
      } else if (options.stationType == '污水处理厂') {
        url = wscIcon;
      } else if (options.stationType == '排涝泵站') {
        url = pailaoIcon;
      } else if (options.stationType == '分散处理设施') {
        url = fensanIcon;
      } else if (options.stationType == '闸门') {
        url = zhamenIcon;
      } else if (options.stationType == 'CSO强化处理设施') {
        url = CSOIcon;
      } else if (options.stationType == '调蓄池') {
        url = tiaoxuIcon;
      }
      // //添加搜索站点,定位视角
      newfiberMap.addGeojsonPoint({
        id: 'selectedSta',
        data: selectedSta,
        icon: url,
        text: 'label',
        fontSize: '18',
        font: 'Source Han Sans CN',
        height: 124,
        width: 64,
        labelOffset: [0, -140],
        imgOffset: [0, 0],
        showBackground: false,
        backgroundColor: '#ff0000',
        fillColor: 'rgba(66, 144, 234,1)',
        outlineColor: 'rgba(0, 0, 0, 0.8)',
        outlineWidth: 6,
        show: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      });
      newfiberMap.flyTo({
        lon: selectedSta.features[0].geometry.coordinates[0] + 0.05,
        lat: selectedSta.features[0].geometry.coordinates[1] - 0.15,
        heading: 2.281299097855777,
        zoom: 8358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });
    }
    //获取搜索后的闸站、污水厂、泵站等信息
    async function getSelectPOIinfo(id, callback) {
      let res = await StationPointInfo(`${id}`);
      if (res && res.code == 0) {
        allData.POIinfo = res.hjProjectConstructionPoint;
        if (typeof callback == 'function') {
          callback();
        }
      }
    }
    onMounted(() => {
      // setTimeout(() => {

      let interval = setInterval(() => {
        if (!window.newfiberMap) return;
        clearInterval(interval);
        getDefaultLayer();
        getMapJSON();
        addWaterLogingLayer();
        addRiversgingLayer();
        addGangqugLayer();
        addStationgingLayer();
        getAllSelectPoi();
        newfiberMap.mapClickEvent((position, point, feature) => {
          let properties = feature.properties.getValue();
          if (feature.newFiberId.includes('layer') || feature.newFiberId == 'yuliangJC' || feature.newFiberId == 'waterLoging') {
            let clickPointPosition = Cesium.Cartographic.fromCartesian(feature.position.getValue());
            let clickPointCoordinates = [
              Cesium.Math.toDegrees(clickPointPosition.longitude),
              Cesium.Math.toDegrees(clickPointPosition.latitude),
              0,
            ];

            if (feature.newFiberId == 'layer16') {
              allData.stationCode = properties.stCode;
              allData.showModalSzjcz = true;
            } else if (feature.newFiberId == 'layer14' || feature.newFiberId == 'layer15') {
              allData.YWstationCode = properties.stCode;
              allData.showModalSwjcz = true;
            } else if (feature.newFiberId == 'waterLoging') {
              allData.showModalNld = true;
              allData.valueModalNld = properties;
            } else if (feature.newFiberId == 'Riversging') {
              allData.showModalHP = true;
              allData.valueModalhp = properties;
            } else {
              newfiberMap.flyTo({
                lon: clickPointCoordinates[0] + 0.05,
                lat: clickPointCoordinates[1] - 0.15,
                heading: 2.281299097855777,
                zoom: 8358.12942752382,
                pitch: -25.2508969308367,
                roll: 0.005453465256790101,
              });
              bus.emit('popupInfo', properties);
              nextTick(() => {
                newfiberMap.createPopup({
                  element: 'czgqBox',
                  position: clickPointCoordinates,
                });
              });
            }
          }
          //站点搜索的弹窗
          if (feature.newFiberId == 'selectedSta') {
            let clickPointPosition = Cesium.Cartographic.fromCartesian(feature.position.getValue());
            let clickPointCoordinates = [
              Cesium.Math.toDegrees(clickPointPosition.longitude),
              Cesium.Math.toDegrees(clickPointPosition.latitude),
              0,
            ];
            if (properties.stationType.includes('水质站')) {
              allData.stationCode = properties.value;
              allData.showModalSzjcz = true;
            } else if (properties.stationType.includes('水位站') || properties.stationType.includes('流量站')) {
              allData.YWstationCode = properties.value;
              allData.showModalSwjcz = true;
            } else {
              if (properties.stationType == '雨量站') {
                properties.name = properties.label;
                properties.code = properties.value;
                newfiberMap.flyTo({
                  lon: clickPointCoordinates[0] + 0.05,
                  lat: clickPointCoordinates[1] - 0.15,
                  heading: 2.281299097855777,
                  zoom: 8358.12942752382,
                  pitch: -25.2508969308367,
                  roll: 0.005453465256790101,
                });
                bus.emit('popupInfo', properties);
                nextTick(() => {
                  newfiberMap.createPopup({
                    element: 'czgqBox',
                    position: clickPointCoordinates,
                  });
                });
              } else {
                getSelectPOIinfo(properties.value, () => {
                  properties = allData.POIinfo;
                  newfiberMap.flyTo({
                    lon: clickPointCoordinates[0] + 0.05,
                    lat: clickPointCoordinates[1] - 0.15,
                    heading: 2.281299097855777,
                    zoom: 8358.12942752382,
                    pitch: -25.2508969308367,
                    roll: 0.005453465256790101,
                  });
                  bus.emit('popupInfo', properties);
                  nextTick(() => {
                    newfiberMap.createPopup({
                      element: 'czgqBox',
                      position: clickPointCoordinates,
                    });
                  });
                });
              }
            }
          }
        });
      }, 100);

      // });
    });
    onBeforeUnmount(() => {
      bus.off('showDefaultLegend');
    });
    return {
      ...toRefs(allData),
      changeLegend,
      changeLiuyu,
      getLayerImg,
      getDefaultLayer,
      changeZhan,
      getMapJSON,
      addWaterLogingLayer,
      addRiversgingLayer,
      addGangqugLayer,
      addStationgingLayer,
      getAllSelectPoi,
      getPOIinfo,
      getSelectPOIinfo,
    };
  },
};
</script>

<style lang="less">
.lengendPage {
  .selectedPoi {
    position: absolute;
    width: 230px;
    top: 10%;
    left: 5px;
  }
  .zksqImg {
    width: 16px;
    height: 147px;
    background: url('@/assets/newImgs/other/down.png');
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    top: 40%;
    left: 238px;
    z-index: 115;
    cursor: pointer;
  }
  .goLeft {
    left: 2px;
  }
  .publicLegend {
    background: #052f4a;
    border: 1px solid #094065;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
    opacity: 0.9;
    border-radius: 10px;
    position: absolute;
    top: 15%;
    left: 5px;
    z-index: 110;
    height: 700px;
    overflow: auto;
    .titleB {
      height: 35px;
      line-height: 35px;
      background: #094065;
      font-size: 16px;
      padding-left: 10px;
    }
    .part {
      display: flex;
      height: 40px;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #08596a;
      }
      .img {
        width: 17px;
        height: 17px;
        margin-left: 15px;
        margin-right: 5px;
      }
      .title {
        margin-left: 5px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        width: 155px;
      }
      .n-icon {
        margin-right: 10px;
        margin-top: 2px;
        font-weight: bold;
        &.active {
          color: #00ee6f;
        }
      }
    }
  }
}
</style>