# 实时无人机飞行轨迹显示系统使用说明 ## 系统概述 本系统已经从历史轨迹回放系统重构为实时无人机飞行轨迹显示系统，能够通过WebSocket连接后端服务，实时接收无人机的位置数据、云台姿态信息和视频帧，并在Cesium三维场景中进行可视化显示。 ## 系统架构 ``` ┌─────────────────┐ MQTT ┌─────────────────┐ WebSocket ┌─────────────────┐ │ DJI 无人机 │ ────────── │ 后端服务 │ ──────────────│ 前端显示 │ │ │ │ │ │ │ │ • 位置数据 │ │ • MQTT接收 │ │ • Cesium 3D │ │ • 云台姿态 │ │ • 数据处理 │ │ • 实时轨迹 │ │ • 视频流 │ │ • WebSocket广播 │ │ • 视频投影 │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` ## 功能特性 ### 1. 实时数据接收 - **位置数据**: 实时接收无人机的经纬度、海拔、航向角、俯仰角、横滚角 - **云台姿态**: 实时接收云台的俯仰、横滚、偏航角度 - **视频帧**: 实时接收并显示相机视频帧 - **设备状态**: 实时监控无人机在线状态、电池电量等 ### 2. 三维可视化 - **无人机位置**: 用黄色圆点和标签显示无人机当前位置 - **实时轨迹**: 红色虚线显示飞行轨迹，红色球形标记显示历史位置点 - **相机视锥**: 黄色半透明多边形显示相机视野范围投影 - **视频投影**: 将实时视频帧投影到地面上 ### 3. 自动跟踪 - **相机跟随**: 自动跟踪无人机位置，保持在视野中央 - **轨迹记录**: 自动记录并显示飞行轨迹，限制最大点数避免性能问题 ## 启动步骤 ### 1. 启动后端服务 ```bash cd /Users/zhaozhipeng/Documents/code/camera_geo/drone_system/backend python3 main.py ``` ### 2. 启动前端服务 ```bash cd /Users/zhaozhipeng/Documents/code/camera_geo/drone_system/frontend python3 -m http.server 8080 ``` ### 3. 打开前端页面 在浏览器中访问: http://localhost:8080/realtime/uav_mapping.html ## WebSocket连接配置 系统默认连接配置： - **状态数据端口**: 8765 (用于接收位置、姿态、设备状态) - **视频流端口**: 8766 (用于接收视频帧数据) - **服务器地址**: localhost 如需修改连接配置，请编辑 `uav_mapping.js` 中的 `config` 对象： ```javascript this.config = { websocketHost: 'localhost', // 后端服务器地址 statusPort: 8765, // 状态数据端口 videoPort: 8766, // 视频流端口 reconnectInterval: 3000, // 重连间隔(毫秒) trajectoryMaxPoints: 1000, // 最大轨迹点数 droneModelScale: 2.0 // 无人机模型缩放 }; ``` ## 界面元素说明 ### 1. 状态栏（左上角） 显示当前连接状态和设备信息： - 📡 设备在线状态和电量信息 - 🔌 连接断开提示和重连状态 ### 2. 信息面板（右上角） 实时显示飞行数据： - **位置信息**: 纬度、经度、海拔 - **姿态信息**: 航向角、俯仰角、横滚角 - **云台姿态**: 云台俯仰、偏航、横滚角 - **视频预览**: 当前接收到的视频帧 ### 3. 三维场景（主要区域） - **地球模型**: 基于Cesium的高精度地球模型 - **无人机**: 黄色圆点表示当前位置 - **轨迹线**: 红色虚线连接历史飞行路径 - **位置标记**: 红色球形标记每个轨迹点 - **相机视锥**: 黄色投影区域显示相机视野 - **视频投影**: 实时视频内容投影到地面 ## 技术特性 ### 1. 连接管理 - **自动重连**: WebSocket断开后自动重连，最多重试10次 - **错误处理**: 完善的错误捕获和处理机制 - **连接状态**: 实时显示连接状态和重连进度 ### 2. 数据处理 - **消息解析**: 自动解析JSON格式的WebSocket消息 - **数据验证**: 验证接收数据的完整性和有效性 - **坐标转换**: 自动进行地理坐标到Cesium坐标的转换 ### 3. 性能优化 - **轨迹限制**: 限制最大轨迹点数，防止内存泄漏 - **视频优化**: 高效的视频帧处理和Canvas操作 - **实体管理**: 动态创建和销毁Cesium实体，避免资源泄漏 ### 4. 视觉效果 - **动态投影**: 基于云台姿态动态计算地面投影区域 - **图像旋转**: 根据云台偏航角自动旋转视频帧 - **地面贴合**: 精确计算射线与地面交点，实现真实投影 ## 消息格式说明 ### 状态消息格式 ```javascript // 无人机状态 { "type": "drone_status", "data": { "device_sn": "1581F6Q8D241J00CGT7R", "is_online": true, "battery_level": 85, "timestamp": 1627789200.123 } } // 位置坐标 { "type": "coordinates", "data": { "device_sn": "1581F6Q8D241J00CGT7R", "coordinates": { "latitude": 39.9093, "longitude": 116.3974, "altitude": 100.5, "heading": 45.2, "pitch": -5.1, "roll": 2.3 }, "timestamp": 1627789200.123 } } // 云台姿态 { "type": "gimbal_attitude", "data": { "device_sn": "1581F6Q8D241J00CGT7R", "gimbal_attitude": { "pitch": -30.5, "roll": 0.8, "yaw": 15.2 }, "timestamp": 1627789200.123 } } ``` ### 视频消息格式 ```javascript { "type": "video_frame", "data": { "device_sn": "1581F6Q8D241J00CGT7R", "frame": "base64编码的JPEG数据", "timestamp": 1627789200.123, "width": 1280, "height": 720, "format": "jpeg" } } ``` ## 故障排除 ### 1. WebSocket连接失败 - 检查后端服务是否正常启动 - 确认端口配置是否正确 - 检查防火墙设置 ### 2. 无数据显示 - 检查MQTT连接是否正常 - 确认无人机是否在线并发送数据 - 查看浏览器控制台错误信息 ### 3. 视频投影异常 - 检查视频数据是否正常接收 - 确认云台姿态数据是否有效 - 验证地面高程数据是否正确 ### 4. 性能问题 - 检查轨迹点数量是否超出限制 - 监控浏览器内存使用情况 - 考虑降低视频帧率或分辨率 ## 扩展功能建议 1. **录制回放**: 添加实时数据录制功能，支持后续回放 2. **多机显示**: 支持同时显示多架无人机的轨迹 3. **地图标注**: 添加地图标记和测量工具 4. **数据导出**: 支持轨迹数据和视频的导出功能 5. **告警系统**: 添加电量低、信号弱等告警提示 6. **航线规划**: 集成航线规划和任务管理功能 ## 系统要求 - **浏览器**: Chrome 88+ / Firefox 85+ / Safari 14+ - **网络**: 稳定的WebSocket连接 - **硬件**: 支持WebGL的显卡 - **内存**: 建议8GB以上RAM（用于处理实时数据） 此系统已完全替换原有的历史轨迹回放功能，专注于实时数据的接收和显示，为无人机实时监控提供了完整的解决方案。