优化地图组件添加选择功能

src/components/supermap-2.5d.vue

@@ -34,7 +34,7 @@
         </div>
       </div>
       <!--地图开挖 显示 结束-->
-      <!--地图开挖分析 显示 结束-->
+      <!--地图开挖分析 显示 开始-->
       <div id="excavationAnalyze" v-if="showExcavationAnalyze" class="param-container tool-bar">
         <div class="param-item">
           <b>开挖高程：</b>
@@ -67,6 +67,27 @@
         </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>
@@ -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]
@@ -408,6 +408,7 @@ export default {
     },
     // ***************************生命线---图层过滤 开始************************************************
     addLifelineOpen(checkedCities) {
+      this.checkedCities=checkedCities
       checkedCities.forEach(url => {
         if (!url) return;  // 如果没有 URL，跳过当前迭代
         if(!this.open_LifelineList.some(item => item.url === url)){//查找已勾选的图层数组
@@ -1245,6 +1246,383 @@ 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)
+        });
+      });
+      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]);
+        }
+      }
+      this.boxSelectionTooltip.setVisible(false);
+      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()
     }
   }
 }