红蓝攻防对抗系统 (War-Web)
基于 Cesium.js + Vue 3 的3D红蓝攻防态势显示系统前端项目
🎯 项目介绍
本项目是一个军事态势感知与对抗演练系统的前端部分，提供：
- 🌍 基于Cesium的3D地球态势显示
- ✈️ 红蓝双方实体管理（飞机、无人机、导弹等）
- 🗺️ 任务规划与航线设计
- 📡 实时态势感知与监控
- 📊 战况评估与分析
- 🔄 WebSocket实时数据同步
🛠️ 技术栈
- 前端框架: Vue 3 + TypeScript
- 3D引擎: Cesium.js 1.111+
- UI组件: Element Plus
- 状态管理: Pinia
- 路由管理: Vue Router 4
- 构建工具: Vite 5
- 实时通信: Socket.io-client
- HTTP客户端: Axios
📋 环境要求
- Node.js: >= 18.0.0
- npm: >= 9.0.0 或 pnpm: >= 8.0.0
- 现代浏览器: Chrome 88+, Firefox 78+, Safari 14+
🚀 快速开始
1. 克隆项目
git clone <repository-url>
cd war-web
2. 安装依赖
# 使用 npm
npm install
# 或使用 pnpm (推荐)
pnpm install
3. 环境配置
创建环境变量文件：
# 开发环境
touch .env.development
编辑 .env.development:
# API服务地址
VITE_API_BASE_URL=http://localhost:8000
# WebSocket服务地址
VITE_WS_URL=ws://localhost:8000
# Cesium Ion访问令牌 (可选)
VITE_CESIUM_ION_ACCESS_TOKEN=
# 地图样式
VITE_MAP_STYLE=satellite
VITE_TERRAIN_PROVIDER=cesium_world_terrain
# 应用配置
VITE_APP_TITLE=红蓝攻防对抗系统
VITE_APP_VERSION=1.0.0
# 开发模式配置
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=false
4. 启动开发服务器
npm run dev
服务启动后访问: http://localhost:3000
📁 项目结构
war-web/
├── public/ # 静态资源
│ ├── models/ # 3D模型文件 (.glb, .gltf)
│ └── icons/ # 图标文件
├── src/
│ ├── api/ # API接口封装
│ │ ├── index.ts # API基础配置
│ │ ├── entities.ts # 实体管理API
│ │ ├── missions.ts # 任务规划API
│ │ └── websocket.ts # WebSocket客户端
│ ├── assets/ # 资源文件
│ │ ├── icons/ # SVG图标
│ │ ├── images/ # 图片资源
│ │ └── models/ # 本地3D模型
│ ├── cesium/ # Cesium相关模块
│ │ ├── EntityManager.ts # 实体管理器
│ │ ├── FlightPathManager.ts # 航线管理器
│ │ ├── TerrainManager.ts # 地形管理器
│ │ └── utils.ts # Cesium工具函数
│ ├── components/ # Vue组件
│ │ ├── common/ # 通用组件
│ │ ├── cesium/ # Cesium相关组件
│ │ └── ui/ # UI组件
│ ├── stores/ # Pinia状态管理
│ │ ├── entities.ts # 实体状态
│ │ ├── missions.ts # 任务状态
│ │ └── situation.ts # 态势状态
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ │ ├── Dashboard.vue # 主控面板
│ │ ├── EntityManagement.vue # 实体管理
│ │ ├── MissionPlanning.vue # 任务规划
│ │ ├── SituationAwareness.vue # 态势感知
│ │ └── Assessment.vue # 战况评估
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── package.json # 项目配置
├── vite.config.ts # Vite配置
├── tsconfig.json # TypeScript配置
└── README.md # 项目说明
🔧 开发说明
开发模式
# 启动开发服务器（热重载）
npm run dev
# 类型检查
npm run type-check
# 代码检查和修复
npm run lint
生产构建
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
代码规范
项目使用 ESLint + Prettier 进行代码规范检查：
# 检查代码规范
npm run lint
# 自动修复代码格式
npm run lint --fix
🔌 API配置
后端API接口
确保后端服务在 http://localhost:8000 运行，主要接口：
GET /api/entities # 获取实体列表
POST /api/entities # 创建实体
PUT /api/entities/:id # 更新实体
DELETE /api/entities/:id # 删除实体
GET /api/missions # 获取任务列表
POST /api/missions # 创建任务
PUT /api/missions/:id # 更新任务
GET /api/situation/current # 获取当前态势
WebSocket /ws/{mission_id} # 实时态势推送
WebSocket连接
系统使用WebSocket进行实时数据推送：
// 连接示例
const socket = io('ws://localhost:8000')
socket.emit('join_mission', { missionId: 'xxx' })
socket.on('entity_update', (data) => {
// 处理实体更新
})
🎨 主要功能模块
1. 3D态势显示
- Cesium地球场景初始化
- 实体3D模型加载和显示
- 相机控制和视角切换
- 地形数据加载
2. 实体管理
- 飞机、无人机、导弹等实体的CRUD
- 实体属性配置
- 实体分组和筛选
- 实体状态实时更新
3. 任务规划
- 航线规划和编辑
- 航点拖拽功能
- 任务模板管理
- 武器装备配置
4. 态势感知
- 实时态势监控
- 威胁检测和预警
- 雷达扫描效果
- 态势数据分析
5. 战况评估
- 战况回放功能
- 损失评估统计
- 战况报告生成
- 数据可视化图表
🔍 调试说明
Vue Devtools
推荐安装 Vue Devtools 浏览器扩展进行调试
Cesium调试
在浏览器控制台访问 window.viewer 获取Cesium viewer实例
网络请求调试
查看浏览器开发者工具的Network面板监控API请求
🚢 部署说明
开发环境部署
# 构建项目
npm run build
# 使用nginx或其他web服务器托管dist目录
生产环境部署
- 修改生产环境变量
.env.production - 执行构建命令
npm run build - 将
dist目录部署到Web服务器 - 配置nginx反向代理到后端API
Docker部署
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
🛟 常见问题
Q: Cesium加载失败
A: 检查网络连接，确保可以访问Cesium CDN资源
Q: WebSocket连接失败
A: 确认后端WebSocket服务正常运行，检查防火墙设置
Q: 3D模型不显示
A: 确认模型文件路径正确，检查模型格式是否为.glb或.gltf
Q: 页面性能问题
A: 启用Cesium的LOD功能，减少同时渲染的实体数量
📞 技术支持
- 开发文档:
/docs - 问题反馈: GitHub Issues
- 技术交流: 项目技术群
📄 许可证
MIT License
注意: 本项目为军事演练系统，仅供学习和演练使用，请勿用于实际军事行动。