优化

src/App.vue

@@ -752,36 +752,55 @@ const generateCirclePoints = (centerLng, centerLat, radius, segments = 32) => {
   return points
 }
 
-// 删除围栏
+// 删除围栏（性能优化版本：直接同步删除，快速响应）
 const removeFence = (fenceId) => {
   const index = fences.value.findIndex(f => f.id === fenceId)
-  if (index !== -1) {
+  if (index === -1) return
+  
   const fence = fences.value[index]
-    // 从地图上移除
+  
+  // 标记正在删除，避免watch触发检测
+  isRemovingFence = true
+  
+  // 直接从地图上移除（同步操作，快速完成）
   if (fence && fence.shape) {
     try {
-        // 检查对象是否在地图上
       const currentMap = fence.shape.getMap ? fence.shape.getMap() : null
       if (currentMap) {
-          // 方法1: 使用map.remove移除
         currentMap.remove(fence.shape)
       }
-        // 方法2: 设置setMap(null)确保移除
-        if (fence.shape.setMap) {
-          fence.shape.setMap(null)
-        }
-        // 方法3: 如果对象有destroy方法，调用它
-        if (fence.shape.destroy) {
-          fence.shape.destroy()
-        }
     } catch (error) {
       console.error('删除围栏时出错:', error)
     }
   }
-    // 从列表中移除
+  
+  // 从列表中移除（这会触发watch，但watch会检查isRemovingFence标记）
   fences.value.splice(index, 1)
+  
+  // 延迟重置标记，确保watch不会触发
+  setTimeout(() => {
+    isRemovingFence = false
+  }, 150) // 增加延迟时间，确保watch检查时标记仍然有效
+  
   console.log('围栏已删除:', fenceId, '剩余围栏数量:', fences.value.length)
 }
+
+// 从地图上移除围栏（优化版本：只使用最有效的方法）
+const removeFenceFromMap = (fence) => {
+  if (!fence || !fence.shape) return
+  
+  try {
+    // 只使用最有效的方法：map.remove
+    const currentMap = fence.shape.getMap ? fence.shape.getMap() : null
+    if (currentMap) {
+      currentMap.remove(fence.shape)
+    } else if (fence.shape.setMap) {
+      // 如果不在地图上，尝试setMap(null)
+      fence.shape.setMap(null)
+    }
+  } catch (error) {
+    console.error('删除围栏时出错:', error)
+  }
 }
 
 // 清除所有围栏
@@ -797,32 +816,32 @@ const clearAllFences = async () => {
       }
     )
     
+    // 标记正在删除，避免watch触发检测
+    isRemovingFence = true
+    
     // 先清除地图上的所有图形
     const fencesToRemove = [...fences.value] // 创建副本避免遍历时修改数组
     fencesToRemove.forEach(fence => {
       if (fence && fence.shape) {
         try {
-          // 检查对象是否在地图上
           const currentMap = fence.shape.getMap ? fence.shape.getMap() : null
           if (currentMap) {
-            // 方法1: 使用map.remove移除
             currentMap.remove(fence.shape)
           }
-          // 方法2: 设置setMap(null)确保移除
-          if (fence.shape.setMap) {
-            fence.shape.setMap(null)
-          }
-          // 方法3: 如果对象有destroy方法，调用它
-          if (fence.shape.destroy) {
-            fence.shape.destroy()
-          }
         } catch (error) {
-          console.error('清除围栏时出错:', error, fence)
+          console.error('清除围栏时出错:', error)
         }
       }
     })
+    
     // 清空围栏列表
     fences.value = []
+    
+    // 延迟重置标记
+    setTimeout(() => {
+      isRemovingFence = false
+    }, 150)
+    
     console.log('所有围栏已清除，当前围栏数量:', fences.value.length)
     ElMessage.success('所有围栏已清除')
   } catch (error) {
@@ -834,12 +853,29 @@ const clearAllFences = async () => {
   }
 }
 
-// 监听围栏变化，重新检测无人机位置
-watch(fences, () => {
-  if (droneData.value) {
+// 监听围栏变化，重新检测无人机位置（优化版本：移除deep监听，使用长度变化）
+let fenceWatchTimer = null
+let isRemovingFence = false // 标记是否正在删除围栏
+
+// 只监听数组长度变化，而不是深度监听，避免多次触发
+watch(() => fences.value.length, (newLength, oldLength) => {
+  // 如果正在删除围栏，跳过检测
+  if (isRemovingFence) {
+    return
+  }
+  
+  // 使用防抖，避免频繁检测导致卡顿
+  if (fenceWatchTimer) {
+    clearTimeout(fenceWatchTimer)
+  }
+  
+  fenceWatchTimer = setTimeout(() => {
+    if (droneData.value && !isDrawing.value) {
+      // 只在非绘制状态下检测，避免干扰
       checkFenceStatus(droneData.value.longitude, droneData.value.latitude)
     }
-}, { deep: true })
+  }, 300) // 300ms防抖
+})
 
 // 组件挂载时初始化地图
 onMounted(() => {