提交

技术架构文档.md

@@ -0,0 +1,114 @@
+# 技术架构文档 - 无人机飞行地图系统
+
+## 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 交互设计
+- 绘制模式：点击地图添加顶点
+- 完成绘制：双击或点击完成按钮
+- 删除围栏：选中围栏后点击删除按钮
+- 取消绘制：点击取消按钮清除当前绘制
+