🌊 基于Next.js和React的现代化山洪预警监测系统，采用3D卫星地图技术，提供实时水文数据监测和智能预警服务。
- 3D卫星地图显示 - 基于Google卫星图层的真实地理环境展示
- 实时监测系统 - 水位、降雨量、温度、湿度等多维度数据监控
- 智能预警机制 - 多级预警系统，支持危险、警告、正常三种状态
- 科技化UI设计 - 深色主题，发光效果，动画过渡，现代化交互体验
- 预报分析系统 - 气象预报、远程监控、水位预报三大模块
- 数据可视化 - Chart.js图表展示历史趋势和预测数据
- 无边框全屏设计 - 摒弃传统页头页脚，提供沉浸式监测体验
- 实时数据更新 - 支持一键刷新和自动更新机制
- 响应式布局 - 适配不同屏幕尺寸，优化用户体验
- 性能优化 - 地图瓦片缓存，减少加载闪烁，提升渲染性能
- Next.js 15.2.4 - React全栈框架，支持SSR和静态生成
- React 19 - 用户界面构建库，最新版本
- TypeScript 5 - 类型安全的JavaScript超集
- Tailwind CSS 3.4.17 - 原子化CSS框架，快速样式开发
- Lucide React 0.454.0 - 现代化图标库
- Radix UI - 无障碍的原生UI组件集合
@radix-ui/react-accordion- 手风琴组件@radix-ui/react-dialog- 对话框组件@radix-ui/react-dropdown-menu- 下拉菜单@radix-ui/react-popover- 弹出框组件@radix-ui/react-tooltip- 工具提示
- Leaflet 1.9.4 - 开源JavaScript地图库
- React Leaflet 5.0.0 - Leaflet的React封装组件
- Chart.js 4.4.9 - 强大的图表库
- React Chart.js 2 5.3.0 - Chart.js的React组件
- Recharts 2.15.0 - 基于React的图表库
- React Hook Form 7.54.1 - 高性能表单处理库
- Zod 3.24.1 - TypeScript优先的模式验证库
- @hookform/resolvers 3.9.1 - Hook Form验证器集成
- clsx 2.1.1 - 条件CSS类名工具
- class-variance-authority 0.7.1 - CSS变体管理
- tailwind-merge 2.5.5 - Tailwind类名合并工具
- date-fns 4.1.0 - 现代JavaScript日期工具库
- PostCSS 8 - CSS处理工具
- Autoprefixer 10.4.20 - CSS自动添加厂商前缀
- ESLint - 代码质量检测工具
zhiyunfengwei/
├── app/ # Next.js App Router
│ ├── monitoring/ # 监测页面
│ │ └── page.tsx # 主监测页面入口
│ ├── history/ # 历史数据页面
│ ├── settings/ # 系统设置页面
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局组件
│ └── page.tsx # 首页
├── components/ # 可复用组件
│ ├── monitor/ # 监测相关组件
│ │ ├── 3d-satellite-monitoring.tsx # 3D卫星监测主组件
│ │ ├── forecast-panel.tsx # 预报面板组件
│ │ └── enhanced-map-monitoring.tsx # 增强地图组件(备用)
│ ├── warning/ # 预警组件
│ │ └── warning-alert.tsx # 预警提醒组件
│ └── ui/ # 基础UI组件
├── public/ # 静态资源
│ ├── leaflet/ # Leaflet地图图标
│ └── images/ # 项目图片资源
├── tailwind.config.ts # Tailwind配置
├── package.json # 项目依赖配置
└── README.md # 项目文档
功能描述: 系统核心组件，提供完整的监测界面 主要特性:
- 基于Google卫星图层的高清地图显示
- 实时监测站数据展示和状态管理
- 交互式地图标记和弹窗信息
- 左侧监测站控制面板
- 右侧数据分析和趋势图表
- 底部功能控制栏
- 科技化动画效果和毛玻璃背景
核心技术:
// 地图优化配置
<MapContainer
preferCanvas={true} // Canvas渲染提升性能
keepBuffer={4} // 缓存瓦片减少闪烁
updateWhenIdle={false} // 实时更新
updateWhenZooming={true} // 缩放时更新
>
<TileLayer
url="https://mt{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
subdomains={['0', '1', '2', '3']} // 多子域名加速
maxZoom={20}
keepBuffer={4}
/>
</MapContainer>功能描述: 多功能预报分析面板 主要模块:
- 气象预报: 温度趋势图、降雨量柱状图、风力气压数据
- 远程监控: 视频监控、无人机巡检、设备状态监控
- 水位预报: AI预测模型、关键指标、水利设施状态
数据可视化:
// Chart.js配置示例
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { grid: { color: "rgba(255, 255, 255, 0.1)" } },
y: { grid: { color: "rgba(255, 255, 255, 0.1)" } }
}
};type MonitorStation = {
id: string; // 监测站唯一标识
name: string; // 监测站名称
coordinates: [number, number]; // GPS坐标
status: "normal" | "warning" | "danger"; // 状态
waterLevel: { // 水位数据
current: number; // 当前水位
warning: number; // 警戒水位
danger: number; // 危险水位
trend: "up" | "down" | "stable"; // 趋势
history: Array<{time: string; value: number}>; // 历史
};
rainfall: { /* 降雨量数据 */ };
temperature: number; // 温度
humidity: number; // 湿度
windSpeed: number; // 风速
pressure: number; // 气压
lastUpdate: string; // 更新时间
};- 主色调: 深蓝灰色系 (
bg-gray-900) - 强调色: 青色 (
#00d4ff) - 用于数据高亮和交互元素 - 状态色彩:
- 正常: 绿色 (
#44ff44) - 警告: 橙色 (
#ffaa00) - 危险: 红色 (
#ff4444)
- 正常: 绿色 (
/* 自定义动画关键帧 */
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slide-up {
0% { opacity: 0; transform: translateY(100px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(0, 212, 255, 0.5); }
50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.8); }
}.backdrop-blur-md {
backdrop-filter: blur(12px);
background: rgba(17, 24, 39, 0.95);
}- Node.js 18.0 或更高版本
- npm 或 yarn 包管理器
# 克隆项目
git clone [项目地址]
cd zhiyunfengwei
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 启动生产服务器
npm start- 开发环境:
http://localhost:3000 - 监测系统:
http://localhost:3000/monitoring
原始Leaflet地图存在瓦片分块加载的视觉问题，通过以下优化措施解决：
- 多子域名加载 - 使用Google地图的4个子域名并行加载瓦片
- 缓冲区设置 -
keepBuffer={4}预加载周围瓦片 - 实时更新 -
updateWhenIdle={false}地图移动时持续更新 - Canvas渲染 -
preferCanvas={true}提升渲染性能 - 高缩放级别 - 支持最高20级缩放，提供详细地理信息
<TileLayer
url="https://mt{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
subdomains={['0', '1', '2', '3']} // 多子域名
maxZoom={20} // 最大缩放
minZoom={10} // 最小缩放
tileSize={256} // 瓦片大小
keepBuffer={4} // 缓冲瓦片
updateWhenIdle={false} // 实时更新
updateWhenZooming={true} // 缩放更新
/>- 使用React Hooks进行本地状态管理
- 监测站数据通过
useState集中管理 - 实时时间更新使用
useEffect定时器
// 数据刷新功能
const refreshData = () => {
setIsDataLoading(true);
// 模拟API调用
setTimeout(() => {
setIsDataLoading(false);
console.log("数据刷新完成");
}, 1500);
};- WebSocket实时数据 - 替换模拟数据为真实API接口
- 用户权限管理 - 添加登录认证和角色权限
- 历史数据分析 - 长期趋势分析和数据挖掘
- 移动端优化 - PWA支持和移动端适配
- 多语言支持 - 国际化配置
- AI预测模型 - 集成机器学习算法进行智能预警
// 建议的API接口结构
interface APIEndpoints {
getStations: () => Promise<MonitorStation[]>;
getStationData: (stationId: string) => Promise<StationData>;
getForecast: (type: string) => Promise<ForecastData>;
updateStationStatus: (stationId: string, status: string) => Promise<void>;
}本项目采用 MIT 许可证
欢迎提交Issue和Pull Request来改进项目
开发团队: 智云锋卫项目组
最后更新: 2025年1月
版本: v1.0.0