-----/技术架构文档.md

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

1. 系统架构设计

1.1 整体架构

• 前端框架: Vue 3 (Composition API)
• 地图服务: 高德地图 JS API
• 构建工具: Vite

1.2 模块划分

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

2. 数据结构设计

2.1 电子围栏数据结构

{
  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 交互设计

• 绘制模式：点击地图添加顶点
• 完成绘制：双击或点击完成按钮
• 删除围栏：选中围栏后点击删除按钮
• 取消绘制：点击取消按钮清除当前绘制