毕设救星：Spring Boot + Vue + 百度地图 打造“智慧城市”——内涝灾害预警与应急调度系统

🎓 一、 选题背景：为什么选这个题？

同学们，如果想让你的毕设看起来像**“研究生水平”，一定要碰GIS**。

1. 视觉碾压：答辩 PPT 上放一张“城市热力图”或者“救援路线规划图”，比放一堆代码截图震撼得多。
2. 紧扣民生（Buff 叠满）：近年来“城市看海”现象频发，做**“防汛抗旱”、“智慧应急”**方向，立意非常高，符合“韧性城市”建设的国家战略。
3. 实现简单（假高深）：

• GIS= 百度/高德地图 API（复制粘贴代码）。
• 预警=if (水位 > 阈值) 变红。
• 调度= 简单的进销存（物资出库）。

🏗️ 二、 系统架构设计

为了体现系统的“空间分析能力”，我们将架构描述为GIS 可视化层 + 应急指挥业务层。

1. 技术栈选型

• 后端：Spring Boot 2.7+、MyBatis Plus
• 前端：Vue 3 + Element Plus +百度地图 JS API GL (3D版更炫)
• 算法（假）：基于距离的最近仓库搜索算法（其实就是 SQL 算个距离）
• 数据库：MySQL 8.0

2. 系统逻辑架构图 (Mermaid)

这张图展示了“积水传感器”如何触发报警，并指挥“仓库”发货。

🛠️ 三、 项目亮点包装（Project Highlights）

这部分要把“调 API”吹成“空间智能分析”。

1. 基于 GIS 的城市洪涝“数字孪生”大屏

包装话术：区别于传统的列表式管理，本系统集成了百度地图 WebGL SDK。通过在地图上渲染不同颜色的 Marker（标记点）来实时展示城市低洼区域的积水深度（绿色安全、黄色警戒、红色危险）。管理员可以上帝视角俯瞰全城灾情，实现了**“一张图管全城”**的指挥体验。

2. 智能应急物资“最优路径”调度算法

包装话术：针对灾情发生时交通拥堵的痛点，系统内置了智能路径规划引擎。当选定受灾点后，后端会自动计算周边 5km 内的所有应急物资仓库，结合百度地图 Route API的实时路况数据，自动计算出**“时间最短”**的救援路线，辅助指挥员进行科学决策。

3. 多源异构数据的实时预警阈值模型

包装话术：系统设计了动态的水位阈值监测模型。模拟接入了城市排水管网的 IoT 传感器数据，系统每隔 30 秒轮询一次状态。一旦某监测点水位超过warning_level，系统不仅会在地图上闪烁报警，还会自动触发短信/邮件通知模块，实现了全天候无人值守监控。

💻 四、 核心功能实现（保姆级代码）

核心只有两个：地图怎么画，最近的仓库怎么找。

1. 核心表结构设计

内涝监测点表 (sys_flood_point)

应急物资仓库表 (sys_warehouse)

2. 难点代码：前端加载地图与标记点 (MapDashboard.vue)

这是整个项目的门面。

<template><divclass="map-container"><divid="baiduMap"style="width:100%;height:100vh;"></div><divclass="control-panel"><h3>当前报警点：{{ warningCount }} 个</h3><el-buttontype="danger"@click="oneKeyDispatch">一键调度</el-button></div></div></template><scriptsetup>import{onMounted,ref}from'vue';constmap=ref(null);constwarningCount=ref(0);onMounted(()=>{// 1. 初始化地图 (记得去百度申请 AK)map.value=newBMapGL.Map("baiduMap");constpoint=newBMapGL.Point(116.404,39.915);// 北京中心点map.value.centerAndZoom(point,15);map.value.enableScrollWheelZoom(true);// 2. 加载监测点数据 (模拟从后端获取)constfloodPoints=[{id:1,name:"隧道A",lng:116.404,lat:39.915,level:20},{id:2,name:"立交桥B",lng:116.414,lat:39.925,level:60}// 淹了];floodPoints.forEach(p=>{// 3. 根据水位决定图标颜色consticonUrl=p.level>50?'/static/marker_red.png':'/static/marker_green.png';constmyIcon=newBMapGL.Icon(iconUrl,newBMapGL.Size(32,32));constmarker=newBMapGL.Marker(newBMapGL.Point(p.lng,p.lat),{icon:myIcon});// 4. 添加点击事件：点一下显示详情marker.addEventListener("click",()=>{constinfoWindow=newBMapGL.InfoWindow(`<h4>${p.name}</h4> <p>当前水位：<span style="color:red">${p.level}cm</span></p> <button onclick="dispatchMaterial(${p.id})">调拨物资</button>`);map.value.openInfoWindow(infoWindow,newBMapGL.Point(p.lng,p.lat));});map.value.addOverlay(marker);if(p.level>50)warningCount.value++;});});</script>

3. 难点代码：计算最近仓库 (SQL大法)

不需要写复杂的 Dijkstra 算法，利用 MySQL 的数学函数算出欧几里得距离，排序取第一个即可。

// WarehouseMapper.java@Select("SELECT *, "+"(POWER(lng - #{targetLng}, 2) + POWER(lat - #{targetLat}, 2)) AS distance "+"FROM sys_warehouse "+"ORDER BY distance ASC "+"LIMIT 1")WarehousefindNearestWarehouse(@Param("targetLng")BigDecimaltargetLng,@Param("targetLat")BigDecimaltargetLat);

📸 五、 运行效果展示 (答辩 PPT 必杀技)

这张地图是你 PPT 的核心。

1. 指挥大屏首页：

• 全屏的深色地图（科技感）。
• 地图上闪烁着几个红色的波纹圈（CSS 动画做的），代表积水报警点。
• 左侧悬浮框显示：“全市水位正常率 92%”。

2. 路线规划演示：

• 点击红色的报警点，弹窗点击“调度”。
• 地图上立刻画出一条绿色的线，连接最近的仓库和报警点。
• 显示：“已指派【城北仓库】，预计 15 分钟送达 100 个沙袋”。
• 注：这条线直接调百度地图的 DrivingRoute 接口就能画出来。

🗣️ 六、 答辩防御术（高情商回答）

Q1: 你的水位数据是从哪里来的？

A (机智版):“老师，本系统设计了标准的MQTT 物联网接口。在实际应用中，会连接城市排水管网的液位传感器。
但由于毕设演示环境限制，我编写了一个**‘数据模拟器 (Mock Server)’**，利用定时任务随机生成全城各点的水位波动数据，以此来验证系统的预警逻辑和并发处理能力。”

Q2: 你的最优路径算法只考虑了距离吗？有没有考虑交通堵塞？

A (借力打力版):“这是一个很好的问题。我在初期版本确实只使用了直线距离计算。
但在最终版本中，我集成了百度地图的 RouteMatrix API。这个 API 也是外卖平台（如美团）使用的，它计算的不仅仅是物理距离，还包含了实时路况拥堵时间。所以系统推荐的路线，实际上就是当前交通状况下的‘时间最短’路线。”
(解析：直接搬出百度地图背书，老师就不敢质疑你的算法了。)

总结：
这个项目的核心就是**“地图 SDK”**。
只要你把地图嵌进去了，能点、能弹窗、能画线，在老师眼里你就是懂Smart City的高材生。代码量比写一个商城少一半，但分量重一倍！