diff --git a/src/App.vue b/src/App.vue
index 504cbf6..d459c09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,6 +69,15 @@
             {{ isInFence ? '围栏内' : '围栏外' }}
           </el-tag>
         </div>
+        <el-button 
+          @click="handleTakeoff" 
+          :type="isFlying ? 'warning' : 'success'"
+          size="small"
+          style="width: 100%; margin-top: 8px;"
+          :disabled="isFlying"
+        >
+          {{ isFlying ? '飞行中' : '起飞' }}
+        </el-button>
         <el-button 
           @click="toggleWebSocket" 
           :type="wsConnected ? 'danger' : 'primary'"
@@ -147,6 +156,7 @@ const fences = ref([])
 // 无人机相关状态
 const wsConnected = ref(false)
 const droneData = ref(null)
+const isFlying = ref(false)
 const droneMarker = ref(null)
 let wsClient = null
 let mockDataGenerator = null
@@ -226,6 +236,24 @@ const initWebSocket = () => {
   ElMessage.success('无人机数据连接成功（模拟模式）')
 }
 
+// 起飞处理
+const handleTakeoff = () => {
+  // 检查是否已有围栏
+  if (fences.value.length === 0) {
+    ElMessage.warning('请先绘制电子围栏后再起飞')
+    return
+  }
+  
+  // 如果未连接，先连接
+  if (!wsConnected.value) {
+    initWebSocket()
+  }
+  
+  // 设置飞行状态
+  isFlying.value = true
+  ElMessage.success('无人机已起飞')
+}
+
 // 切换WebSocket连接
 const toggleWebSocket = () => {
   if (wsConnected.value) {
@@ -239,6 +267,7 @@ const toggleWebSocket = () => {
       wsClient = null
     }
     wsConnected.value = false
+    isFlying.value = false // 断开连接时重置飞行状态
     ElMessage.info('已断开连接')
     conn.close();
   } else {
@@ -543,8 +572,26 @@ const handleDrawComplete = (event) => {
         addFenceLabel(fences.value[fenceIndex])
       }
     }).catch(() => {
-      // 用户取消，保持默认名称（已经在上面设置了）
-      // 不需要额外操作，标签已经用默认名称创建了
+      // 用户取消，清除刚刚添加的围栏
+      const cancelledFence = fences.value[fenceIndex]
+      if (cancelledFence) {
+        // 从地图上移除围栏和标签
+        if (cancelledFence.shape) {
+          try {
+            const currentMap = cancelledFence.shape.getMap ? cancelledFence.shape.getMap() : null
+            if (currentMap) {
+              currentMap.remove(cancelledFence.shape)
+              if (cancelledFence.label) {
+                currentMap.remove(cancelledFence.label)
+              }
+            }
+          } catch (error) {
+            console.error('清除围栏时出错:', error)
+          }
+        }
+        // 从列表中移除
+        fences.value.splice(fenceIndex, 1)
+      }
     })
     
     // 重置绘制状态