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>
  </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,//选择、框选
      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: [], //生命线图层控制图层
      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发布的影像服务
      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-aode/rest/realspace',undefined,{
    //     autoSetView : false      //不自动定位
    //   })
    //   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)
      //设置鼠标左键单击回调事件
      that.handler.setInputAction(function (e) {
        if (that.isObtainLaAndLon) {
          if (that.positioningEntity != null) {
            that.viewer.entities.remove(that.positioningEntity);
          }
          //首先移除之前添加的点
          // viewer.entities.removeAll();
          //获取点击位置笛卡尔坐标
          var position = that.scene.pickPosition(e.position);

          //将笛卡尔坐标转化为经纬度坐标
          var cartographic = SuperMap3D.Cartographic.fromCartesian(position);
          var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
          var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
          var 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.LEFT_CLICK);
    },
    //初始化地图数据
    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
      checkedCities.forEach(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        if(!this.open_LifelineList.some(item => item.url === url)){//查找已勾选的图层数组
          let obj = this.scene.open(this.superMapRootUrl +url,undefined,{
            autoSetView : false      //不自动定位
          })
          this.open_LifelineList.push({
            url: url,
            mapObj: obj
          })

          // 管线流动
          // SuperMap3D.when(obj, function (layer) {
          //   var line = scene.layers.find("huashengranqi");
          //   line.textureUVSpeed = new SuperMap3D.Cartesian2(0, -2);//模型纹理在UV坐标上的运动速度
          // });

        }else{
          SuperMap3D.when.all(this.selectMapObj(url), function (layers) {
            for (var layer of layers) {
              layer.visible = true;
            }
          });
        }
      });
      const urlsToRemove = this.open_LifelineList.map(item => item.url).filter(url => !checkedCities.includes(url));//查找没勾选的图层数组
      console.log('选中的url:', checkedCities);
      console.log('移除的url:', urlsToRemove);
      urlsToRemove.forEach(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        SuperMap3D.when.all(this.selectMapObj(url), function (layers) {
          for (var layer of layers) {
            layer.visible = false;
          }
        });
      });
    },
    selectMapObj(url) {
      const item = this.open_LifelineList.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 (var 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 (var 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) {
        var dis = Number(result.distance)
        var selOptV = that.selOptV
        if (selOptV == 3 || selOptV == 4) {
          dis = Number(calcClampDistance(positions))
        }

        var 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) {
        var mj = Number(result.area)
        var 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) {
        var distance = result.distance > 1000 ? (result.distance / 1000).toFixed(2) + 'km' : result.distance + 'm';
        var vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000).toFixed(2) + 'km' : result.verticalHeight + 'm';
        var 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() {
        var 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) {
          var positions = [].concat(res.object.positions);
          var positionsDegrees = [];
          for(var i = 0; i < positions.length; i++) {
            var cartographic = SuperMap3D.Cartographic.fromCartesian(positions[i]);
            var lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
            var lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
            var 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() {
        var 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);

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

          var array = [].concat(result.object.positions);
          var positions = [];
          var positionsii = [];
          for (var i = 0, len = array.length; i < len; i++) {
            var cartographic = SuperMap3D.Cartographic.fromCartesian(array[i]);
            var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
            var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
            var 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
          });

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

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


          var queryObj = {
            "cutFillType": "REGIONANDALTITUDE",
            "baseAltitude": dep,
            "region": geometry,
            "resultDataset": "result",
            "buildPyramid": true,
            "deleteExistResultDataset": true
          };
          var 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);
              // var resultObj = JSON.parse(data);
              var 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(url => {
        if (!url) return;  // 如果没有 URL，跳过当前迭代
        SuperMap3D.when.all(that.selectMapObj(url), function (layers) {
          layersAll.push(layers)
        });
      });
      if (layersAll.length === 0) {
        return
      }
      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)
    },
    //清除框选
    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) {
      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
        // 初始化颜色选择控件
        var 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>