修改 测距功能

src/views/leaflet.vue

@@ -148,7 +148,7 @@
       <!-- 添加测距按钮 -->
       <div class="measure-control">
         <button
-          class="measure-button"
+          :class="isClearCejuFlag == true ? 'measure-button active' : 'measure-button'"
           @click="toggleMeasureMode"
           :title="isMeasuring ? '结束测距' : '开始测距'"
         >
@@ -192,10 +192,11 @@
     <div class="right-control-group">
       <!-- <button class="map-control-btn" @click="toggleCompass" title="显示地图方向">
         <i class="compass-icon"></i>
-      </button> -->
+      </button> 
       <button class="map-control-btn" @click="flyToLocation" title="定位到指定位置">
         <i class="location-icon"></i>
       </button>
+      -->
       <div class="zoom-control-group">
         <button class="zoom-btn" @click="zoomIn" title="放大地图">+</button>
         <button class="zoom-btn" @click="zoomOut" title="缩小地图">-</button>
@@ -262,6 +263,7 @@ export default {
       mapCompassVisible: false, // 指南针显示状态
       localLng: null, // 存储地址栏定位参数
       currentLocationMarker: null, // 当前位置标记
+      isClearCejuFlag:false,  // 是否清除测距数据
 
       isMobile:false,
       isDataTypeFlag:0, //  0 默认无 1 楼宇  2 地块
@@ -377,7 +379,10 @@ export default {
           
       }else{
           this.BuildingInformationShow = false;
-          that.drawCircle({latlng:latlnt})
+          setTimeout(() => {
+            that.drawCircle({latlng:latlnt})
+          }, 500);
+          
       }
     },
     colseWin(){
@@ -468,14 +473,16 @@ export default {
         }
 
         if(this.isDraw){
-          this.drawCircle(e)
+          setTimeout(() => {
+            that.drawCircle(e)
+          }, 500);
         }
 
         // 如果有其他需要清除的筛选结果数据，也可以在这里处理
         // 例如：this.filteredResults = [];
       });
       map2DViewer.map.on("dblclick", (e) => {
-        this.drawCircle(e)
+        // this.drawCircle(e)
       });
 
       this.lifeDatas = {};
@@ -938,6 +945,7 @@ export default {
     },
     toggleDraw(){
       this.isDraw = !this.isDraw;
+      console.log('[ 3333 ] >')
       if(this.isDraw == false){
          // 清除圆圈
         if (this.currentCircle) {
@@ -954,14 +962,21 @@ export default {
     },
     // 切换测距模式
     toggleMeasureMode() {
-      this.isMeasuring = !this.isMeasuring;
-      const map = this.getMapInstance();
-
-      if (this.isMeasuring && map) {
-        this.startMeasuring();
-      } else {
-        this.stopMeasuring();
+      if(this.isClearCejuFlag == true){
+        this.clearMeasureData();//清除测距数据
+        this.isClearCejuFlag = false;
+        this.isMeasuring = false;
+      }else{
+        this.isMeasuring = !this.isMeasuring;
+        const map = this.getMapInstance();
+        if (this.isMeasuring && map) {
+          this.startMeasuring();
+        } else {
+          this.stopMeasuring();
+        }
+        this.isClearCejuFlag == true
       }
+      
     },
 
     // 开始测距
@@ -1086,7 +1101,7 @@ export default {
         className: "measure-tooltip",
         interactive: false,
       })
-        .setContent(`总距离: ${totalDistance.toFixed(2)} 米`)
+        .setContent(`<div>总距离: ${totalDistance.toFixed(2)} 米</div>`)
         .setLatLng(this.measurePoints[this.measurePoints.length - 1]);
 
       this.measureTooltipsGroup.addLayer(this.measureTooltip);
@@ -1158,7 +1173,8 @@ export default {
         this.handleZoom = null;
       }
 
-      this.clearMeasureData();
+      // this.clearMeasureData();
+      this.isClearCejuFlag = true
     },
 
     // 获取地图实例并验证
@@ -1651,6 +1667,7 @@ export default {
   font-size: 18px;
   font-weight: bold;
   padding: 0;
+  margin-bottom: 5px;
 }
 
 /* 图标样式 */