前言2019年12月以来，湖北省武汉市发现多起肺炎病例，确诊为急性呼吸道由新型冠状病毒感染引起的呼吸道感染。传染病在全国蔓延，肺炎疫情牵动人心。人们每天醒来的第一件事就是关注疫情的进展，希望这场自然灾害早日结束，社会恢复正常秩序。不久前，在前端小伙伴和设计小伙伴的配合下，我们推出了移动版疫情地图和GIS版疫情地图，而这次我们推出了PC版疫情地图，浅色系并以2D、3D方式全面展示疫情的最新动态和历史数据，希望给大家带来更愉悦的观影体验，减少焦虑。先打开页面感受下：点击预览还有GIS版预览：GIS版可以在上方导航栏点击打开，如果要单独打开可以点击GIS疫情地图版数据来源说明CDC、百度、腾讯、丁香园都有自己的疫情地图，我们的数据也来自这里，这部分在上篇文章《HTML5 WebGL 实现 3D 地图助力新型冠状病毒疫情实时数据可视化》有详细讲解，就不赘述了在这里重复一遍。系统介绍数据展示部分：1.从左上角的表格开始。这部分显示了各省的累计数据和该省各区域的数据。您可以点击展开或收起，在3D地图上点击相应的位置可以筛选出该区域的相应数据。单独显示，点击空白处恢复显示全国数据。2、接下来是左下方的疫情播报部分。这部分的数据是根据各卫健委的数据采集并展示在轮播中的。这里加入表格的垂直偏移和缓动效果，让滚动更加自然美观。3、最下方最显眼的是最新的确诊、疑似、治愈、死亡等数据。上方位置还有时间线。点击旁边的播放按钮，页面上的数据会根据不同地区不同日期的确诊病例数动态变化。地图的涂色，对比旁边的色卡，可以清楚地观察到各个地区的疫情严重程度。4、右侧图表按时间排序显示确诊病例、疑似病例、治愈病例、死亡病例数据，疫情发展趋势一目了然。5、在上方导航栏点击预览GIS版疫情地图、CDC官网、手机版疫情地图。3D地图部分：淡入效果。打开这个demo后，3D地图从远处缓缓飞入眼帘，过渡自然。这部分是通过ht自带的startAnim函数实现的。您可以指定任何缓动函数来实现不同的飞行效果。这个在后面的空间里会介绍。点击省份效果，武汉输出的流动动画，各省省会的旋转动画。程序示意图：1）2D和3D场景的执行和交互2）全局事件管理器整个项目涉及到2D和3D交互，所以使用一个全局事件管理器类实例来管理：classNotifierManager{constructor(){this._eventMap={};}add(key,func,scope,first=false){letnotify=this._eventMap[key];如果(!notify)notify=this._eventMap[key]=newht.Notifier();notify.add(func,scope,first);}fire(key,e){constnotify=this._eventMap[key];如果（！通知）返回；通知.fire(e);}}constevent=newNotifierManager();主要代码：1）点击3D地图，使用ht事件分发改变2D内容：相关代码如下：event.fire('clickProvince',{data:this.g3dProvince,node:data});clickProvince(dataList,node){letprovince=node.getDisplayName();//选中省份透明度为1，其他为0.4dataList.forEach(data=>{data.s('shape3d.opacity',data===node?1:0.4);})//只有显示省份数据if(this.areaDatas&&this.areaDatas.length>0){letprovinceData=[];this.areaDatas.forEach((项目)=>{if(item.area===province||item.host===province){item.expand=true;provinceData.push(item);}});this.detailTable.a('ht.dataSource',provinceData);}}2）Slider播放Slider播放使用startAnim的Frame-Based启动动画：相关代码如下：//Slider播放playDateSlider(){this.playMenu.s('state','Pause');让value=this.dateSlider.a('ht.value');让x=this.dateSlider.a('dateArea')[0];//如果最后一天的数据被重置if(value>=100||x>=SLIDER_TIP_END_X){//重置地图背景颜色event.fire('resetMapColor');值=this.sliderValue=0;x=SLIDER_TIP_START_X；this.dateSlider.s({'ht.value':0,'text':this.sliderDateList[0],});this.dateSlider.a('dateArea',[SLIDER_TIP_START_X,SLIDER_TIP_Y,SLIDER_TIP_WIDTH,SLIDER_TIP_HEIGHT]);}//开始动画this.sliderAnim=ht.Default.startAnim({frames:100,interval:300,行动:()=>{this.onPlay=true;this.timerJudgment(value);//达到最大值时停止if(value===100){this.onPlay=false;this.dateSlider.a('ht.value',value);//最新数据this.initBottom(17);this.playMenu.s('state','play');这个.sliderAnim.stop();};值+=1；这个.sliderValue+=1;this.dateSlider.a('ht.value',value);x+=步幅；如果(x>=SLIDER_TIP_END_X){this.dateSlider.a('dateArea',[SLIDER_TIP_END_X,SLIDER_TIP_Y,SLIDER_TIP_WIDTH,SLIDER_TIP_HEIGHT]);}}})}3)3D入场动画对于视角变化的动画，ht有自己的moveCamera方法相关代码如下：();}else{return;}}});}4)二维表格动画。每1.5秒更改表格的垂直偏移值，并通过帧动画播放这个过程，以达到流畅的浏览体验。相关代码如下：//疫情广播动画playTable(){lettable=this.newsTable;//表格Y轴偏移lettranslateY=table.a('ht.translateY');this.tableInterval=ht.Default.startAnim({frames:Infinity,interval:1500,action:()=>{if(translateY<0){translateY=0;}lettemp=this.articleDataSource.shift();这.articleDataSource.push(temp);ht.Default.startAnim({frames:20,interval:10,finishFunc:()=>{translateY-=32;},action:(v,t)=>{table.a('ht.translateY',translateY-32*v);}});}});}5)预览其他版本疫情地图和CDC官网使用ht事件分发加载和切换绘图。以GIS版本为例：相关代码如下：if(kind==='mobile'){event.fire('showMobile');}elseif(kind==='cdc'){event.fire('showCdc');}elseif(kind==='gis'){event.fire('showGis');}总结PC版疫情图的大致效果就是这些，你可以感受到现代浏览器支持的3D技术可以达到非常直观的效果，交互性也很好。物联网和即将到来的5G给很多行业带来了新的机遇和挑战。海量数据如何更生动？展现在人们面前？跨平台浏览器无疑是最好的选择。依托于浏览器，WebGL技术在数据处理方面有着天然的优势。图普软件作为工业可视化领域的一线重磅参与者，积累了大量宝贵的行业经验。前不久，它做了一份关于过去19年的报告。经过总结、回顾和分享，我整理了《2019-分享数百个 HT 工业互联网 2D 3D 可视化应用案例分享》，希望大家喜欢。写在最后，目前，在举国上下不懈努力下，下好一盘棋，齐心协力抗击疫情，目前，疫情的扩散蔓延得到初步控制。当紧急情况来临时，我很幸运能成为这个国家的一员。面对疫情，各公共机构的执行力有效遏制了疫情的蔓延。一方有难，各方拥护，保障了各地物资供应，越来越坚定了全国人民打赢这场战役的决心。但不幸的是，新冠病毒的魔爪已经伸向了世界其他地区，但相信在中国人民和世界各国人民的共同努力下，这场灾难的蔓延一定会被阻止。图普科技也将关注最新动态，以自己的方式支持疫情。在此先睹为快，世界版疫情地图即将与大家见面，敬请期待！
