北斗终端系统是一个综合性的定位管理平台，集成了北斗卫星定位、无人机监控和地图标记等功能，采用前后端分离架构设计。系统通过实时采集北斗节点位置信息，在地图上动态显示定位结果，同时提供丰富的地图交互功能。 系统架构 前端架构 (qianduan1) 前端系统基于Vue 3框架和TypeScript开发，使用Vite作为构建工具，采用组件化开发模式。主要技术栈包括： Vue 3：核心框架，基于Composition API进行状态管理 TypeScript：提供类型安全的代码编写环境 Ant Design Vue：UI组件库，提供统一的界面风格 高德地图API：地图显示和交互功能的核心实现 MQTT：用于实时通信的消息协议 Axios：HTTP请求处理库 后端架构 (houduan1) 后端系统采用Java开发，提供RESTful API服务。技术栈主要包括： Java：核心开发语言 Spring Boot：应用框架 SQL：数据持久化 API接口：提供标准化的数据交换 文件结构说明 前端模块结构 Apply to GMap.vue 后端模块结构 Apply to GMap.vue 核心功能模块 1. 北斗定位系统 组件与服务 beidou-location.service.ts: 北斗位置数据获取和处理服务 use-beidou-map-markers.ts: 北斗节点标记管理服务 BeiDouLocationMarker.vue: 北斗节点信息展示面板 BeiDouControl.vue: 北斗功能控制按钮 主要功能 实时定位跟踪: 定时从后端API获取北斗节点位置数据 位置展示: 在高德地图上显示节点位置，实时更新节点移动 节点管理: 智能处理节点标记的创建、移动和删除，避免重复创建 节点交互: 支持选中节点、查看节点详情和复制坐标功能 数据流 服务层定时向API请求位置数据 数据通过响应式变量传递给地图组件 地图组件监听数据变化，调用标记管理服务更新节点标记 用户交互触发事件，更新UI状态和执行相应操作 2. 地图功能模块 主要组件 GMap.vue: 核心地图容器，集成所有地图功能 LayersTree.vue: 图层管理组件 主要功能 地图绘制: 支持点、线、面等地图元素的绘制 图层管理: 多图层叠加和控制 地图交互: 缩放、平移、点选等基本交互功能 坐标转换: 支持WGS84与GCJ02坐标系转换 3. 无人机监控 集成无人机实时状态监控和控制功能。 4. 消息通信 支持通过MQTT和WebSocket进行实时通信。 技术亮点 1. 响应式设计 使用Vue 3 Composition API进行状态管理，通过ref和reactive实现响应式数据流，保证UI与数据的同步更新。 2. 高效标记管理 使用Map数据结构高效管理节点标记 实现标记的智能复用，避免重复创建，提高性能 支持节点位置的平滑更新 3. 组件化开发 功能模块独立封装，提高代码复用性 组件间通过事件和状态共享实现解耦 单一职责原则，每个组件专注于特定功能 4. 多坐标系支持 内置WGS84与GCJ02坐标系转换功能 适配高德地图的偏移算法，确保定位准确性 使用说明 北斗功能 通过页面左上角的北斗图标按钮开启/关闭北斗定位功能 北斗节点在地图上以小圆点形式显示，蓝色表示普通状态，红色表示选中状态 点击节点可查看详细信息，包括ID、坐标和资源比等 通过节点详情面板可进行定位和坐标复制操作 地图操作 支持常规地图缩放和平移操作 可通过绘图工具创建各类地图标记和区域 支持图层管理和控制 系统部署 前端使用Vite进行构建，后端使用标准Java部署流程。详细部署步骤参考项目配置文件。 未来扩展 增强北斗定位精度和可靠性 提供轨迹回放和分析功能 集成更多地图数据源和图层 增强无人机控制和监控能力