空间分析 清空

src/views/globalMap/RightMenu/DrawTools.vue

@@ -6,7 +6,7 @@
         <div class="btn" :style="{ color: mouseToolState.drawing ? '#ff0000' : '#ffffff' }" @click="openDraw">
           {{ mouseToolState.drawing ? '关闭绘制' : '开启绘制' }}
         </div>
-        <div class="btn-cancel">清空</div>
+        <div class="btn-cancel" @click="handleClear">清空</div>
       </div>
     </div>
     <div class="tool-content">
@@ -160,8 +160,8 @@ const selectColor = (index) => {
   mouseToolState.color = colorList[index].value;
   showColorSelect.value = false;
 };
-const overlays = [];
-const overlaysData = [];
+let overlays = [];
+let overlaysData = [];
 // 点击颜色选择之外
 onClickOutside(selectBoxRef, () => {
   if (!showColorSelect.value) return;
@@ -241,12 +241,18 @@ const onDraw = (event) => {
   commit(deepClone(overlaysData));
   // 右击进入编辑
   obj.on('rightclick', handleRightClick);
-  analysisSpatial(data);
+  selectedScope[data.id] = data;
+  analysisSpatial();
   // 点击空间分析
   obj.on('click', function () {
     // 没在编辑时
     if (!mouseToolState.drawing) {
-      analysisSpatial(data);
+      if (selectedScope[data.id]) {
+        delete selectedScope[data.id];
+      } else {
+        selectedScope[data.id] = data;
+      }
+      analysisSpatial();
     }
   });
 };
@@ -280,6 +286,7 @@ const onDraw2 = (event) => {
   commit(deepClone(overlaysData));
   // 右击进入编辑
   map.on('contextmenu', handleRightClick2);
+  selectedScope[data.id] = data;
   analysisSpatial(data);
 };
 let rightClickObj;
@@ -393,23 +400,16 @@ const removeOverlayByIndex = (index: number) => {
       mapUtils.getDrawVector().getSource().removeFeature(overlays[index]);
     }
   }
-
+  if (selectedScope[overlaysData[index].id]) {
+    delete selectedScope[overlaysData[index].id];
+  }
   overlays.splice(index, 1);
   overlaysData.splice(index, 1);
+  analysisSpatial();
 };
 let selectedScope = reactive({});
 // 空间分析数据
-const analysisSpatial = (data) => {
-  // 已选中的范围
-  if (selectedScope[data.id]) {
-    delete selectedScope[data.id];
-    if (JSON.stringify(selectedScope) === '{}') {
-      // rightMenuRef.value.clickContractMenu();
-      return;
-    }
-  } else {
-    selectedScope[data.id] = data;
-  }
+const analysisSpatial = () => {
   let location = [];
   for (let key in selectedScope) {
     let itemLocation = [];
@@ -448,6 +448,39 @@ const unMapClick = (event) => {
     popup = undefined;
   }
 };
+// 清空
+const handleClear = () => {
+  console.log(overlays);
+  for (let i = 0; i < overlays.length; i++) {
+    if (mapStore.isAMap) {
+      if (Array.isArray(overlays[i])) {
+        overlays[i].forEach((overlay) => {
+          // 移除地图上覆盖物
+          map.remove(overlay);
+        });
+      } else {
+        // 移除地图上覆盖物
+        map.remove(overlays[i]);
+      }
+    } else {
+      if (Array.isArray(overlays[i])) {
+        overlays[i].forEach((overlay) => {
+          // 移除地图上覆盖物
+          mapUtils.getDrawVector().getSource().removeFeature(overlay);
+        });
+      } else {
+        // 移除地图上覆盖物
+        mapUtils.getDrawVector().getSource().removeFeature(overlays[i]);
+      }
+    }
+    if (selectedScope[overlaysData[i].id]) {
+      delete selectedScope[overlaysData[i].id];
+    }
+  }
+  overlays = [];
+  overlaysData = [];
+  analysisSpatial();
+};
 onMounted(() => {
   if (!mapStore.isAMap) {
     map.value.on('click', onMapClick);

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -64,6 +64,7 @@ const emits = defineEmits(['handleMenu']);
 const keyword = ref('');
 let analysisData = ref({
   townCount: '',
+  townData: [],
   villageCount: '',
   areaSize: '',
   populationSize: '',