HTML5 WebGL 实现 3D 地图助力新型冠状病毒疫情实时数据可视化

在国内新医改政策的推动下，各大医疗机构对医疗信息化和智能化的需求增长迅速。而像智慧医疗、智慧临床、云上医疗、AI 辅助诊断等的不断应用，即让医疗机构能够拥有更高的服务效率，更优的资源配置，更低的运营成本。同时也可以为患者提供更便捷和人性化的服务。

下面是上海某知名妇产科医院的效果：

结合之前在医疗可视化方面的经验，对于这次疫情地图，为了有别于现有诸多页面的千篇一律，让大家更直观方便的了解实时疫情信息。我这里在网页前端同时结合了 2D 和 3D。

先来看页面加载效果：

系统介绍

该系统总共包括两部分，分别是 2D 数据面板和 3D 地图。

• 2D数据面板包含：

1. 左侧的每日统计数据，该数据显示最近一段时间每天的确诊人数，并根据疫情变化定时刷新。同时，该部分还与地图及右侧数据联动。切换不同的日期后，地图颜色及右侧详细信息会跟着显示历史数据。
2. 表格详细信息，该表格用来显示各省及各市的疫情详细信息。包括疑似，确诊，治愈，死亡数据。该表格数据根地图及每日统计数据联动。
3. 疫情增长柱状图，该柱状图由康复，确诊，死亡三部分组成。显示近7日的疫情数据。

• 3D地图包含：

1. 各省颜色随动变化，即各省区域颜色根据该省确诊人数变化，确诊人数越多，颜色越深。
2. 疫情地区人口输出动画，即武汉地区输出人口到各省的比例。
3. 指定省份突出显示，用户点击某个省份后，该省份在地图上高亮显示，同时，右侧表格会显示当前省份的详细数据。点击背景恢复显示全国数据。

效果展示

根据官方数据，武汉地区总人口超过1400万，春节前流出人口有500多万。这些人员的去向也是大家关心的问题。这里增加了武汉到国内各省的人口流动动画。另外，每个城市点也增加了动画来进行位置展示。

鼠标移动到省区域之上时悬浮高亮

点击某个省将其从地图拉高，同时弱化其他区域并更新表格内容。点击背景恢复原样。

总结

数据可视化越来越普及，在工业物联网、电信、智慧医疗、智能交通等行业都有广泛的应用。但依我看来，数据可视化不仅仅是将数据用某种图表展示出来。更重要的，是要给大家带来良好的用户体验。数据不但要展示，更要展示的优美、协调、重点突出。传统的 2D 普通页面已经成为过去式。WebGL 的出现给我们提供了更丰富的途径（3D）来展示原本呆板的数据。正所谓，人们对美好事物的向往就是我们前端程序猿的奋斗目标。