北斗终端系统是一个综合性的定位管理平台,集成了北斗卫星定位、无人机监控和地图标记等功能,采用前后端分离架构设计。系统通过实时采集北斗节点位置信息,在地图上动态显示定位结果,同时提供丰富的地图交互功能。
系统架构
前端架构 (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部署流程。详细部署步骤参考项目配置文件。
未来扩展
增强北斗定位精度和可靠性
提供轨迹回放和分析功能
集成更多地图数据源和图层
增强无人机控制和监控能力
1290Java响应式 Web 框架1000.00元