# 技术架构文档 - 无人机飞行地图系统

## 1. 系统架构设计

### 1.1 整体架构
- **前端框架**: Vue 3 (Composition API)
- **地图服务**: 高德地图 JS API
- **构建工具**: Vite

### 1.2 模块划分
- **地图容器模块**: 负责地图的初始化和全屏显示
- **电子围栏模块**: 负责围栏的绘制、管理和删除

## 2. 数据结构设计

### 2.1 电子围栏数据结构
```javascript
{
  id: string,           // 围栏唯一标识
  points: Array<[lng, lat]>,  // 围栏顶点坐标数组
  polygon: AMap.Polygon,      // 高德地图多边形对象
  createdAt: Date       // 创建时间
}
```

### 2.2 状态管理
- 使用 Vue 3 的 `ref` 和 `reactive` 管理组件状态
- 围栏列表存储在响应式数组中

## 3. 接口(API)设计

### 3.1 地图初始化
- **函数名**: `initMap()`
- **功能**: 初始化高德地图实例
- **参数**: 无
- **返回值**: Promise<AMap.Map>

### 3.2 电子围栏绘制
- **函数名**: `startDrawingFence()`
- **功能**: 开始绘制电子围栏模式
- **参数**: 无
- **返回值**: void

- **函数名**: `addFencePoint(lng, lat)`
- **功能**: 添加围栏顶点
- **参数**: 
  - lng: number (经度)
  - lat: number (纬度)
- **返回值**: void

- **函数名**: `completeFence()`
- **功能**: 完成围栏绘制
- **参数**: 无
- **返回值**: void

### 3.3 电子围栏删除
- **函数名**: `removeFence(fenceId)`
- **功能**: 删除指定围栏
- **参数**: 
  - fenceId: string (围栏ID)
- **返回值**: void

- **函数名**: `clearAllFences()`
- **功能**: 清除所有围栏
- **参数**: 无
- **返回值**: void

## 4. 核心算法与伪代码

### 4.1 地图初始化流程
```
1. 加载高德地图JS API
2. 创建地图容器DOM元素
3. 初始化地图实例，设置中心点和缩放级别
4. 绑定地图点击事件
```

### 4.2 电子围栏绘制流程
```
1. 用户点击"开始绘制"按钮，进入绘制模式
2. 用户在地图上点击，添加围栏顶点
3. 实时更新围栏预览（多边形）
4. 用户点击"完成绘制"或双击完成围栏
5. 保存围栏到围栏列表
6. 退出绘制模式
```

### 4.3 电子围栏删除流程
```
1. 用户选择要删除的围栏（通过ID或点击）
2. 从地图上移除多边形对象
3. 从围栏列表中移除该围栏数据
4. 更新地图显示
```

## 5. 技术实现要点

### 5.1 高德地图集成
- 使用 `@amap/amap-jsapi-loader` 加载高德地图API
- 配置安全密钥（key）
- 设置地图样式为全屏显示

### 5.2 电子围栏绘制
- 使用高德地图的 `AMap.Polygon` 类创建多边形
- 监听地图点击事件，收集坐标点
- 支持实时预览围栏形状
- 至少需要3个点才能形成围栏

### 5.3 交互设计
- 绘制模式：点击地图添加顶点
- 完成绘制：双击或点击完成按钮
- 删除围栏：选中围栏后点击删除按钮
- 取消绘制：点击取消按钮清除当前绘制