visu_lifeline/src/components/supermap-2.5d.vue

<template>
  <div id="supermap3D" style="width: 100%; height: 100%;background: none;overflow-y: auto;">
    <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
      <!--地图top 显示 开始-->
      <transition name="fade">
        <div class="map-tit" v-show="mapshow">
          <div class="top-tit">
            <i class="iconfont sj-icon-jkzx"></i>
            <span><img src="../assets/images/close.svg" @click="mapshow=false"/></span>
          </div>
          <div class="map-txt" v-html="bindPopupHtml">
          </div>
          <el-button size="mini" type="primary" class="sj-icon-btn" @click="openTvwall()" v-if="_click!=''">
            查看
          </el-button>
          <div id="super2"/>
        </div>
      </transition>
      <!--地图top 显示 结束-->

      <!--地图开挖 显示 开始-->
      <div id="excavation" v-if="showExcavation" class="param-container tool-bar">
        <div class="dzt-operate">
          <label class="form-label">开挖深度(米) :</label>
          <input type="text" class="form-control" value="20" id="depth" style="height: 25px;">
        </div>
        <div class="dzt-operate">
          <label class="form-label">上移高度(米) :</label>
          <input type="text" class="form-control" value="300" id="moveHeight" style="height: 25px;">
        </div>
        <div style="display: flex;justify-content: end;">
          <button id="automaticDig" class="button black" type="button">自动开挖</button>
          <button id="dig" class="button black" type="button">开挖</button>
          <button id="clear" class="button black" type="button" style="margin-right: 0">清除</button>
        </div>
      </div>
      <!--地图开挖 显示 结束-->
      <!--地图开挖分析 显示 开始-->
      <div id="excavationAnalyze" v-if="showExcavationAnalyze" class="param-container tool-bar">
        <div class="param-item">
          <b>开挖高程：</b>
          <input type="text" id="depth" value="5000" style="margin-left: 50px;">
        </div>
        <div class="param-item">
          <b>开挖面积(平方米):</b>
          <input type="text" id="cutarea" value="" style="margin-left: 10px;">
        </div>
        <div class="param-item">
          <b>开挖体积(立方米):</b>
          <input type="text" id="cutVolume" value="" style="margin-left: 10px;">
        </div>
        <div class="param-item">
          <b>填方面积(平方米):</b>
          <input type="text" id="fillarea" value="" style="margin-left: 10px;">
        </div>
        <div class="param-item">
          <b>填方体积(立方米):</b>
          <input type="text" id="fillVolume" value="" style="margin-left: 10px;">
        </div>
        <div class="param-item">
          <b>未填挖面积(平方米):</b>
          <input type="text" id="remainderArea" value="">
        </div>

        <div class="param-item" style="float: right;">
          <button type="button" id="filladd" class="button black">绘制</button>
          <button type="button" id="fillclear" class="button black">清除</button>
        </div>
      </div>
      <!--地图开挖分析 显示 结束-->
      <!--地图选择、框选 显示 开始-->
      <div id="boxSelection" v-if="showSoxSelection">
        <Form style="width: 280px;z-index: 10000;" class="tool-bar param-container" tabindex="0">
          <div style="margin-bottom:4px;">
            <input type="button" id="isSelection" class="button black"><span
            style="vertical-align: middle">框选</span>
            <input type="checkbox" id="isCallInMoving" style="vertical-align: middle;margin-right: 10px;"><span
            style="vertical-align: middle">实时选择</span>
          </div>
          <label>选择模式（按下选择键开始框选）</label>
          <select id="mode">
            <option value="1" selected>重置模式</option>
            <option value="2">并集模式</option>
            <option value="4">交集模式</option>
            <option value="8">减去模式</option>
          </select>
        </Form>
      </div>
      <!--地图选择、框选 显示 结束-->
      <div id="pipeBurstAnalysis" v-if="showPipeBurstAnalysis" class="param-container tool-bar">
        <select id="options" class="form-control">
          <option selected value="down">下游分析</option>
          <option value="up">上游分析</option>
          <option value="faclilities">上游关键设施查找</option>
        </select>
        <button id="excavation">选择分析管线</button>
        <button id="clear">清除结果</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDeviceList,queryMap,
  iconList
} from '@/api/components/supermap.js'
import Cookies from 'js-cookie'
import {
  getConfigKey
} from '@/api/system/config'

