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

1 const MyConst = {
2   COLOR_0: 'rgb(235,235,235)',
3   COLOR_9: 'rgb(245,165,130)',
4   COLOR_99: 'rgb(190,30,10)',
5   COLOR_999: 'rgb(130,25,25)',
6   COLOR_9999: 'rgb(77,5,5)',
7 };

 1   refreshAreaColor() {
 2     for (const key in this.areaDataObj) {
 3       if (Object.prototype.hasOwnProperty.call(this.areaDataObj, key)) {
 4         const dataNode = this.areaDataObj[key].data; // 省区域 Node
 5         const total_confirm = this.areaDataObj[key].total_confirm; // 该省累计确诊数量
 6         switch (true) {
 7           case total_confirm == 0:
 8             dataNode.s('shape3d.blend', MyConst.COLOR_0);
 9             break;
10           case total_confirm <= 9:
11             dataNode.s('shape3d.blend', MyConst.COLOR_9);
12             break;
13           case total_confirm <= 99:
14             dataNode.s('shape3d.blend', MyConst.COLOR_99);
15             break;
16           case total_confirm <= 999:
17             dataNode.s('shape3d.blend', MyConst.COLOR_999);
18             break;
19           default:
20             dataNode.s('shape3d.blend', MyConst.COLOR_9999);
21             break;
22         }
23       }
24     }
25   }

 1   start3DAnim() {
 2     // 设置城市点旋转模式
 3     this.cityPoints.forEach((data) => {
 4       data.setRotationMode('zxy');
 5     });
 6 
 7     let uv_offset = 0;
 8     let point_ang = 0;
 9     let c_h = 2, wh_c_h = 2; 
10     const wuhanCylinder = this.dm3d.getDataByTag('wuhanCylinder'); // 武汉地区单独处理
11     setInterval(()=> {
12         point_ang = point_ang + 0.01;
13         uv_offset = uv_offset + 0.01;
14         
15         c_h = c_h + 0.2; 
16         if(c_h > 20) {
17             c_h = 2;
18         }
19         wh_c_h = wh_c_h + 0.6;
20         if(wh_c_h > 60) {
21           wh_c_h = 2;
22         }
23         // 城市点旋转
24         this.cityPoints.forEach((val) => {
25             val.setRotationZ(point_ang);
26         });
27         // 城市点圆柱增长
28         this.cylinders.forEach((val) => {
29             val.setTall(c_h);
30         });
31         // 武汉地区单独处理
32         wuhanCylinder.setTall(wh_c_h);
33         // 城市间飞线
34         this.movingLines.forEach((val) => {
35             val.s('shape3d.uv.offset', [-uv_offset, 0]);
36         });
37         
38     }, 30);

 1   handleInteractive3d(e) {
 2     let {
 3       data, // 事件指向的对象
 4       kind // 事件类型
 5     } = e; // e为事件
 6     if (!data) {
 7       return;
 8     }
 9 
10     const selectedProvience = data.getDisplayName(); // 省名称
11 
12     // 悬浮高亮
13     const onEnterBorderColor = "rgb(250,250,87)";
14     const onLeaveBorderColor = "rgb(61,61,61)";
15     if (kind == 'onEnter' && this.proviences.indexOf(selectedProvience) >= 0) {
16       this.updateAreaBorder(data, onEnterBorderColor);
17       return;
18     }
19     if (kind == 'onLeave' && this.proviences.indexOf(selectedProvience) >= 0) {
20       this.updateAreaBorder(data, onLeaveBorderColor);
21       return;
22     }
23     ……    
24   }
25 
26   updateAreaBorder(data, color) {
27     data.s("wf.color", color); // 更新边框颜色
28   }

 1   handleInteractive3d(e) {
 2     let {
 3       data,
 4       kind
 5     } = e;
 6     // 如果点击背景，则恢复区域颜色及y轴方向的值。
 7     if (kind == 'clickBackground') {
 8       this.updateAreaOpacity(1); //还原透明度
 9       this.updateTable(); // 恢复表格内容为全国数据
10       return;
11     }
12 
13     if (!data) {
14       return;
15     }
16 
17     const selectedProvience = data.getDisplayName();
18 
19     // 点击拉高
20     if (kind == 'clickData' && this.proviences.indexOf(selectedProvience) >= 0) {
21       this.showProvienceData(selectedProvience);
22     }
23   }
24 25 
26   updateAreaOpacity(opacity) {
27     for (const key in this.areaDataObj) {
28       if (Object.prototype.hasOwnProperty.call(this.areaDataObj, key)) {
29         const dataNode = this.areaDataObj[key].data; 
30         dataNode.s('shape3d.opacity', opacity); // 改变透明度
31         const [x, y, z] = dataNode.getPosition3d();
32         dataNode.setPosition3d(x, 0, z); // 恢复Y方向位置
33       }
34     }
35   }
36 
37   showProvienceData(selectedProvience) {
38     const data = this.provAreas[selectedProvience];
39     this.updateAreaOpacity(0.3); // 通过设置透明度为0.3来弱化周围区域
40     data.s('shape3d.opacity', 1); // 设置透明度为1来突出选中区域
41 
42     const [x, y, z] = data.getPosition3d();
43     if (y == 0) {
44       data.setPosition3d(x, 5, z); // 拉高该区域
45     } else {
46       data.setPosition3d(x, 0, z);
47     }
48     this.updateTable(selectedProvience); // 更新表格内容为该省数据
49   }