# flood-risk-system

**Repository Path**: OrzR3/flood-risk-system

## Basic Information

- **Project Name**: flood-risk-system
- **Description**: 基于 Cesium 三维地球引擎的洪水推演可视化平台，支持多深度图层渲染、历史场景回放与实时预警推送。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-10-27
- **Last Updated**: 2026-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 洪水风险评估系统

基于 Cesium 三维地球引擎的洪水推演可视化平台，支持多深度图层渲染、历史场景回放与实时预警推送。

![洪水风险评估系统](./sysimg/洪水风险评估.png)

## 技术栈


| 层级       | 技术                                 |
| ---------- | ------------------------------------ |
| 前端框架   | Vue 3 (Composition API) + TypeScript |
| 状态管理   | Pinia                                |
| 三维引擎   | Cesium 1.118                         |
| 构建工具   | Vite 5                               |
| 样式预处理 | Less                                 |
| 后端框架   | Express 4                            |
| 实时通信   | Socket.io                            |
| 矢量渲染   | GeoJSON (MultiPolygon)               |

## 项目结构

```
flood-risk-system/
├── backend/
│   ├── node_modules/
│   ├── src/
│   │   └── app.js            # Express 服务 + REST API + Socket.io
│   └── package.json
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   ├── HeaderBar.vue      # 顶部导航栏
│   │   │   ├── MapContainer.vue   # Cesium 地图容器 + 淹没图层渲染
│   │   │   ├── AlertToast.vue     # 实时预警推送面板
│   │   │   └── TimeSlider.vue     # 底部时间轴 + 播放控制
│   │   ├── composables/
│   │   │   └── useWebSocket.ts    # Socket.io 封装
│   │   ├── stores/
│   │   │   └── floodStore.ts      # Pinia 全局状态
│   │   ├── App.vue
│   │   ├── env.d.ts
│   │   └── main.ts
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
└── README.md
```

## 快速启动

### 1. 安装依赖

```bash
# 后端
cd backend
npm install

# 前端
cd ../frontend
npm install
```

### 2. 启动后端

```bash
cd backend
node src/app.js
```

后端默认启动在 `http://localhost:3000`

### 3. 启动前端

```bash
cd frontend
npm run dev
```

前端开发服务器默认启动在 `http://localhost:5173`，API 请求和 WebSocket 通过 Vite proxy 自动转发到后端。

### 4. 访问

浏览器打开 `http://localhost:5173`

## 核心功能

### 地图可视化

- 基于 Cesium 渲染三维地球，初始视角定位于安徽巢湖/丰乐河区域
- 多深度淹没图层（0~0.5m / 0.5~1m / 1~2m / 2~3m / 3~5m），按颜色分层
- 贴地模式渲染水面多边形，水边线使用 `GroundPolylinePrimitive` 单独绘制
- 帧间平滑 Alpha 过渡动画（easeInOutCubic，500ms）

### 时间轴推演

- 8 帧历史洪水场景数据，覆盖 2020-07-20 至 2020-07-22
- 播放/暂停自动推进（1.2s/帧），支持拖拽滑块和帧标记点跳转
- 统计数据实时更新：淹没面积、影响人口、淹没农田

### 实时预警

- Socket.io 双向通信，自动重连 + 心跳保活
- 三级预警体系（红/橙/黄），推送位置 + 描述 + 时间

### 状态指示

- 顶部导航栏显示后端连接状态（每 15s 健康检查）
- 当前推演时间与数据帧数实时展示

## API 接口


| 方法 | 路径                  | 说明               |
| ---- | --------------------- | ------------------ |
| GET  | `/api/health`         | 健康检查           |
| GET  | `/api/flood-scenario` | 获取全部推演帧数据 |

## Socket.io 事件


| 事件                 | 方向             | 说明         |
| -------------------- | ---------------- | ------------ |
| `real-time-alert`    | 服务端 → 客户端 | 预警消息推送 |
| `water-level-update` | 服务端 → 客户端 | 实时水位更新 |

## 开发说明

### Cesium 注意事项

- Cesium 1.118+ 已移除 `createWorldTerrain()`，默认使用平坦椭球面
- `GeoJsonDataSource.load` 在 `clampToGround` 模式下不支持描边（outline），水边线需通过 `GroundPolylinePrimitive` 单独绘制
- 多帧切换时通过 `entityAlphaMap` + `requestAnimationFrame` 驱动 Alpha 渐变动画

### 后端修改后需重启

Node.js 不自动热更新，修改 `backend/src/app.js` 后需手动重启服务（可使用 `nodemon` 自动监听）。