编辑线面异常修复

src/components/DrawMap.vue

@@ -35,15 +35,16 @@ export default {
         let that = this;
         window.mapboxMap.on('load', function() {
             // 初始化
-            that.mapDraw = new MapDraw.init(window.mapboxMap, {
+            // that.mapDraw = new MapDraw.init(window.mapboxMap, {
               // 编辑完成 → 自动接收最新图形
               // onEditComplete: (data) => {
               //   console.log("返回数据：", data);
               //   // 你可以在这里提交后端接口，将数据保存到数据库
               //   that.updateContent(data);
               // },
-            });
+            // });
             // console.log("mapDraw:", that.mapDraw);
+            that.mapDraw = window.mapEditDraw;
         })
     },
     // 开始绘制

src/components/JsonEditor.vue

@@ -9,7 +9,7 @@
   <div class="btn-box">
     <span style="padding: 0 10px;" @click="copyJson"><span class="btn-text">复制</span></span>
     <span style="padding: 0 10px;" @click="saveJson"><span class="btn-text">保存</span></span>
-    <span style="padding: 0 10px;" @click="closeJson"><span class="btn-text">取消</span></span>
+    <span style="padding: 0 10px;" @click="closeJson"><span class="btn-text">关闭</span></span>
   </div>
 </template>
 

src/components/Map.vue

@@ -3,7 +3,7 @@
 
   <LeftMenu :dataList="dataList"></LeftMenu>
 
-  <VueJsonEditor v-if="editFlag" :editDataList="editDataList"></VueJsonEditor>
+  <VueJsonEditor v-if="editWinFlag" :editDataList="editDataList"></VueJsonEditor>
 
    <!-- 十字准线元素 -->
   <div class="map-center-crosshair" v-if="btn_Aim_show"></div>
@@ -21,7 +21,7 @@
         <Coin />
       </el-icon>
       <el-divider></el-divider>
-       <el-icon size="20" :color="editFlag == true ? '#067bc9' : '#000'" title="是否编辑图层数据" class="icon" @click="toggleItem('3');">
+       <el-icon size="20" :color="editFlag == true ? '#067bc9' : '#000'" title="编辑图层数据" class="icon" @click="toggleItem('3');">
         <Edit />
       </el-icon>
       <el-divider></el-divider>
@@ -60,6 +60,7 @@ export default {
       mapEditDraw: null,
       editDataList: {},
       editFlag: false,
+      editWinFlag: false,
     };
   },
   mounted() {
@@ -86,6 +87,8 @@ export default {
         if(res.code == 200){
           ElMessage.success("保存成功");
           this.getVectorData();
+          // 清空绘制工具
+          this.mapEditDraw.clearAll();
         }else{
           ElMessage.error(res.msg);
         }
@@ -94,6 +97,7 @@ export default {
     closeJsonEditor(){
       // 清空编辑数据
       this.editDataList = {};
+      this.editWinFlag = false;
       // 确保vector-data数据源存在且为有效的GeoJSON对象
       if (window.mapboxMap.getSource('vector-data') && this.dataList) {
         window.mapboxMap.getSource('vector-data').setData(this.dataList);
@@ -125,6 +129,9 @@ export default {
       }else if(item == "3"){
         this.editDataList = {};
         this.editFlag = !this.editFlag;
+        if(!this.editFlag){
+          this.editWinFlag = false;
+        }
         this.toggleEditMode(this.editFlag);
         window.mapboxMap.getSource('states').setData(this.areaDataList);
         window.mapboxMap.getSource('vector-data').setData(this.dataList);
@@ -207,10 +214,13 @@ export default {
           // 编辑完成 → 自动接收最新图形
           onEditComplete: (data) => {
             // console.log("===mapEditDraw返回数据===：", data);
-            that.editDataList = data;
+            if(data.properties.dms_id){// 对dms_id进行判断
+              that.editDataList = data;
+            }
             // 你可以在这里提交后端接口，将数据保存到数据库
           }
         });
+        window.mapEditDraw = that.mapEditDraw;
         // console.log("mapEditDraw:", that.mapEditDraw);
 
       })
@@ -358,11 +368,18 @@ export default {
         let that = this;
       // that.editDataList = fet;
         // console.log("仅获取 click 的要素：", e);
-        if (that.editFlag) return;
         // 关键：只查询 data-fill-layer，过滤掉所有其他图层
         const features = window.mapboxMap.queryRenderedFeatures(e.point, {
           layers: ['data-fill-layer'] // 只取这个图层
         });
+        if (that.editFlag){
+          if (features.length){
+            this.editWinFlag = true;
+          }else{
+            // this.editWinFlag = false;
+          }
+          return;
+        };
         // console.log("仅获取e的要素：", e);
         if (!features.length) return;
         //  现在最多只有 1 个要素 → 绝对不会乱
@@ -431,14 +448,18 @@ export default {
     toggleEditMode(isEdit){
       let that = this;
       that.editFlag = isEdit;
-      // console.log("isEdit:", isEdit);
-      if(isEdit){
-         window.mapboxMap.off('click', that.mapClickValue)
-         this.mapEditDraw.setEditLayerIds(['data-fill-layer']);
-      }else{
-        window.mapboxMap.on('click', that.mapClickValue);
-        this.mapEditDraw.setEditLayerIds([]);
-      }
+      console.log("isEdit:", isEdit);
+      // if(isEdit){
+      //    this.editWinFlag = true;
+      //    window.mapboxMap.off('click', that.mapClickValue)
+      //    this.mapEditDraw.setEditLayerIds(['data-fill-layer']);
+      // }else{
+      //   window.mapboxMap.on('click', that.mapClickValue);
+      //   this.mapEditDraw.setEditLayerIds([]);
+      // }
+      window.mapboxMap.off('click', that.mapClickValue)
+      window.mapboxMap.on('click', that.mapClickValue);
+      this.mapEditDraw.setEditLayerIds(['data-fill-layer']);
       that.mapEditDraw.isEdit(isEdit);
 
     },