项目需求
- 数字孪生指挥舱
- 地图: 作为界面的基础,用于承载所有地理空间数据 。建议使用如 CesiumJS 或 Mapbox GL JS 等技术实现。
- 动态图层管理: 用户可以自由开关和叠加多种数据图层 ,包括:
- 基础地理图层(卫星影像、地形图、行政区划)。
- 感知网络层(各类传感器、监测站的地理位置分布) 。
- 风险分析层(如内涝风险等级热力图、山洪危险区) 。
- 关键设施层(水库、泵站、电力枢纽等) 。
- 时间轴控制面板: 一个可拖动的播放式时间轴,允许用户查看历史灾害回放、当前实时状况以及未来(模拟的)预测演变过程 。这是实现“动态推演” 和“淹没模拟” 的关键交互控件
- 空间查询与分析工具:
- 数据钻取: 点击地图上的任意元素(如一个传感器、一个水库、一个风险区域),能够弹窗显示其详细的静态信息和(模拟的)动态数据图表
- 数据可视化与智能监测
这部分负责将抽象的数据和AI模型状态,以直观的方式呈现给用户。
- 全域感知网络可视化: 在2D地图上用不同的图标清晰地展示各类感知设备 ,如水位雷达 、多参数气象传感器 、物联网终端 等。
- 实时状态仪表盘: 界面侧边栏或顶部应包含一个仪表盘,用于展示(模拟的)关键性能指标(KPIs)和系统状态:
- 核心指标: 如预测精度 (95%)、预警速度提升 (60%)、响应延迟 (<305s) 等 。
- 系统状态: 可视化云端与边缘节点的连接状态,模拟展示数据传输情况 。
- 图表与计量器: 用于展示具体监测点的数据,例如水库水位变化曲线、过去24小时降雨量柱状图等。
- AI预测、预警与模拟
这是展示项目核心AI能力的部分,前端需要通过可视化的方式“讲述”AI如何工作和其产出结果。
- 多级预警系统可视化:
- 预警信息展示: 当(模拟的)预警被触发时,地图上的相应区域应以醒目的颜色(如黄、橙、红)高亮,并伴有清晰的弹窗提示 。
- 预警列表: 一个专门的面板,按时间顺序列出所有当前和历史的预警事件。
- 可解释AI (XAI) 面板: 这是体现“智能”的关键。当用户查看一个预警时,需要有一个模块来解释预警触发的原因 。例如:
红色预警触发原因分析: * 未来1小时预测降雨量 > 80mm (贡献度: +45%)
- 水汽总量 (tcwv) > 70mm (贡献度: +30%)
- 低层辐合强度 > 阈值 (贡献度: +15%)
- 多级预警系统可视化:
- 预警信息推送 应急预案分发模拟: 设计一个界面,可以(模拟)将生成的预警信息和应对预案一键分发给不同的部门(如交通、水利、应急管理等)
实现
至于地图,看了看MapBox GL Js,感觉还不错,Gemini也有实现思路,暂时用这个
在用Mapbox的时候需要用圆圈来表示这个地区的“区域内涝风险等级”,我暂且将它分为1~5 5个等级,然后由冷到暖来体现其危险程度,这里就需要清洗geojson的数据,
仔细观察这个数据
{
"type": "Feature",
"properties": {
"Injured": 1,
"Killed": 0,
"Factor1": "Unspecified",
"Hour": 13,
"Day": "Tue",
"Casualty": 1
},
"geometry": {
"type": "Point",
"coordinates": [-73.8999552, 40.8574211]
}
}其中,MapBox是根据Casualty和位置坐标来绘制其中的圆圈位置,颜色,半径的
mapRef.current.addLayer({
id: 'collisions',
type: 'circle',
source: {
type: 'geojson',
data: './src/feature/index/data/collisions1601.geojson', // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'Casualty']],
0,
4,
5,
24,
],
'circle-color': [
'interpolate',
['linear'],
['number', ['get', 'Casualty']],
0,
'#2DC4B2',
1,
'#3BB3C3',
2,
'#669EC4',
3,
'#8B88B6',
4,
'#A2719B',
5,
'#AA5E79',
],
'circle-opacity': 0.8,
},
})
因此,我需要清洗这里的数据,其中关键数据为: 第一,geometry.coordinates坐标(经度, 纬度),我需要这里的坐标和地理位置严谨对应,必须在内陆的城市/城镇/乡村当中绘制,而不是随便的坐标坐标到海里或者山上去了。而且,我需要这些坐标是在福建省的范围内,且坐标主要集中在省内的各个主要城市当中
第二,需要添加的属性properties.Level,总共5个等级,用于描述通过各个数据,大模型自行评估,分析这个时空下的内涝危险指数,区域内涝风险等级,这个字段需要和坐标有关联,例如位置很近的相邻的坐标之间level等级不能相差过大,
第三,properties.Hour,用于过滤是预测多少个小时过后的(最大24小时)的坐标属性,我需要在同一个预测小时中,看到合理,且有关联的各个坐标预测数据,且在相邻的预测小时之间,level和geometry需要有递进的关系,不能跨度过大,
然后还需要一些其他的辅助数据 第四,properties.Depth,AI预测的未来淹没深度 (cm) 第五,properties.Population,AI预测受影响人口数量(万),这里要与坐标严谨对应,不能让受影响的人口大于这里的本地人口 第六,properties.Property,AI预测可能影响的资产数量(万元),这里也要与坐标严谨对应,如果坐标地址为城市,影响的资产可能会很大,如果地址为乡镇,可能会较小
因此,对应的geojson结构为:
{
"type": "Feature",
"properties": {
"Level":2,
"Hour": 13,
"Depth":2,
"Population":0.3,
"Property":200,
},
"geometry": {
"type": "Point",
"coordinates": [-73.8999552, 40.8574211]
}
}在改造Slider的时候,需要对Radix UI进行定制化改造,但这个库给我封装得太好了,以至于不知道内部细节就可以直接使用,但需要进一步的定制化改造,就需要了解Radix ui是如何做的
Radix UI采用的是WAI-ARIA 设计模式
坐标数据
26.070469, 119.239069 26.043985, 119.261398 26.029292, 119.311147 25.993557, 119.333169 25.987714, 119.367365 25.984717, 119.389817 25.973558, 119.391837 25.983420, 119.403674 25.981863, 119.419841 25.992243, 119.424749 25.995498, 119.403123 26.009244, 119.390499 26.014044, 119.374962 26.027177, 119.358098 26.065879, 119.354517 26.062767, 119.322183 26.060342, 119.296188 26.070456, 119.282331 26.074605, 119.266452 26.085237, 119.262699 26.095089, 119.298498 26.090163, 119.319284 26.089645, 119.325347 26.094830, 119.351907 26.081347, 119.359702 26.139116, 119.314587 26.144782, 119.333037 26.150448, 119.299535 26.088107, 119.197088 26.065866, 119.202429 26.044056, 119.200487 26.058015, 119.180094 26.089415, 119.165528 26.122551, 119.137368 26.134321, 119.186406 26.139552, 119.157274 26.145752, 119.173197 26.140621, 119.108689 26.043050, 119.194707 26.021519, 119.207121 26.008287, 119.218091 25.991624, 119.229374 25.976058, 119.210210 25.965582, 119.265318 25.955978, 119.250024 25.944409, 119.243712 25.938296, 119.259492 25.959034, 119.278428 25.909678, 119.228439 25.903236, 119.231473 25.916338, 119.224190 25.946276, 119.206767 25.971195, 119.209077 25.873935, 119.070648 25.886290, 119.070304 25.867447, 119.045928 25.888452, 119.009193 25.901733, 119.008850 25.873848, 118.962344 25.881056, 118.933940 25.862489, 118.925686 25.872538, 118.931755 25.854640, 118.937995 25.862172, 118.947794 25.861383, 118.930492 25.902891, 118.924368 26.219229, 119.077749 26.226005, 119.093199 26.213685, 119.075346 26.192437, 119.001436 26.183370, 119.004901 26.228105, 118.859953 26.211553, 118.881316 26.184287, 118.804819 26.114050, 118.763436 26.160702, 118.749578 26.093645, 118.771578 26.178074, 119.358550 26.190927, 119.273825 26.225172, 119.345215 26.232575, 119.354391 26.249924, 119.393077 26.242909, 119.393741 26.217452, 119.411623 26.239285, 119.457694 26.219244, 119.526447 26.217066, 119.521592 26.208035, 119.547288 26.242410, 119.593799 26.270558, 119.500669 26.301187, 119.494791 26.145294, 119.556714 26.128967, 119.546165 26.107738, 119.535253 26.087159, 119.512338 26.075071, 119.503244 26.087159, 119.552713 26.094068, 119.569261 26.086101, 119.573849 26.088413, 119.592590 26.073578, 119.606507 26.100774, 119.615836 26.097065, 119.628835 26.064374, 119.636634 26.064688, 119.636524 26.030563, 119.601318 26.025341, 119.594283 26.005275, 119.592142 26.019844, 119.616612 25.985206, 119.600095 26.000877, 119.627011 25.978057, 119.608047 25.992354, 119.624870 25.991255, 119.634352 25.973658, 119.625176 25.994829, 119.650869 26.003076, 119.659433 26.014347, 119.672891 25.982182, 119.678397 25.924703, 119.631599 25.921402, 119.598871 25.934605, 119.592448 25.942032, 119.584190 25.930204, 119.573485 25.938731, 119.587554 25.928004, 119.590919 25.922502, 119.591225 25.892090, 119.607146 25.908432, 119.620122 25.881972, 119.571676 25.867732, 119.546587 25.941304, 119.544015 25.956530, 119.500104 25.963817, 119.508974 25.973579, 119.504386 25.935077, 119.482823 25.923936, 119.464930 25.910319, 119.466612 25.891747, 119.444131 25.880602, 119.446578 25.890921, 119.471506 25.874548, 119.458965 25.854809, 119.473692 25.846964, 119.481797 25.850405, 119.460539 25.837329, 119.451669 25.774948, 119.614287 25.735963, 119.586643 25.726788, 119.586279 25.704176, 119.541903 25.712697, 119.493526 25.695982, 119.458607 25.716471, 119.472921 25.725434, 119.451725 25.717055, 119.400035 25.703999, 119.390086 25.723291, 119.384030 25.768638, 119.423740 25.774871, 119.411628 25.787724, 119.407735 25.758510, 119.373563 25.743120, 119.361668 25.728508, 119.359721 25.711361, 119.337661 25.726755, 119.330307 25.726755, 119.330307 25.572670, 119.408519 25.619094, 119.440096 25.641128, 119.413493 25.658091, 119.433607 25.631379, 119.446584 25.618508, 119.450261 25.611293, 119.458263 25.608730, 119.480420 25.571331, 119.392032 25.580974, 119.383096 25.547099, 119.375123 25.537352, 119.370750 25.543618, 119.362005 25.533765, 119.564297 25.559362, 119.561751 25.577409, 119.533743 25.493059, 119.525377 25.471060, 119.564297 25.473864, 119.586300 25.513545, 119.770935 25.522755, 119.775460 25.561481, 119.763093 25.587729, 119.764548 25.557543, 119.801649 25.599539, 119.740541 25.537853, 119.738359