Merge remote-tracking branch 'origin/lifeline_develop_siping' into lifeline_develop_siping

src/components/supermap-2.5d.vue

@@ -29,12 +29,13 @@
           <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>
@@ -67,15 +68,35 @@
         </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 {
-  iconList,
-  queryMap,
-  getDeviceList
+  getDeviceList,queryMap,
+  iconList
 } from '@/api/components/supermap.js'
 import Cookies from 'js-cookie'
 import {
@@ -88,6 +109,14 @@ export default {
     return {
       showExcavation:false,//开挖图示
       showExcavationAnalyze:false,//填开挖分析图示
+      showSoxSelection:false,//选择、框选
+      boxSelectionTooltip:null,//选择、框选Tooltip
+      boxSelectionObjects : {//选择、框选元素
+        isCallInMoving: false,
+        selectedObjs: {},
+        mode: 1
+      },
+      checkedCities:[],//选择的图层
       bindPopupHtml: null,
       mapshow: false,
       openZt: false,
@@ -111,6 +140,7 @@ export default {
       handlerHeight: null, // 高度
       handlerExcavation: null, // 开挖
       handlerExcavationAnalyze: null, // 填开挖分析
+      handlerBoxSelection: null, // 选择
       isObtainLaAndLon: false,
       /*************************原地图属性*********************/
       aac: null,
@@ -190,36 +220,6 @@ export default {
       })
       that.scene = that.viewer.scene
       that.viewer._Widget._creditContainer.style.display = "none" // 去掉超图logo水印
-
-      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
-        }
-      );
       //2.添加SuperMap iServer发布的影像服务
       that.addImageryProvider(withinData[0].path)
       let longitude = withinData[0].coordinate.split(',')[0]
@@ -379,6 +379,7 @@ export default {
               disableDepthTestDistance: Number.POSITIVE_INFINITY
             },
           })
+
           that.$emit('setPositioning', longitude, latitude);
         }
       }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);
@@ -408,6 +409,7 @@ export default {
     },
     // ***************************生命线---图层过滤 开始************************************************
     addLifelineOpen(checkedCities) {
+      this.checkedCities=checkedCities
       checkedCities.forEach(url => {
         if (!url) return;  // 如果没有 URL，跳过当前迭代
         if(!this.open_LifelineList.some(item => item.url === url)){//查找已勾选的图层数组
@@ -1086,24 +1088,11 @@ export default {
             var h = cartographic.height;
             positionsDegrees = positionsDegrees.concat([lon, lat, h]);
           }
-          extract(positionsDegrees);
+          that.extract(positionsDegrees);
           that.handlerExcavation.clear();
           that.handlerExcavation.deactivate();
           tooltip.setVisible(false);
         })
-        //地形抽出部分
-        function extract(positions) {
-          that.viewer.scene.globe.removeAllExtractRegion();
-          that.viewer.scene.globe.addExtractRegion({
-            name: 'extract', //名称
-            position: positions, //区域
-            height: $('#depth').val(), //开挖深度
-            transparent: false, //封边是否透明
-            extractHeight: Number($('#moveHeight').val()), //抽出高度
-            granularity: 1 //精度
-          });
-        }
-
         //清除剖切结果
         $('#clear').click(function() {
           tooltip.setVisible(false);
@@ -1114,10 +1103,88 @@ export default {
         $("#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
@@ -1245,6 +1312,390 @@ export default {
         }
       }, 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)
+      }
+    },
     /**
      * 切换地图
      */

src/views/Cockpit.vue

@@ -69,6 +69,7 @@
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
                   <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
@@ -104,6 +105,7 @@
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
                 </div>
                 <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 <a class="map_clear" @click="clearAll()">清除</a>
@@ -128,6 +130,7 @@
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
                   <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
@@ -153,6 +156,7 @@
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
                   <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
@@ -175,6 +179,7 @@
                   <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                   <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                   <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="boxSelection()">框选</button>
                   <!--              <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                 </div>
                 <a class="map_clear" @click="clearAll()">清除</a>
@@ -232,6 +237,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -267,6 +273,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                   </div>
                   <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -291,6 +298,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -316,6 +324,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -338,6 +347,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--              <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -395,6 +405,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -430,8 +441,10 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
+                    <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
-                  <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
+
                   <a class="map_clear" @click="clearAll()">清除</a>
                 </el-tab-pane>
                 <el-tab-pane label="管廊" name="three">
@@ -454,6 +467,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -479,6 +493,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -501,6 +516,7 @@
                     <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
                     <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
                     <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                    <button class="map_btn_span" @click="boxSelection()">框选</button>
                     <!--              <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>-->
                   </div>
                   <a class="map_clear" @click="clearAll()">清除</a>
@@ -664,12 +680,17 @@ export default {
     choseMeasuringHeight() {
       this.$refs.supermap.choseMeasuringHeight()
     },
+    //选择、框选
+    boxSelection() {
+      this.$refs.supermap.boxSelection()
+    },
     //清除
     clearAll() {
       this.$refs.supermap.closeMeasuringAll()
       this.$refs.supermap.closeExcavationAll()
       this.checkedCities = []
       this.$refs.supermap.addLifelineOpen(this.checkedCities)
+      this.$refs.supermap.removeBoxSelection()
     }
   }
 }