export default {
  name: 'supermap-2.5d',
  data() {
    return {
      showExcavation:false,//开挖图示
      showExcavationAnalyze:false,//填开挖分析图示
      showSoxSelection:false,//选择、框选
      showPipeBurstAnalysis:false,//爆管分析
      boxSelectionTooltip:null,//选择、框选Tooltip
      boxSelectionObjects : {//选择、框选元素
        isCallInMoving: false,
        selectedObjs: {},
        mode: 1
      },
      checkedCities:[],//选择的图层
      bindPopupHtml: null,
      mapshow: false,
      openZt: false,
      superMapRootUrl: null,
      viewer: null,
      scene: null,
      handler: null,
      pick: null,
      markerboxEntity: [], //地图落点实体
      connectBoxEntity: null, //地图线实体
      graphicsBoxEntity: null, //地图面实体
      graphicsBoxEntityList: [], //地图面实体
      markerboxEntityRadius: [], //地图落点实体
      connectBoxEntityTwo: null, //地图线实体
      /*************************原地图属性*********************/
      isEditableLayers: false, //绘图控件
      selOptV: 2, // 贴地量算
      clampMode: 1, // 空间模式
      handlerDis: null, // 距离
      handlerArea: null, // 面积
      handlerHeight: null, // 高度
      handlerExcavation: null, // 开挖
      handlerExcavationAnalyze: null, // 填开挖分析
      handlerBoxSelection: null, // 选择
      isObtainLaAndLon: false,
      /*************************原地图属性*********************/
      aac: null,
      queryParams: {
        name: null,
        mapData: null,
        mapName: null
      },
      showLayer: true,
      clickTime: new Date().getTime(),
      /*************************图层过滤属性*********************/
      layerList: [],
      dianshiqiang: null,
      longitude: null,
      latitude: null,
      userList: null,
      dataMap: {},
      dataNameMap: {},
      lonAndLat: {},
      mvtMap: {},
      queryList: {},
      vdivcesiumContainer: '',
      reportSource: '',
      eventStatusValue: '',
      cameraCode: '',
      cameraRadius: '',
      open_LifelineList_3D: [], //生命线图层控制图层
      open_LifelineList_2D: [], //生命线图层控制图层
      imageryProvider_hideList: [], //隐藏图层实体
      open_hideList: [], //隐藏图层实体
      openModel_hideList: [], //隐藏图层实体
      find_hideList: [], //隐藏图层实体
      findDisplayed_hideList: [], //隐藏图层实体
      /*************************图层过滤属性*********************/
      _click: null,
      _parameter: null,
      positioningEntity: null,
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    this.showLayer = this.showLayer != undefined ? this.showLayer : false
  },
  props: {
    // showLayer: [Boolean],
  },
  methods: {
    queryMap(deptId) {
      queryMap(deptId).then(req => {
          req = req.sort(function(a, b) {
            return a.sort - b.sort
          })
          this.onload(req)
        }
      )
    },
    onload(supermapUrls) {
      let that = this
      const withinData = supermapUrls
      //1.添加地形数据
      that.viewer = new SuperMap3D.Viewer('cesiumContainer', {
        //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
        terrainProvider: new SuperMap3D.SuperMapTerrainProvider({
          url: that.superMapRootUrl + '/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326',
          //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
          invisibility: true
        }),
        infoBox: false,
        navigation: false
      }, {
        contextOptions: {
          msaaLevel: 4,
          requestWebgl2: true
        },
        orderIndependentTranslucency: false
      })
      that.scene = that.viewer.scene
      that.viewer._Widget._creditContainer.style.display = "none" // 去掉超图logo水印
      //2.添加SuperMap iServer发布的影像服务
      withinData.push(
        {
          "searchValue": null,
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "params": {},
          "pageNum": null,
          "pageSize": null,
          "id": 1,
          "deptId": 365,
          "name": "底图",
          "note": "124.48751127336885,43.3790475087265",
          "path": "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
          "mapId": null,
          "visuId": 20,
          "parentId": null,
          "sort": 0,
          "deptName": null,
          "type": "addImagery",
          "scale": "350000",
          "coordinate": "124.48751127336885,43.3790475087265",
          "parentName": null,
          "menuName": null,
          "menuId": null
        }
      );
      that.addImageryProvider(withinData[0].path)
      let longitude = withinData[0].coordinate.split(',')[0]
      let latitude = withinData[0].coordinate.split(',')[1]
      let height = withinData[0].scale
      setTimeout(function() {
        for (let i = 1; i < withinData.length; i++) {
          setTimeout(() => {
            if (withinData[i].type == 'addImagery') {
              if(withinData[i].note == '图层过滤'){
                return
              }
              that.addImageryProvider(withinData[i].path)
            } else if (withinData[i].type == 'addVectorTilesMap') {
              that.addVectorTilesMap(withinData[i].path)
            } else if (withinData[i].type == 'open') {
              if(withinData[i].note == '图层过滤'){
                return
              }
              that.addOpen(withinData[i].sort, withinData[i].path)
            }else if (withinData[i].type == 'open_model') {
              if(withinData[i].note == '图层过滤'){
                return
              }
              that.addOpen_model(withinData[i].sort, withinData[i].path)
            } else if (withinData[i].type == 'find') {
              that.addFind(withinData[i].parentId, withinData[i].path)
            }else if (withinData[i].type == 'findDisplayed') {
              that.addFind(withinData[i].parentId, withinData[i].path)
            }
          }, 100 * i)
        }
      }, 2000)
      that.viewer.selectedEntityChanged.addEventListener(function(entity) {
        if (entity != undefined && Reflect.has(entity, 'layerID')) {
          that.queryParams.name = entity.pickResult[entity.layerID][0].feature.properties.Name
          that.queryParams.mapData = entity.pickResult[entity.layerID][0].feature.properties.SmUserID
          that.queryParams.mapName = entity.pickResult[entity.layerID][0].feature.properties.layer
          getDeviceList(that.queryParams).then(res => {
            that.openZt = true
            const treeLabels = [{
              'id': null,
              'labelCode': '999',
              'labelName': '电视墙',
              'cameraType': null,
              'parentLabelCode': ''
            }]
            const labelChannels = []
            for (let i in res.data) {
              if (res.data[i].cameraCode != null) {
                treeLabels.push({
                  'id': null,
                  'labelCode': res.data[i].cameraCode,
                  'labelName': res.data[i].cameraName,
                  'cameraType': '1',
                  'parentLabelCode': '999'
                })
                labelChannels.push({
                  'labelCode': res.data[i].cameraCode,
                  'channelDates': [{
                    'channelCode': res.data[i].cameraCode,
                    'channelName': res.data[i].cameraName,
                    'channelSn': null,
                    'cameraType': '1',
                    'online': '1',
                    'cameraCode': '1'
                  }]
                })
              }
            }
            that.dianshiqiang = [{
              'switchTab': '2',
              'treeLabels': treeLabels,
              'labelChannels': labelChannels
            }]
            that.longitude = res.data[0].longitude
            that.latitude = res.data[0].latitude
            that.userList = res.data[0].userList
            let html =
              '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>名称：' + res.data[0].name +
              '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>'
            for (let i in res.data[0].userList) {
              html += '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>' + res.data[0].userList[i].position + ':' + res.data[0].userList[i]
                  .name + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + (res.data[0].userList[i].phone ? res.data[0].userList[i].phone :
                  '') + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>'
            }
            html += '</div>'
            that.bindPopupHtml = html
            that.openTvwall()
          })
        }
      });
      that.handler = new SuperMap3D.ScreenSpaceEventHandler(that.scene.canvas);
      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-GH_tiedong-2/rest/realspace',undefined,{
      //   autoSetView : false      //不自动定位
      // })
      // that.scene.open('http://116.142.80.12:8090/iserver/services/3D-huashengranqi/rest/realspace',undefined,{
      //   autoSetView : true      //不自动定位
      // })
    //   that.scene.open('http://116.142.80.12:8090/iserver/services/3D-ganghuaranqi/rest/realspace',undefined,{
    //     autoSetView : false      //不自动定位
    //   })
    //   that.scene.open(' http://116.142.80.12:8090/iserver/services/3D-huashengranqi-2/rest/realspace',undefined,{
    //     autoSetView : false      //不自动定位
    //   })
    //   that.scene.open('http://116.142.80.12:8090/iserver/services/3D-PaiShui/rest/realspace',undefined,{
    //     autoSetView : false      //不自动定位
    //   })
    //   that.scene.open('http://116.142.80.12:8090/iserver/services/3D-reli_yici_erci_guanduan-2/rest/realspace',undefined,{
    //   autoSetView : false      //不自动定位
    // })
      that.flyTo(longitude, latitude, height)

      setTimeout(() => {
        //设置鼠标左键单击回调事件
        this.handler.setInputAction(function (e) {
          if (that.isObtainLaAndLon) {

            if (that.positioningEntity != null) {
              that.viewer.entities.remove(that.positioningEntity);
            }
            //首先移除之前添加的点
            // viewer.entities.removeAll();
            //获取点击位置笛卡尔坐标
            let position = that.scene.pickPosition(e.position);
            //将笛卡尔坐标转化为经纬度坐标
            let cartographic = SuperMap3D.Cartographic.fromCartesian(position);
            let longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
            let latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
            let height = cartographic.height;
            if (height < 0) {
              height = 0;
            }
            that.positioningEntity = that.viewer.entities.add({
              name: "",
              position: new SuperMap3D.Cartesian3.fromDegrees(longitude, latitude),
              billboard: {
                image: iconList['positioning'],
                width: 48,
                height: 48,
                heightReference: SuperMap3D.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: Number.POSITIVE_INFINITY
              },
            })

            that.$emit('setPositioning', longitude, latitude);
          }
        }, SuperMap3D.ScreenSpaceEventType.RIGHT_CLICK);
      },5000)

    },
    //初始化地图数据
    removeAllviewer(deptId, index) {
      if (index != -1) {
        $('#cesiumContainer').remove()
        $('#supermap3D').append(
          '<div id="cesiumContainer" style="width: 100%; height: 100%;background: none;" >\n' +
          '  </div>')
      }
      let that = this
      that.superMapInfo(deptId)
    },
    superMapInfo(index) {
      let deptId = index;
      getConfigKey('superMap.iServer').then(response => {
        this.superMapRootUrl = response.msg
        // this.queryMap(index)
        Cookies.set('superMap.iServer', response.msg)
        setTimeout(() =>
            this.queryVectorTilesMapList(deptId)  //切换地图
          ,1000
        )
      })
    },
    // ***************************生命线---图层过滤 开始************************************************
    addLifelineOpen(checkedCities) {
      this.checkedCities=checkedCities
      var checkedCities_2D=[]
      var checkedCities_3D=[]

      let List_2 = this.open_LifelineList_2D.map(item => item.url)
      List_2.forEach(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        this.viewer.imageryLayers.remove(this.selectMapObj_2D(url));
      });
      this.open_LifelineList_2D = []

      this.checkedCities.forEach(urlList => {
        if (!urlList.length) return;  // 如果没有 URL，跳过当前迭代

        //加载三维图层
          if(urlList[0]){
            if(!this.open_LifelineList_3D.some(item => item.url === urlList[0])){//查找已勾选的图层数组
              let obj = this.scene.open(this.superMapRootUrl + urlList[0],undefined,{
                autoSetView : false      //不自动定位
              })
              this.open_LifelineList_3D.push({
                url:  urlList[0],
                mapObj: obj
              })
            }else{
              SuperMap3D.when.all(this.selectMapObj_3D(urlList[0]), function (layers) {
                for (let layer of layers) {
                  layer.visible = true;
                }
              });
            }
            checkedCities_3D.push(urlList[0])
          }

          //加载二维图层
        if(urlList[1]){
            let obj = this.viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
              url:this.superMapRootUrl + urlList[1]
            }));
            this.open_LifelineList_2D.push({
              url:  urlList[1],
              mapObj: obj
            })
          checkedCities_2D.push(urlList[1])
        }
      });
      const urlsToRemove_2D = this.open_LifelineList_2D.map(item => item.url).filter(url => !checkedCities_2D.includes(url));//查找没勾选的图层数组2D
      const urlsToRemove_3D = this.open_LifelineList_3D.map(item => item.url).filter(url => !checkedCities_3D.includes(url));//查找没勾选的图层数组3D
      urlsToRemove_3D.forEach(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        SuperMap3D.when.all(this.selectMapObj_3D(url), function (layers) {
          for (let layer of layers) {
            layer.visible = false;
          }
        });
      });
      urlsToRemove_2D.forEach(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        this.viewer.imageryLayers.remove(this.selectMapObj_2D(url));
      });
      console.log('选中的url_2D:', checkedCities_2D);
      console.log('选中的url_3D:', checkedCities_3D);
      console.log('移除的url_2D:', urlsToRemove_2D);
      console.log('移除的url_3D:', urlsToRemove_3D);
      console.log('加载的url_2D:', this.open_LifelineList_2D);
      console.log('加载的url_3D:', this.open_LifelineList_3D);
    },
    selectMapObj_2D(url) {
      const item = this.open_LifelineList_2D.find(item => item.url === url);
      let mapObj= item ? item.mapObj : null;
      return mapObj
    },
    selectMapObj_3D(url) {
      const item = this.open_LifelineList_3D.find(item => item.url === url);
      let mapObj= item ? item.mapObj : null;
      return mapObj
    },
    // ***************************生命线---图层过滤 结束************************************************

    // ***************************图层过滤 开始************************************************
    reload(list) {
      this.removeAllMvt()
      this.removeAllImageryProvider_hide()
      this.removeAllOpen_hide()
      this.removeAllOpenModel_hide()
      this.layerList = list
      let that = this
      for (let i = 0; i < this.layerList.length; i++) {
        let data = this.queryList.filter(item => item.id == this.layerList[i]) [0]
        if (data.type == 'addImagery') {
          let imageryProvider = that.addImageryProvider(data.path)
          that.imageryProvider_hideList.push(imageryProvider)
        } else  if(data.type=='addVectorTilesMap'){
          for (let key in that.mvtMap) {
            if (data.id == key) {
              that.mvtMap[key].show = true
              let dat = this.queryList.filter(item => item.parentId == data.id)
              for (let j = 0; j < dat.length; j++) {
                let da = this.queryList.filter(item => item.parentId == dat[j].id)
                for (let k = 0; k < da.length; k++) {
                  for (let dataNameMapKey in that.dataNameMap) {
                    if (dataNameMapKey == da[k].id) {
                      this.dataMap[da[k].parentId].then(function() {
                        that.dataNameMap[dataNameMapKey].visible = true
                      })
                    }
                  }
                }
              }
            }
          }
        } else if (data.type == 'open') {
          let open = that.addOpen(data.id, data.path)
          that.open_hideList.push(open)
        } else if (data.type == 'open_model') {
          let openModel = that.addOpen_model(data.id, data.path)
          that.openModel_hideList.push(openModel)
        } else if (data.type == 'find') {
          let find = that.addFind(data.id, data.path)
          that.find_hideList.push(find)
        } else if (data.type == 'findDisplayed') {
          let findDisplayed = that.addFindDisplayed(data.id, data.path)
          that.findDisplayed_hideList.push(findDisplayed)
        }

      }
    },
    removeAllMvt() {
      let that = this
      // 移除方法，暂存：this.viewer.scene.removeVectorTilesMap(this.mvtMap.name);
      for (let i = 0; i < this.queryList.length; i++) {
        let data = this.queryList[i]
        for (let key in that.mvtMap) {
          if (data.id == key) {
            that.mvtMap[key].show = false
            let dat = this.queryList.filter(item => item.parentId == data.id)
            for (let j = 0; j < dat.length; j++) {
              if (dat[j].parentId != null) {
                let da = this.queryList.filter(item => item.parentId == dat[j].id)
                for (let k = 0; k < da.length; k++) {
                  for (let dataNameMapKey in that.dataNameMap) {
                    this.dataMap[da[k].parentId].then(function() {
                      that.dataNameMap[dataNameMapKey].visible = false
                    })
                  }
                }
              }
            }
          }
        }
      }
    },
    removeAllImageryProvider_hide() {
      let that = this
      if (that.imageryProvider_hideList != null && that.imageryProvider_hideList.length > 0) {
        for (let i = 0; i < that.imageryProvider_hideList.length; i++) {
          that.viewer.imageryLayers.remove(that.imageryProvider_hideList[i])
        }
        that.imageryProvider_hideList = []
      }
    },
    removeAllOpen_hide() {
      let that = this
      if (that.open_hideList != null && that.open_hideList.length > 0) {
        for (let i = 0; i < that.open_hideList.length; i++) {
          SuperMap3D.when.all(that.open_hideList[i], function (layers) {
            for (let layer of layers) {
              // that.scene.layers.remove(layer.name);
              layer.visible = false;
            }
          });
        }
        // that.open_hideList = []
      }
    },
    removeAllOpenModel_hide() {
      let that = this
      if (that.openModel_hideList != null && that.openModel_hideList.length > 0) {
        for (let i = 0; i < that.openModel_hideList.length; i++) {
          SuperMap3D.when.all(that.openModel_hideList[i], function (layers) {
            const reversedLayers = [...layers].reverse();
            for (let layer of reversedLayers) {
              that.scene.layers.remove(layer.name);
              that.viewer.imageryLayers.remove(layer)
            }
          });
        }
        that.openModel_hideList = []
      }
    },
    addFindDisplayed(id, uri) {
      let that = this
      let data = that.queryList.filter(item => item.id == id)[0]
      that.dataMap[data.parentId].then(function(layers) {
        let obj = that.scene.layers.find(uri) //区县文字图层
        //加载后隐藏
        obj.visible = false
        // //关闭避让
        obj.isOverlapDisplayed = true
        that.dataNameMap[id] = obj
        return obj
      })
    },
    addFind(id, uri){
      let that = this;
      let data = that.queryList.filter(item => item.id === id)
      if(data.length === 0) {
        return;
      }
      that.dataMap[data[0].parentId].then(function(layers) {
        let obj = that.scene.layers.find(uri) //区县文字图层
        return obj
      })
    },
    addOpen_model(sort, uri) {
      let that = this
      // that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri)
      let obj = that.dataMap[sort] = that.scene.open(that.superMapRootUrl + uri,undefined,{
        autoSetView : false      //不自动定位
      })
      //开始加载专题图等数据，8秒后开始执行
      setTimeout(function () {
        /**
         * @param dom ScreenSpaceEventHandler操作的dom节点，画的框会成为其子节点
         */
        function DrawRectHandler(dom) {
          let startPoint,
            self = this,
            isShiftAndLeftDown = false,
            handler = new SuperMap3D.ScreenSpaceEventHandler(dom),
            removalFunctions = [],
            rect = new Rect(dom)
          this.isDestroyed = false
          this.activeEvt = new SuperMap3D.Event()
          this.cancelEvt = new SuperMap3D.Event()
          this.movingEvt = new SuperMap3D.Event()
          this.drawEvt = new SuperMap3D.Event()

          // div框
          function Rect(parentDom) {
            this.rect = document.createElement('div')
            this.rect.style.visibility = 'hidden'
            parentDom.appendChild(this.rect)
            this.leftTopPoint = new SuperMap3D.Cartesian2()
            this.rightBottomPoint = new SuperMap3D.Cartesian2()
            Rect.prototype.setPosition = function (startPoint, endPosition) {
              let w = endPosition.x - startPoint.x
              let h = endPosition.y - startPoint.y
              let left, top, width, height
              if (w < 0) {
                left = endPosition.x
                width = -w
              } else {
                left = startPoint.x
                width = w
              }
              if (h < 0) {
                top = endPosition.y
                height = -h
              } else {
                top = startPoint.y
                height = h
              }
              this.leftTopPoint = new SuperMap3D.Cartesian2(left, top)
              this.rightBottomPoint = new SuperMap3D.Cartesian2(left + width, top + height)
              this.rect.style = `position:fixed;top:${top}px;left:${left}px;width:${width}px;height:${height}px;border:2px dashed #333;`
              this.setVisible(true)
            }
            Rect.prototype.setVisible = function (isVisible) {
              this.rect.style.visibility = isVisible ? 'visible' : 'hidden'
            }
            Rect.prototype.getRectPoint = function () {
              return {
                leftTopPoint: this.leftTopPoint,
                rightBottomPoint: this.rightBottomPoint
              }
            }
            Rect.prototype.destroy = function () {
              dom.removeChild(rect)
              this.rect = null
            }
          }

          // canvas框
          function RectCanvas(parentDom) {
            let canvas = document.createElement('canvas'),
              ctx = canvas.getContext('2d')
            this.canvas = canvas
            canvas.width = parentDom.clientWidth
            canvas.height = parentDom.clientHeight
            canvas.style = 'position:fixed;top:0;left:0;z-index:-1'
            parentDom.appendChild(canvas)
            this.leftTopPoint = new SuperMap3D.Cartesian2()
            this.rightBottomPoint = new SuperMap3D.Cartesian2()
            RectCanvas.prototype.setPosition = function (startPoint, endPosition) {
              let w = endPosition.x - startPoint.x
              let h = endPosition.y - startPoint.y
              let left, top, width, height
              if (w < 0) {
                left = endPosition.x
                width = -w
              } else {
                left = startPoint.x
                width = w
              }
              if (h < 0) {
                top = endPosition.y
                height = -h
              } else {
                top = startPoint.y
                height = h
              }
              this.leftTopPoint = new SuperMap3D.Cartesian2(left, top)
              this.rightBottomPoint = new SuperMap3D.Cartesian2(left + width, top + height)
              ctx.clearRect(0, 0, canvas.width, canvas.height)
              ctx.strokeRect(left, top, width, height)
            }
            RectCanvas.prototype.setVisible = function (isVisible) {
              if (isVisible) {
                canvas.style.zIndex = '999'
              } else {
                canvas.style.zIndex = '-1'
              }
            }
            RectCanvas.prototype.getRectPoint = function () {
              return {
                leftTopPoint: this.leftTopPoint,
                rightBottomPoint: this.rightBottomPoint
              }
            }
            RectCanvas.prototype.destroy = function () {
              dom.removeChild(canvas)
              ctx = null
              this.canvas = null
            }
          }

          // 开关相机控制
          function setCameraCtrl(isActive) {
            let cameraCtrl = that.scene.screenSpaceCameraController
            cameraCtrl.enableRotate = isActive
            cameraCtrl.enableTranslate = isActive
            cameraCtrl.enableZoom = isActive
            cameraCtrl.enableTilt = isActive
            cameraCtrl.enableLook = isActive
          }

          // 鼠标cursor控制
          function toggleCursorStyle(isActive) {
            if (isActive) {
              that.viewer.enableCursorStyle = false
              that.viewer._element.style.cursor = ''
              dom.style.cursor = 'default'
            } else {
              that.viewer.enableCursorStyle = true
            }
          }

          // 初始化事件处理
          function initEvent() {
            handler.setInputAction(function (e) {
              isShiftAndLeftDown = true
              startPoint = new SuperMap3D.Cartesian2(e.position.x, e.position.y)
            }, SuperMap3D.ScreenSpaceEventType.LEFT_DOWN, SuperMap3D.KeyboardEventModifier.SHIFT)
            // shift松开时，始终将rect隐藏
            let keyUpFunction = function (e) {
              self.cancelEvt.raiseEvent()
              if (e.key == 'Shift' && isShiftAndLeftDown && !self.isDestroyed) {
                isShiftAndLeftDown = false
                rect.setVisible(false)
              }
            }

            document.addEventListener('keyup', keyUpFunction)
            removalFunctions.push(function () {
              document.removeEventListener('keyup', keyUpFunction)
            })
            handler.setInputAction(function (e) {
              let endPosition = e.endPosition
              self.activeEvt.raiseEvent(endPosition)
              if (!isShiftAndLeftDown) return
              rect.setPosition(startPoint, endPosition)
              rect.setVisible(true)
              self.movingEvt.raiseEvent(rect.getRectPoint())
            }, SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE, SuperMap3D.KeyboardEventModifier.SHIFT)
            handler.setInputAction(function (e) {
              isShiftAndLeftDown = false
              rect.setVisible(false)
              self.drawEvt.raiseEvent(rect.getRectPoint())
            }, SuperMap3D.ScreenSpaceEventType.LEFT_UP, SuperMap3D.KeyboardEventModifier.SHIFT)
            handler.setInputAction(function (e) {
              isShiftAndLeftDown = false
              rect.setVisible(false)
            }, SuperMap3D.ScreenSpaceEventType.LEFT_UP)
          }

          // 移除事件监听
          function removeEvent() {
            handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOWN, SuperMap3D.KeyboardEventModifier.SHIFT)
            handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE, SuperMap3D.KeyboardEventModifier.SHIFT)
            handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP, SuperMap3D.KeyboardEventModifier.SHIFT)
            handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP)
          }

          DrawRectHandler.prototype.destroy = function () {
            if (this.isDestroyed) return
            setCameraCtrl(true)
            removeEvent()
            for (let i = 0, j = removalFunctions.length; i < j; i++) {
              removalFunctions[i]()
            }
            handler.destroy()
            rect.destroy()
            rect = null
            this.isDestroyed = true
          }
          DrawRectHandler.prototype.activate = function () {
            if (this.isDestroyed) return
            setCameraCtrl(false)
            toggleCursorStyle(true)
            initEvent()
          }
          DrawRectHandler.prototype.deactivate = function () {
            if (this.isDestroyed) return
            setCameraCtrl(true)
            toggleCursorStyle(false)
            removeEvent()
          }
        }

        new SuperMap3D.when(that.dataMap[sort], function (layers) {
          for (let layer of layers) {
            layer.selectColorType = 1
            that.selectedObjs[layer.name] = []
            that.resetIds[layer.name] = []
          }
          let drawRect = that.drawRect = new DrawRectHandler(document.body)
          // res为框的左上点与右下点的相对于给定dom节点的坐标
          drawRect.drawEvt.addEventListener(function (res) {
            for (let layer of layers) {
              layer.selectColorType = 1
            }
            that.tooltip = false
            let selectedColor = new SuperMap3D.Color(1, 0, 0, 1)
            that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
            let objs = that.scene.getPickRectIDs()
            let selectedObjs = that.selectedObjs
            let resetIds = that.resetIds
            for (let k in selectedObjs) {
              if (selectedObjs[k].length > 0) {
                that.scene.layers.find(k).removeObjsColor(selectedObjs[k])
              }
            }
            if (that.kuangxuan) {
              for (let layer of layers) {
                let layerName = layer.name
                if (layerName === undefined) break
                let layerSlt = objs.find(e => e.layerName === layerName)
                let sltIds = (layerSlt && layerSlt.ids) || []
                resetIds[layerName] = selectedObjs[layerName]
                selectedObjs[layerName] = sltIds
                that.$parent.$refs.ldTk.FrameSelectedData(sltIds)
                that.$parent.$refs.ldTk.allLouDongDialog = true
                layer.setObjsColor(selectedObjs[layerName], selectedColor)
              }
            }
          })

          drawRect.movingEvt.addEventListener(function (res) {
            that.tooltip = true
            if (that.kuangxuan) {
              that.tooltipText = "松开鼠标左键以结束选择区域"
              for (let layer of layers) {
                layer.selectColorType = 1
              }
              that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint)
            } else {
              that.tooltipText = "请点击框选"
            }
          })
          drawRect.activeEvt.addEventListener(function (position) {
            that.tooltip = true
            if (that.kuangxuan) {
              that.tooltipText = "松开鼠标左键以结束选择区域"
            } else {
              that.tooltipText = "请点击框选"
            }
          })
          drawRect.cancelEvt.addEventListener(function () {
            that.tooltip = false
          })

          let canvas = document.querySelector('div.cesium-widget canvas')
          canvas.setAttribute('tabindex', '0') // needed to put focus on the canvas
          canvas.focus()
          document.addEventListener('keydown', function (e) {
            if (e.key === 'Shift') {
              drawRect.activate()
            }
          })
          document.addEventListener('keyup', function (e) {
            if (e.key === 'Shift') {
              drawRect.deactivate()
            }
          })
        }, function () {
          // let title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？'
          // widget.showErrorPanel(title, undefined, e)
        }).then(function () {

        }, function (e) {
          console.log(e)
        })
      }, 3000);
      return obj
    },
    addOpen(id, uri) {
      let that = this;
      let obj = that.scene.open(that.superMapRootUrl + uri)
      // {
      //   autoSetView : false      //不自动定位
      // },
      that.dataMap[id] = obj
      return obj;
    },
    addVectorTilesMap(uri) {
      let that = this
      that.scene.addVectorTilesMap({
        url: that.superMapRootUrl + uri,
        canvasWidth: 512,
        name: 'mvt_map3',
        viewer: that.viewer,
        show: true
      })
    },
    addImageryProvider(uri){
      let that = this;
      let obj = that.viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
        url:that.superMapRootUrl + uri
      }));
      return obj;
    },
    // ************************************************************************图层过滤 结束***********************************************************************************

    // 清除测距、测面、测高
    closeMeasuringAll() {
      if (this.handlerDis != null) {
        this.handlerDis.clear()
      }
      if (this.handlerArea != null) {
        this.handlerArea.clear()
      }
      if (this.handlerHeight != null) {
        this.handlerHeight.clear()
      }
    },
    // 清除开挖，填开挖分析
    closeExcavationAll() {
      if (this.handlerExcavation != null) {
        this.handlerExcavation.deactivate();
        this.handlerExcavation.clear();
        this.viewer.scene.globe.removeAllExtractRegion();
        this.showExcavation = false//开挖图示
      }
      if (this.handlerExcavationAnalyze != null) {
        this.viewer.scene.globe.removeAllModifyRegion();
        document.getElementById("cutarea").value = "";
        document.getElementById("cutVolume").value = "";
        document.getElementById("fillarea").value = "";
        document.getElementById("fillVolume").value = "";
        document.getElementById("remainderArea").value = "";
        this.handlerExcavationAnalyze.clear();
        this.showExcavationAnalyze = false//开挖分析图示
      }
    },
    //  测量距离
    choseMeasuringDistance() {
      let that = this
      if (that.handlerDis != null) {
        that.handlerDis.deactivate()
        that.handlerDis.clear()
      }
      //初始化测量距离
      that.handlerDis = new SuperMap3D.MeasureHandler(that.viewer, SuperMap3D.MeasureMode.Distance, that.clampMode)
      that.handlerDis.clampMode = 1
      //注册测距功能事件
      that.handlerDis.measureEvt.addEventListener(function(result) {
        let dis = Number(result.distance)
        let selOptV = that.selOptV
        if (selOptV == 3 || selOptV == 4) {
          dis = Number(calcClampDistance(positions))
        }

        let distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm'
        that.handlerDis.disLabel.text = '距离:' + distance

      })
      that.handlerDis.activeEvt.addEventListener(function(isActive) {
        if (isActive == true) {
          that.viewer.enableCursorStyle = false
          that.viewer._element.style.cursor = ''
          $('#super2').removeClass('measureCur').addClass('measureCur')
          that.viewer.scene.pickPointEnabled = false
        } else {
          that.viewer.enableCursorStyle = true
          $('#super2').removeClass('measureCur')
          that.viewer.scene.pickPointEnabled = false
        }
      })
      that.handlerDis.activate()
    },
    // 测量面积
    choseMeasuringArea() {
      let that = this
      if (that.handlerArea != null) {
        // that.handlerArea.deactivate()
        that.handlerArea.clear()
      }

      //初始化测量面积
      that.handlerArea = new SuperMap3D.MeasureHandler(that.viewer, SuperMap3D.MeasureMode.Area, that.clampMode)

      that.handlerArea.clampMode = 1
      that.handlerArea.measureEvt.addEventListener(function(result) {
        let mj = Number(result.area)
        let area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
        that.handlerArea.areaLabel.text = '面积:' + area
      })
      that.handlerArea.activeEvt.addEventListener(function(isActive) {
        if (isActive == true) {
          that.viewer.enableCursorStyle = false
          that.viewer._element.style.cursor = ''
          $('#super2').removeClass('measureCur').addClass('measureCur')
          that.viewer.scene.pickPointEnabled = false
        } else {
          that.viewer.enableCursorStyle = true
          that.viewer._element.style.cursor = ''
          $('#super2').removeClass('measureCur')
          that.viewer.scene.pickPointEnabled = false
        }
      })
      that.handlerArea.activate()
    },
    // 测量高度
    choseMeasuringHeight() {
      let that = this
      if (that.handlerHeight != null) {
        // that.handlerHeight.deactivate()
        that.handlerHeight.clear()
      }
      //初始化测量高度
      that.handlerHeight = new SuperMap3D.MeasureHandler(that.viewer, SuperMap3D.MeasureMode.DVH);
      that.handlerHeight.measureEvt.addEventListener(function (result) {
        let distance = result.distance > 1000 ? (result.distance / 1000).toFixed(2) + 'km' : result.distance + 'm';
        let vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000).toFixed(2) + 'km' : result.verticalHeight + 'm';
        let hDistance = result.horizontalDistance > 1000 ? (result.horizontalDistance / 1000).toFixed(2) + 'km' : result.horizontalDistance + 'm';
        that.handlerHeight.disLabel.text = '空间距离:' + distance;
        that.handlerHeight.vLabel.text = '垂直高度:' + vHeight;
        that.handlerHeight.hLabel.text = '水平距离:' + hDistance;
        //实时等高线显示
        lineHeight = Number(result.endHeight);
        if (isShowLine) updateContourLine(lineHeight)
      });

      that.handlerHeight.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
          that.viewer.enableCursorStyle = false;
          that.viewer._element.style.cursor = '';
          $('body').removeClass('measureCur').addClass('measureCur');
          that.viewer.scene.pickPointEnabled = pickPointEnabled;
        }
        else {
          that.viewer.enableCursorStyle = true;
          $('body').removeClass('measureCur');
          that.viewer.scene.pickPointEnabled = false;
        }
      });
      that.handlerHeight.activate()
    },
    //开挖
    excavation(){
      let that = this
      that.showExcavation=true
      setTimeout(function() {
        let tooltip = createTooltip(document.body);
        that.handlerExcavation = new SuperMap3D.DrawHandler(that.viewer, SuperMap3D.DrawMode.Polygon);
        that.handlerExcavation.activeEvt.addEventListener(function(isActive) {
          if(isActive == true) {
            that.viewer.enableCursorStyle = false;
            that.viewer._element.style.cursor = '';
            $('body').removeClass('drawCur').addClass('drawCur');
          } else {
            that.viewer.enableCursorStyle = true;
            $('body').removeClass('drawCur');
          }
        });
        that.handlerExcavation.movingEvt.addEventListener(function(windowPosition) {
          if(that.handlerExcavation.isDrawing) {
            tooltip.showAt(windowPosition, '<p>绘制多边形，</p><p>右键结束绘制.</p>');
          } else {
            tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
          }
        });
        that.handlerExcavation.drawEvt.addEventListener(function(res) {
          let positions = [].concat(res.object.positions);
          let positionsDegrees = [];
          for(let i = 0; i < positions.length; i++) {
            let cartographic = SuperMap3D.Cartographic.fromCartesian(positions[i]);
            let lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
            let lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
            let h = cartographic.height;
            positionsDegrees = positionsDegrees.concat([lon, lat, h]);
          }
          that.extract(positionsDegrees);
          that.handlerExcavation.clear();
          that.handlerExcavation.deactivate();
          tooltip.setVisible(false);
        })
        //清除剖切结果
        $('#clear').click(function() {
          tooltip.setVisible(false);
          that.handlerExcavation.deactivate();
          that.handlerExcavation.clear();
          that.viewer.scene.globe.removeAllExtractRegion();
        });
        $("#dig").click(function() {
          that.handlerExcavation.activate();
        });
        $("#automaticDig").click(function() {
          that.automaticExcavationCalculation(124.3486419476308,43.168731902748924);
        });

        $('#loadingbar').remove();
      }, 1000)
    },
    //自动挖选点
    // automaticExcavation(){
    //   this.setIsObtainLaAndLon(true)
    // },
    //自动挖选计算
    automaticExcavationCalculation(longitude, latitude) {
      // 地球半径，单位：米
      const EARTH_RADIUS = 6371000;

      // 将经纬度转换为弧度
      const latRad = latitude * Math.PI / 180;
      const lonRad = longitude * Math.PI / 180;

      // 矩形半边长，单位：米
      const halfSide = 2;

      // 计算经度和纬度的变化量（近似）
      const dLat = halfSide / EARTH_RADIUS;
      const dLon = halfSide / (EARTH_RADIUS * Math.cos(latRad));

      // 将弧度转换回角度
      const dLatDeg = dLat * 180 / Math.PI;
      const dLonDeg = dLon * 180 / Math.PI;

      const points = [
        longitude - dLonDeg,
        latitude + dLatDeg,
        0,
        longitude + dLonDeg,
        latitude + dLatDeg,
        0,
        longitude + dLonDeg,
        latitude - dLatDeg,
        0,
        longitude - dLonDeg,
        latitude - dLatDeg,
        0
      ]
      // // 计算四个角点的经纬度
      // const points = {
      //   // 左上角
      //   topLeft: {
      //     latitude: latitude + dLatDeg,
      //     longitude: longitude - dLonDeg
      //   },
      //   // 右上角
      //   topRight: {
      //     latitude: latitude + dLatDeg,
      //     longitude: longitude + dLonDeg
      //   },
      //   // 左下角
      //   bottomLeft: {
      //     latitude: latitude - dLatDeg,
      //     longitude: longitude - dLonDeg
      //   },
      //   // 右下角
      //   bottomRight: {
      //     latitude: latitude - dLatDeg,
      //     longitude: longitude + dLonDeg
      //   }
      // }
      this.extract(points);
    },
    //地形抽出部分
    extract(positions) {
      this.viewer.scene.globe.removeAllExtractRegion();
      this.viewer.scene.globe.addExtractRegion({
        name: 'extract', //名称
        position: positions, //区域
        height: $('#depth').val(), //开挖深度
        transparent: false, //封边是否透明
        extractHeight: Number($('#moveHeight').val()), //抽出高度
        granularity: 1 //精度
      });
    },
    //填开挖分析
    excavationAnalyze(){
      let that = this
      that.showExcavationAnalyze=true
      setTimeout(function() {
        let tooltip = createTooltip(document.body);
        that.handlerExcavationAnalyze = new SuperMap3D.DrawHandler(that.viewer, SuperMap3D.DrawMode.Polygon, that.clampMode);

        that.handlerExcavationAnalyze.activeEvt.addEventListener(function (isActive) {
          if (isActive == true) {
            that.viewer.enableCursorStyle = false;
            that.viewer._element.style.cursor = '';
            $('body').removeClass('drawCur').addClass('drawCur');
          } else {
            that.viewer.enableCursorStyle = true;
            $('body').removeClass('drawCur');
          }
        });

        that.handlerExcavationAnalyze.movingEvt.addEventListener(function (windowPosition) {
          if (that.handlerExcavationAnalyze.isDrawing) {
            tooltip.showAt(windowPosition, '<p>点击确定多边形中间点</p><p>右键单击结束绘制</p>');
          } else {
            tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
          }
        });

        that.handlerExcavationAnalyze.drawEvt.addEventListener(function (result) {
          that.handlerExcavationAnalyze.polygon.show = false;
          // that.handlerExcavationAnalyze.polyline.show = false;
          that.handlerExcavationAnalyze.deactivate();
          tooltip.setVisible(false);

          let dep = document.getElementById("depth").value;

          let array = [].concat(result.object.positions);
          let positions = [];
          let positionsii = [];
          for (let i = 0, len = array.length; i < len; i++) {
            let cartographic = SuperMap3D.Cartographic.fromCartesian(array[i]);
            let longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
            let latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
            let h = cartographic.height;
            if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {

              positions.push(longitude);
              positions.push(latitude);
              positions.push(parseInt(dep));

              positionsii.push({
                x: longitude,
                y: latitude
              });
            }
          }

          //此处用的地形修改 而不是地形开挖
          that.viewer.scene.globe.removeAllModifyRegion();
          that.viewer.scene.globe.addModifyRegion({
            name: 'ggg',
            position: positions
          });

          let length = [];
          length.push(positionsii.length);

          //需要在此 动态构造一个 REGION类型的对象
          let geometry = {
            "id": 23,
            "parts": length,
            "points": positionsii,
            "style": null,
            "type": "REGION"
          };


          let queryObj = {
            "cutFillType": "REGIONANDALTITUDE",
            "baseAltitude": dep,
            "region": geometry,
            "resultDataset": "result",
            "buildPyramid": true,
            "deleteExistResultDataset": true
          };
          let queryObjJSON = JSON.stringify(queryObj);
          $.ajax({
            type: 'post',
            url: "http://www.supermapol.com/realspace/services/spatialAnalysis-dxyx_ios/restjsr/spatialanalyst/datasets/DEM@%E5%9B%9B%E5%A7%91%E5%A8%98%E5%B1%B1/terraincalculation/cutfill.json?returnContent=true",
            data: queryObjJSON,
            success: function (data) {
              console.log(data);
              // let resultObj = JSON.parse(data);
              let resultObj = data;

              document.getElementById("cutarea").value = resultObj.cutArea;
              document.getElementById("cutVolume").value = resultObj.cutVolume;
              document.getElementById("fillarea").value = resultObj.fillArea;
              document.getElementById("fillVolume").value = resultObj.fillVolume;
              document.getElementById("remainderArea").value = resultObj.remainderArea;
            }
          });

        });

        document.getElementById("filladd").onclick = function () {
          that.handlerExcavationAnalyze.activate();
        };

        document.getElementById("fillclear").onclick = function () {
          that.viewer.scene.globe.removeAllModifyRegion();
          document.getElementById("cutarea").value = "";
          document.getElementById("cutVolume").value = "";
          document.getElementById("fillarea").value = "";
          document.getElementById("fillVolume").value = "";
          document.getElementById("remainderArea").value = "";
          that.handlerExcavationAnalyze.clear();
        };

        $('#excavationAnalyze').show();
        $('#loadingbar').remove();


        if (!that.viewer.scene.pickPositionSupported) {
          alert('不支持深度拾取,无法进行鼠标交互绘制！');
        }
      }, 1000)
    },
    //选择、框选
    boxSelection(){
      let that=this;
      let layersAll = [];
      that.checkedCities.forEach(urlList => {
        if (!urlList.length) return;  // 如果没有 URL，跳过当前迭代  // 如果没有 URL，跳过当前迭代
        SuperMap3D.when.all(that.selectMapObj_3D(urlList[0]), function (layers) {
          layersAll.push(layers)
          if (layersAll.length === 0) {
            return
          }else{
            that.showSoxSelection= true
            /**
             * @param dom ScreenSpaceEventHandler操作的dom节点，画的框会成为其子节点
             */
            function DrawRectHandler(dom) {
              let startPoint,
                self = this,
                isShiftAndLeftDown = false,
                removalFunctions = [],
                rect = new Rect(dom)

              that.handlerBoxSelection = new SuperMap3D.ScreenSpaceEventHandler(dom)
              this.isDestroyed = false
              this.activeEvt = new SuperMap3D.Event()
              this.cancelEvt = new SuperMap3D.Event()
              this.movingEvt = new SuperMap3D.Event()
              this.drawEvt = new SuperMap3D.Event()

              // div框
              function Rect(parentDom) {
                this.rect = document.createElement('div')
                this.rect.style.visibility = 'hidden'
                parentDom.appendChild(this.rect)
                this.leftTopPoint = new SuperMap3D.Cartesian2()
                this.rightBottomPoint = new SuperMap3D.Cartesian2()
                Rect.prototype.setPosition = function (startPoint, endPosition) {
                  let w = endPosition.x - startPoint.x
                  let h = endPosition.y - startPoint.y
                  let left, top, width, height
                  if (w < 0) {
                    left = endPosition.x
                    width = -w
                  } else {
                    left = startPoint.x
                    width = w
                  }
                  if (h < 0) {
                    top = endPosition.y
                    height = -h
                  } else {
                    top = startPoint.y
                    height = h
                  }
                  this.leftTopPoint = new SuperMap3D.Cartesian2(left, top)
                  this.rightBottomPoint = new SuperMap3D.Cartesian2(left + width, top + height)
                  this.rect.style = `position:fixed;top:${top}px;left:${left}px;width:${width}px;height:${height}px;border:2px dashed #333;`
                  this.setVisible(true)
                }
                Rect.prototype.setVisible = function (isVisible) {
                  this.rect.style.visibility = isVisible ? 'visible' : 'hidden'
                }
                Rect.prototype.getRectPoint = function () {
                  return {
                    leftTopPoint: this.leftTopPoint,
                    rightBottomPoint: this.rightBottomPoint
                  }
                }
                Rect.prototype.destroy = function () {
                  dom.removeChild(rect)
                  this.rect = null
                }
              }

              // canvas框
              function RectCanvas(parentDom) {
                let canvas = document.createElement('canvas'),
                  ctx = canvas.getContext('2d')
                this.canvas = canvas
                canvas.width = parentDom.clientWidth
                canvas.height = parentDom.clientHeight
                canvas.style = 'position:fixed;top:0;left:0;z-index:-1'
                parentDom.appendChild(canvas)
                this.leftTopPoint = new SuperMap3D.Cartesian2()
                this.rightBottomPoint = new SuperMap3D.Cartesian2()
                RectCanvas.prototype.setPosition = function (startPoint, endPosition) {
                  let w = endPosition.x - startPoint.x
                  let h = endPosition.y - startPoint.y
                  let left, top, width, height
                  if (w < 0) {
                    left = endPosition.x
                    width = -w
                  } else {
                    left = startPoint.x
                    width = w
                  }
                  if (h < 0) {
                    top = endPosition.y
                    height = -h
                  } else {
                    top = startPoint.y
                    height = h
                  }
                  this.leftTopPoint = new SuperMap3D.Cartesian2(left, top)
                  this.rightBottomPoint = new SuperMap3D.Cartesian2(left + width, top + height)
                  ctx.clearRect(0, 0, canvas.width, canvas.height)
                  ctx.strokeRect(left, top, width, height)
                }
                RectCanvas.prototype.setVisible = function (isVisible) {
                  if (isVisible) {
                    canvas.style.zIndex = '999'
                  } else {
                    canvas.style.zIndex = '-1'
                  }
                }
                RectCanvas.prototype.getRectPoint = function () {
                  return {
                    leftTopPoint: this.leftTopPoint,
                    rightBottomPoint: this.rightBottomPoint
                  }
                }
                RectCanvas.prototype.destroy = function () {
                  dom.removeChild(canvas)
                  ctx = null
                  this.canvas = null
                }
              }

              // 开关相机控制
              function setCameraCtrl(isActive) {
                let cameraCtrl = that.scene.screenSpaceCameraController
                cameraCtrl.enableRotate = isActive
                cameraCtrl.enableTranslate = isActive
                cameraCtrl.enableZoom = isActive
                cameraCtrl.enableTilt = isActive
                cameraCtrl.enableLook = isActive
              }

              // 鼠标cursor控制
              function toggleCursorStyle(isActive) {
                if (isActive) {
                  that.viewer.enableCursorStyle = false
                  that.viewer._element.style.cursor = ''
                  dom.style.cursor = 'default'
                } else {
                  that.viewer.enableCursorStyle = true
                }
              }

              // 初始化事件处理
              function initEvent() {
                that.handlerBoxSelection.setInputAction(function (e) {
                  isShiftAndLeftDown = true
                  startPoint = new SuperMap3D.Cartesian2(e.position.x, e.position.y)
                }, SuperMap3D.ScreenSpaceEventType.LEFT_DOWN, SuperMap3D.KeyboardEventModifier.SHIFT)
                // shift松开时，始终将rect隐藏
                let keyUpFunction = function (e) {
                  self.cancelEvt.raiseEvent()
                  if (e.key == 'Shift' && isShiftAndLeftDown && !self.isDestroyed) {
                    isShiftAndLeftDown = false
                    rect.setVisible(false)
                  }
                }

                document.addEventListener('keyup', keyUpFunction)
                removalFunctions.push(function () {
                  document.removeEventListener('keyup', keyUpFunction)
                })
                that.handlerBoxSelection.setInputAction(function (e) {
                  let endPosition = e.endPosition
                  self.activeEvt.raiseEvent(endPosition)
                  if (!isShiftAndLeftDown) return
                  rect.setPosition(startPoint, endPosition)
                  rect.setVisible(true)
                  self.movingEvt.raiseEvent(rect.getRectPoint())
                }, SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE, SuperMap3D.KeyboardEventModifier.SHIFT)
                that.handlerBoxSelection.setInputAction(function (e) {
                  isShiftAndLeftDown = false
                  rect.setVisible(false)
                  self.drawEvt.raiseEvent(rect.getRectPoint())
                }, SuperMap3D.ScreenSpaceEventType.LEFT_UP, SuperMap3D.KeyboardEventModifier.SHIFT)
                that.handlerBoxSelection.setInputAction(function (e) {
                  isShiftAndLeftDown = false
                  rect.setVisible(false)
                }, SuperMap3D.ScreenSpaceEventType.LEFT_UP)
              }

              // 移除事件监听
              function removeEvent() {
                that.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOWN, SuperMap3D.KeyboardEventModifier.SHIFT)
                that.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE, SuperMap3D.KeyboardEventModifier.SHIFT)
                that.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP, SuperMap3D.KeyboardEventModifier.SHIFT)
                that.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP)
              }

              DrawRectHandler.prototype.destroy = function () {
                if (this.isDestroyed) return
                setCameraCtrl(true)
                removeEvent()
                for (let i = 0, j = removalFunctions.length; i < j; i++) {
                  removalFunctions[i]()
                }
                that.handlerBoxSelection.destroy()
                rect.destroy()
                rect = null
                this.isDestroyed = true
              }
              DrawRectHandler.prototype.activate = function () {
                if (this.isDestroyed) return
                setCameraCtrl(false)
                toggleCursorStyle(true)
                initEvent()
              }
              DrawRectHandler.prototype.deactivate = function () {
                if (this.isDestroyed) return
                setCameraCtrl(true)
                toggleCursorStyle(false)
                that.boxSelectionTooltip.setVisible(false)
                removeEvent()
              }
            }
            // div框
            function Rect(parentDom) {
              this.rect = document.createElement('div')
              this.rect.style.visibility = 'hidden'
              parentDom.appendChild(this.rect)
              this.leftTopPoint = new SuperMap3D.Cartesian2()
              this.rightBottomPoint = new SuperMap3D.Cartesian2()
              Rect.prototype.setPosition = function (startPoint, endPosition) {
                let w = endPosition.x - startPoint.x
                let h = endPosition.y - startPoint.y
                let left, top, width, height
                if (w < 0) {
                  left = endPosition.x
                  width = -w
                } else {
                  left = startPoint.x
                  width = w
                }
                if (h < 0) {
                  top = endPosition.y
                  height = -h
                } else {
                  top = startPoint.y
                  height = h
                }
                this.leftTopPoint = new SuperMap3D.Cartesian2(left, top)
                this.rightBottomPoint = new SuperMap3D.Cartesian2(left + width, top + height)
                this.rect.style = `position:fixed;top:${top}px;left:${left}px;width:${width}px;height:${height}px;border:2px dashed #333;`
                this.setVisible(true)
              }
              Rect.prototype.setVisible = function (isVisible) {
                this.rect.style.visibility = isVisible ? 'visible' : 'hidden'
              }
              Rect.prototype.getRectPoint = function () {
                return {
                  leftTopPoint: this.leftTopPoint,
                  rightBottomPoint: this.rightBottomPoint
                }
              }
              Rect.prototype.destroy = function () {
                dom.removeChild(rect)
                this.rect = null
              }
            }
            setTimeout(function() {
              that.boxSelectionTooltip = createTooltip(document.body);
              $('#loadingbar').remove();

              for (let layers of layersAll) {
                for (let layer of layers) {
                  layer.selectColorType = 1;
                  that.boxSelectionObjects.selectedObjs[layer.name] = [];
                }
              }

              let drawRect = new DrawRectHandler(document.body);

              drawRect.drawEvt.addEventListener(function (res) {

                that.boxSelectionTooltip.setVisible(false);

                let selectedColor = new SuperMap3D.Color(1, 0, 0, 1);
                that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint);
                that.scene.getPickRectIDsAsync().then(objs=>{
                  let selectedObjs = that.boxSelectionObjects.selectedObjs;
                  for (let k in selectedObjs) {
                    if (selectedObjs[k] !== undefined && selectedObjs[k] !== null && selectedObjs[k].length>0) {
                      that.scene.layers.find(k).removeObjsColor(selectedObjs[k]);
                    }
                  }
                  for (let layers of layersAll) {
                    for (let layer of layers) {
                      let layerName = layer.name;
                      let layerSlt = objs.find(e => e.layerName === layerName);
                      let sltIds = (layerSlt && layerSlt.ids) || [];
                      let lastIds = selectedObjs[layerName];
                      switch (that.boxSelectionObjects.mode) {
                        case 1:
                          selectedObjs[layerName] = sltIds;
                          break;
                        case 2:
                          selectedObjs[layerName] = _.union(lastIds, sltIds);;
                          break;
                        case 4:
                          selectedObjs[layerName] = _.intersection(lastIds, sltIds);
                          break;
                        case 8:
                          selectedObjs[layerName] = _.difference(lastIds, sltIds);
                          break;
                        default:
                          break;
                      }
                      layer.setObjsColor(selectedObjs[layerName], selectedColor);
                    }
                  }
                  console.log('选择的数据：'+JSON.stringify(selectedObjs))
                });
              });


              drawRect.movingEvt.addEventListener(function (res) {
                that.boxSelectionTooltip.showAt(res.rightBottomPoint,
                  '<p>松开鼠标左键以结束选择区域</p>'
                );
                if (that.boxSelectionObjects.isCallInMoving) {
                  for (let layer of layersAll) {
                    layer.selectColorType = 1;
                  }
                  that.scene.pickRect(res.leftTopPoint, res.rightBottomPoint);
                }
              });
              drawRect.activeEvt.addEventListener(function (position) {
                that.boxSelectionTooltip.showAt(position,
                  '<p>点击鼠标左键以开始选择区域</p>'
                );
              });

              // $(document).keydown(function (e) {
              //   if (e.key === 'Shift') {
              //     drawRect.activate();
              //   }
              // })
              $(document).keyup(function (e) {
                if (e.key === 'Shift') {
                  drawRect.deactivate();
                }
              })

              $("#isCallInMoving").on("input change", function () {
                that.boxSelectionObjects.isCallInMoving = that.checked;
              });
              $("#isSelection").click(function() {
                drawRect.activate();
              });

              $("#mode").change(function (e) {
                let mode = $("#mode").val();
                that.boxSelectionObjects.mode = parseInt(mode);
              });

            }, 1000)
          }
        });
      });
    },
    //爆管分析
    pipeBurstAnalysis(){
      let that=this;
      that.showPipeBurstAnalysis=true
      // 开启地下模式
      that.scene.undergroundMode = true
      that.scene.screenSpaceCameraController.minimumZoomDistance = -1000
      that.scene.globe.show = false
      that.viewer.resolutionScale = window.devicePixelRatio;
      // 添加地下管线模型
      let promise_underground = that.scene.open('http://116.142.80.12:8090/iserver/services/3D-burstAnalysis/rest/realspace');

      // setTimeout(()=>{
      //   new SuperMap3D.when(promise_underground, function (layers) {
      //     alert(layers)
      //     // 设置图层的LOD层级切换距离缩放系数。
      //     for (let layer of layers) {
      //       layer.lodRangeScale = 50
      //     }
      //
      //     //查询所有阀门
      //     queryALLValve()
      //     //粒子特效
      //     let multiFireUrl = '../src/particle/fountain.json';
      //     modelMatrix = new SuperMap3D.Matrix4();
      //     let pos = new SuperMap3D.Cartesian3.fromDegrees(0, 0, 0)
      //     new SuperMap3D.Transforms.eastNorthUpToFixedFrame(pos, undefined, modelMatrix);
      //     new SuperMap3D.ParticleHelper.fromJsonUrl(multiFireUrl, that.scene).then(function (particleSys) {
      //       particleSystem = particleSys;
      //       particleSystem.emitRate = 200
      //       particleSystem.gravity = new SuperMap3D.Cartesian3(0, 0, 4)
      //       particleSystem.minLifeTime = 1
      //       particleSystem.maxLifeTime = 2
      //       particleSystem.minSize = 1
      //       particleSystem.maxSize = 4
      //       particleSystem.modelMatrix = modelMatrix;
      //       particleSystem.start();
      //     });
      //     // 获取管线管点图层
      //     pipeedge = that.scene.layers.find('PipeNetWork@Pipe3D#1')
      //     pipenode = that.scene.layers.find('PipeNetWork_Node@Pipe3D#1')
      //     pipenode1 = that.scene.layers.find('PipeNetWork_Node@Pipe3D')
      //     handler = new SuperMap3D.ScreenSpaceEventHandler(that.scene.canvas);
      //
      //     // 开始分析按钮事件
      //     document.getElementById('excavation').onclick = () => {
      //       if (handler) {
      //
      //         handler.setInputAction(function (e) {
      //           // 获取点击的管线ID
      //           pipesec = pipeedge.getSelection()
      //           if (!pipesec && pipesec.length === 0) {
      //             return
      //           }
      //           let position = that.scene.pickPosition(e.position)
      //           //爆管分析
      //           burstAnalysis(pipesec, position)
      //         }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
      //       }
      //     }
      //
      //     // 清除按钮事件
      //     document.getElementById('clear').onclick = () => {
      //       if (handler) {
      //         handler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
      //       }
      //       let pos = SuperMap3D.Cartesian3.fromDegrees(0, 0, 0)
      //       SuperMap3D.Transforms.eastNorthUpToFixedFrame(pos, undefined, modelMatrix);
      //       particleSystem.modelMatrix = modelMatrix;
      //       pipeedge.setObjsColor(edgeIds, SuperMap3D.Color.WHITE)
      //       pipenode.setObjsColor(nodeIds, SuperMap3D.Color.WHITE)
      //       pipenode1.setObjsColor(nodeIds, SuperMap3D.Color.WHITE)
      //
      //     }
      //   })
      // },1000)

      if (!that.scene.pickPositionSupported) {
        alert('不支持深度纹理,无法绘制多边形，地形开挖功能无法使用！');
      }
      $('#toolbar').show();
      $('#loadingbar').remove();

      /*
  爆管分析，pipesec：选取管线id,position：鼠标点击位置
  */
      function burstAnalysis(pipesec, position) {
        SuperMap3D.Transforms.eastNorthUpToFixedFrame(position, undefined, modelMatrix);
        particleSystem.modelMatrix = modelMatrix;
        console.log(pipesec)
        // 获取当前选择的分析方式
        let value = document.getElementById('options').value
        // 根据分析方式创建请求体

        if (value === "down") {
          workURL = 'http://116.142.80.12:8090/iserver/services/networkAnalyst3D-burstAnalysis-2/rest/facilityanalyst3d/PipeNetWork@Pipe3D/tracedownresult.json'
          queryObj = {
            edgeID: pipesec[0],
            isUncertainDirectionValid: true,
            weightName: 'WeightField'
          }
        } else if (value === 'up') {
          workURL = 'http://116.142.80.12:8090/iserver/services/networkAnalyst3D-burstAnalysis-2/rest/facilityanalyst3d/PipeNetWork@Pipe3D/traceupresult.json'
          queryObj = {
            edgeID: pipesec[0],
            isUncertainDirectionValid: true,
            weightName: 'WeightField'
          }
        } else if (value === 'faclilities') {
          let valve = valves
          let ids = JSON.stringify(valve)
          workURL = 'http://116.142.80.12:8090/iserver/services/networkAnalyst3D-burstAnalysis-2/rest/facilityanalyst3d/PipeNetWork@Pipe3D/upstreamcirticalfaclilities.json'
          queryObj = {
            sourceNodeIDs: ids,
            edgeID: pipesec[0],
            isUncertainDirectionValid: true
          }
        }
        // 发送请求
        $.ajax({
          type: 'GET',
          url: workURL,
          data: queryObj,
          success: data => {
            // 得到结果
            console.log(data)
            if (data.edges) {
              edgeIds = data.edges
              pipeedge.setObjsColor(data.edges, SuperMap3D.Color.RED)
            }
            if (data.nodes) {
              nodeIds = data.nodes
              pipenode.setObjsColor(data.nodes, SuperMap3D.Color.RED)
              pipenode1.setObjsColor(data.nodes, SuperMap3D.Color.RED)
            }
          },
          error: res => {
            console.log(res)
          }
        })
      }
      // 查询所有阀门
      function queryALLValve() {
        debugger
        //查询阀门地址和参数
        let dataServiceUrl = 'http://116.142.80.12:8090/iserver/services/data-burstAnalysis/rest/data/featureResults.json?returnContent=true';
        let queryObj = {
          getFeatureMode: 'SQL',
          datasetNames: ['Pipe3D:PipeNetWork_Node'],
          queryParameter: {
            attributeFilter: "Name='阀门'"
          }
        };
        queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
        $.ajax({
          type: "post",
          url: dataServiceUrl,
          data: queryObjJSON,
          success: function (result) {
            valves = []
            result.features.map(function (element) {
              // 遍历数组，对每个元素进行操作
              valves.push(element.ID);
            });
          },
          error: function (msg) {
            console.log(msg);
          }
        })
      }
    },
    //清除框选
    removeBoxSelection(){
      this.showSoxSelection= false
      let selectedObjs = this.boxSelectionObjects.selectedObjs;
      for (let k in selectedObjs) {
        if (selectedObjs[k] !== undefined && selectedObjs[k] !== null && selectedObjs[k].length>0) {
          this.scene.layers.find(k).removeObjsColor(selectedObjs[k]);
        }
      }
      if(this.boxSelectionTooltip){
        this.boxSelectionTooltip.setVisible(false);
      }
      if(this.handlerBoxSelection){
        this.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOWN, SuperMap3D.KeyboardEventModifier.SHIFT)
        this.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.MOUSE_MOVE, SuperMap3D.KeyboardEventModifier.SHIFT)
        this.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP, SuperMap3D.KeyboardEventModifier.SHIFT)
        this.handlerBoxSelection.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_UP)
      }
    },
    /**
     * 切换地图
     */
    queryVectorTilesMapList(deptId) {
      queryMap(deptId).then(req => { // from forestry_develop_2.0
        //切换地图
        req = req.sort(function(a, b) {
          return a.sort - b.sort
        })
        this.queryList = req
        this.onload(req)
      })
    },
    //清除所有
    clearAll() {
      this.viewer.entities.removeAll()
      this.viewer.scene.scanEffect.show = false
    },
    //移除之前添加的点
    clearMRadius() {
      if (this.markerboxEntityRadius != null && this.markerboxEntityRadius.length > 0) {
        for (let i = 0; i < this.markerboxEntityRadius.length; i++) {
          this.viewer.entities.remove(this.markerboxEntityRadius[i])
        }
        this.markerboxEntityRadius = []
      }
    },
    //移除之前添加的线
    clearTwoC() {
      if (this.connectBoxEntityTwo != null) {
        this.viewer.entities.remove(this.connectBoxEntityTwo)
        this.connectBoxEntityTwo = null
      }
    },
    /**
     * 地图落点-覆盖范围
     */
    setMarkersRadius(makerList) {
      let that = this
      for (let i = 0; i < makerList.length; i++) {
        let longitude = makerList[i].lng*1;
        let latitude = makerList[i].lat*1;
        let radius = makerList[i].radius*1;
        let marker = that.viewer.entities.add({
          name: "",
          position: new SuperMap3D.Cartesian3.fromDegrees(longitude, latitude),
          billboard: {
            image: iconList[makerList[i].icon],
            width: 48,
            height: 48,
            heightReference: SuperMap3D.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          },
          description: makerList[i].bindPopupHtml,
          click: makerList[i].click,
          parameter: makerList[i].parameter
        })
        that.markerboxEntityRadius.push(marker)
        //绘制摄像头的圈（覆盖范围）
        // if(radius!=0){
        //   const markerRadius = that.viewer.entities.add({
        //     position: new SuperMap3D.Cartesian3.fromDegrees(longitude, latitude),
        //     ellipse: {
        //       semiMinorAxis: radius,
        //       semiMajorAxis: radius,
        //       material: SuperMap3D.Color.DODGERBLUE.withAlpha(0.4),
        //       outline: true, //是否显示边框
        //       outlineColor: SuperMap3D.Color.BLUE, //边框颜色
        //       outlineWidth: 1,
        //       heightReference: SuperMap3D.HeightReference.NONE
        //     },
        //   });
        //   that.markerboxEntityRadius.push(markerRadius)
        // }
      }
      // that.createLeftClickDescription()
      that.createRightClickDescription()
    },
    /**
     * 地图画线(贴地)
     */
    setConnectTwoList(connectList, color, withAlpha) {
      let that = this
      //SuperMap3D.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = SuperMap3D.Color.fromCssColorString(color).withAlpha(withAlpha)
      that.connectBoxEntityTwo = that.viewer.entities.add({
        Type: 'Polyline',
        polyline: {
          positions: new SuperMap3D.Cartesian3.fromDegreesArray(connectList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
    },
    //移除之前添加的点
    clearM() {
      if (this.markerboxEntity != null && this.markerboxEntity.length > 0) {
        for (let i = 0; i < this.markerboxEntity.length; i++) {
          this.viewer.entities.remove(this.markerboxEntity[i])
        }
        this.markerboxEntity = []
      }
    },
    //移除之前添加的线
    clearC() {
      if (this.connectBoxEntity != null) {
        this.viewer.entities.remove(this.connectBoxEntity)
        this.connectBoxEntity = null
      }
    },
    //移除之前添加的面
    clearG() {
      if (this.graphicsBoxEntity != null) {
        this.viewer.entities.remove(this.graphicsBoxEntity)
        this.graphicsBoxEntity = null
      }
    },
    //移除之前添加的面
    clearGList() {
      for (let i = 0; i < this.graphicsBoxEntityList.length; i++) {
        this.viewer.entities.remove(this.graphicsBoxEntityList[i])
      }
      this.graphicsBoxEntityList = []
    },
    lonAndLatPlacement(lon, lat) {
      let that = this
      if (that.positioningEntity != null) {
        this.viewer.entities.remove(that.positioningEntity)
      }
      that.positioningEntity = that.viewer.entities.add({
        name: "",
        position: new SuperMap3D.Cartesian3.fromDegrees(lon, lat),
        billboard: {
          image: iconList['positioning'],
          width: 48,
          height: 48,
          heightReference: SuperMap3D.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
      })
    },
    setIsObtainLaAndLon(isObtainLaAndLon) {
      let that=this
      this.isObtainLaAndLon = isObtainLaAndLon
    },
    clearDW() {
      if (this.positioningEntity != null) {
        this.viewer.entities.remove(this.positioningEntity);
      }
    },
    flyTo(longitude, latitude, height) {
      let that = this
      setTimeout(function() {
        that.viewer.camera.setView({
          destination: new SuperMap3D.Cartesian3.fromDegrees(Number(longitude)-Number(0.115), Number(latitude)-Number(0.27), Number(6000)),
          orientation: {
            heading:  SuperMap3D.Math.toRadians(0),
            pitch:  SuperMap3D.Math.toRadians(-45),
            roll: 0
          }
        })
      }, 3000)
    },
    openTvwall() {
      this.mapshow = false
      if (this.openZt) {
        this.$emit('fatherMethod', this.dianshiqiang, this.longitude, this.latitude, this.userList)
      } else {
        this.$emit(this._click, this._parameter)
      }
    },
    /**
     * 地图落点
     */
    setMarkers(makerList) {
      let that = this
      clearInterval(that.aac)
      for (let i in makerList) {
        let longitude = makerList[i].lng
        let latitude = makerList[i].lat
        let marker = that.viewer.entities.add({
          name: '',
          position: new SuperMap3D.Cartesian3.fromDegrees(Number(longitude), Number(latitude)),
          billboard: {
            image: iconList[makerList[i].icon],
            width: 48,
            height: 48,
            heightReference: SuperMap3D.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          },
          description: makerList[i].bindPopupHtml,
          click: makerList[i].click,
          parameter: makerList[i].parameter
        })
        that.markerboxEntity.push(marker)
      }
      that.viewer.scene.globe.depthTestAgainstTerrain = false
      // that.createLeftClickDescription()
      that.createRightClickDescription()
    },
    /**
     *鼠标左击事件是原来的气泡
     */
    createLeftClickDescription() {
      let that = this
      that.handler.setInputAction(function(movement) {
        that.pick = that.viewer.scene.pick(movement.position)
        if (that.pick && that.pick) {
          let id = SuperMap3D.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
            movement.position).primitive.id)

          let html = id._description
          if (html != undefined && html._value != null && html._value != '') {
            that.bindPopupHtml = html
            that.mapshow = true
            that.openZt = false
            that._click = id._click
            that._parameter = id._parameter
          } else {
            that.mapshow = false
          }
        } else {
          that.mapshow = false
        }
      }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
    },
    /**
     *鼠标右击事件是原来的点击
     */
    createRightClickDescription() {
      let that = this
      that.handler.setInputAction(function(movement) {
        that.mapshow = false
        if (new Date().getTime() - that.clickTime < 2000) {
          return
        } else {
          that.clickTime = new Date().getTime()
        }
        // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
        that.pick = that.viewer.scene.pick(movement.position)
        if (that.pick && that.pick) {
          let id = SuperMap3D.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
            movement.position).primitive.id)
          let clickName = id._click
          that.$emit(clickName, id._parameter)
        }
      }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK)
    },

    /**
     * 落点定位
     */
    /**
     * 落点定位
     */
    dropLocation(lat, lng, index,radius) {
      this.viewer.scene.globe.depthTestAgainstTerrain = true;
      this.viewer.camera.flyTo({
        destination: new SuperMap3D.Cartesian3.fromDegrees(Number(lng), Number(lat)-Number(0.003), Number(500)),
        orientation: {
          heading:  SuperMap3D.Math.toRadians(0),
          pitch:  SuperMap3D.Math.toRadians(-45),
          roll: 0
        }
      })
      if (radius != undefined && radius != null) {
        let that = this
        // 初始化颜色选择控件
        let initialScanColor = '#2263e6'
        that.viewer.scene.scanEffect.color = SuperMap3D.Color.fromCssColorString(initialScanColor)
        // 获取或设置扫描线的运行周期，单位：秒。
        that.viewer.scene.scanEffect.period = radius / 500
        // 获取或设置扫描线的运行速度，单位：米/秒。
        that.viewer.scene.scanEffect.speed = 500
        that.viewer.scene.scanEffect.mode = SuperMap3D.ScanEffectMode.CIRCLE
        that.viewer.scene.scanEffect.centerPostion = new SuperMap3D.Cartesian3.fromDegrees(lng, lat, 3000)
        that.viewer.scene.scanEffect.show = true
      }
    },
    /**
     * 地图画线(贴地)
     */
    setConnectList(connectList, color, withAlpha) {
      let that = this
      //SuperMap3D.Color.fromCssColorString('#67ADDF')   16进制颜色设置
      let material = SuperMap3D.Color.fromCssColorString(color).withAlpha(withAlpha)
      that.connectBoxEntity = that.viewer.entities.add({
        Type: 'Polyline',
        polyline: {
          positions: new SuperMap3D.Cartesian3.fromDegreesArray(connectList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
    },
    /**
     * 地图图形(贴地)
     */
    setGraphicsList(graphicsList, color, withAlpha) {
      let that = this
      //SuperMap3D.Color.fromCssColorString('#67ADDF')   16进制颜色设置

      let material = SuperMap3D.Color.fromCssColorString(color).withAlpha(withAlpha)
      that.graphicsBoxEntity = that.viewer.entities.add({
        polygon: {
          hierarchy: new SuperMap3D.Cartesian3.fromDegreesArray(graphicsList),
          clampToGround: true, //贴地 true,不贴地  false
          width: 5,
          material: material
        }
      })
    },
    // 批量画面
    setGraphicsLists(graphicsList, color, withAlpha) {
      let that = this
      let material = SuperMap3D.Color.fromCssColorString(color).withAlpha(withAlpha)
      for (let i = 0; i < graphicsList.length; i++) {
        let positions = new SuperMap3D.Cartesian3.fromDegreesArray(graphicsList[i].latLng)
        let name = graphicsList[i].name.toString()
        let center = SuperMap3D.BoundingSphere.fromPoints(positions).center
        let namePosition = SuperMap3D.Cartographic.fromCartesian(center)
        namePosition.height = 0 // 将名称高度设置为0，使其贴地显示
        that.graphicsBoxEntityList.push(that.viewer.entities.add({
          polygon: {
            hierarchy: positions,
            clampToGround: true,
            width: 5,
            material: material
          },
          position: center,
          label: {
            text: name,
            font: 'Bold 12px sans-serif',
            fillColor: SuperMap3D.Color.BLACK,
            outlineColor: SuperMap3D.Color.WHITE,
            outlineWidth: 2,
            pixelOffset: new SuperMap3D.Cartesian2(0, 0),
            heightReference: SuperMap3D.HeightReference.CLAMP_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        }))
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.map-tit {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translatex(-50%);
  border: 1px solid #15519b;
  z-index: 9999;
  background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));
  min-width: 300px;

  .sj-icon-btn {
    display: block;
    margin: 10px auto 15px auto;
    padding: 0px 16px;
    font-size: 10px;
    height: 1.7rem;
  }

  .top-tit {
    width: 100%;
    height: 28px;
    line-height: 28px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #15519b80;
    padding: 0px 10px;
    align-items: center;


    i {
      color: #10ccff;
      font-size: 18px;
      text-shadow: 0px 0px 5px #23b3b3;;
    }

    span img {
      display: block;
      width: 12px;
      height: 12px;
      color: #fff;
      cursor: pointer;
    }
  }

  .map-txt {
    padding: 10px 15px;
    color: #fff;
    line-height: 20px;
    font-size: 12px;

    .d-l-con {
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10rem);
}
</style>