HTML5 WebGL 实现民航客机飞行监控系统

var fitFlowP = function (e) { if (e.property === 'position' && e.data === plane) { mapGV.fitData(plane, false); } }; buttonP.s({ 'interactive': true, 'onClick': function (event, data, view, point, width, height) { map.a('fitDataTag', 'plane2D'); mapGV.fitData(plane, false); mapDM.md(fitFlowP); } }); buttonL.s({ 'interactive': true, 'onClick': function (event, data, view, point, width, height) { mapDM.umd(fitFlowP); map.a('fitDataTag', 'flyLine'); mapGV.fitData(flyLine, false); } }); // ...省略

增加鼠标移到飞机相应位置进行名称的提示、双击后显示飞机相应位置的信息面板并将视角聚焦到面板上、点击飞机任意地方切换回飞机飞行模式等效果。

左侧增加监控面板替代上面提到的双击相应位置这步操作直接聚焦到相应位置的信息面板上，这里按钮开启了交互并添加了相应的交互逻辑，代码如下：

button_JC.s({ 'interactive': true, 'onClick': function (event, data, view, point, width, height) { event.preventDefault(); let g3d = G.g3d, g3dDM = G.g3d.dm(); g3d.fireInteractorEvent({ kind: 'doubleClickData', data: g3dDM.getDataByTag(data.getTag()) }) } }); //...省略

天空渲染效果

既然是监控系统肯定是 24 小时无差别的监控，这就涉及到一个问题，我总不可能半夜的时候飞机也从瓦蓝瓦蓝的天空上飞过，这就很欠缺真实性了，所以要有一个天空从亮到暗再从暗到亮的过程，这个过程我暂定到 06:00-06:30 和19:00-19:30 这两个时间段。

天空采用的是 shape3d : 'sphere' 球形，包裹整个场景，然后使用 reverse.flip 背拷贝 和 blend 染色，之后天空就可以渲染成我想要的颜色，如果按照时间改变天空明暗只要改变染色值就可以了。

但是由于白天和晚上光照情况的不同，云反射光的强度也不同，就导致了白天和晚上云的差异，所以也要调整云道和云背景的贴图的 opacity 透明度，晚间更为透明度，代码如下：

if ((hour > 6 && hour < 19) || (hour == 6 && minutes >= 30)) { timePane && timePane.a({ 'morning.visible': false, 'day.visible': true, 'dusk.visible': false, 'night.visible': false, 'day.opacity': 1 }) skyBox.s({ "shape3d.blend": 'rgb(127, 200, 240)', }) cloudBackground.s({ "back.opacity": 0.7, }) clouds.s({ "shape3d.opacity": 0.7, }) } else if ((hour < 6 || hour > 19) || (hour == 19 && minutes >= 30)) { //...省略 } else if (hour == 6 && minutes < 15 ) { //...省略 } else if (hour == 6 && minutes >= 15 && minutes < 30) { //...省略 } else if (hour == 19 && minutes < 15) { //...省略 } else if (hour == 19 && minutes >= 15 && minutes < 30) { //...省略 }

这里我还增加了对右上角时间面板时间状态图标的支持，并增加了图标切换时的渐隐渐显效果，同时给时间面板状态图标位置增加了点击切换到下一时间状态的功能。

为了演示效果我增加了时间倍速按钮，下图是 500 倍时间流速下的变化情况：

总结

通过这个 demo ，我发现生活中有很多没有被人所注意到的细节都存在数据可视化的可能，在这个大数据的时代更多的可能性值得被人发掘出来，不要错个身边每一个值得数据可视化的细节，这样不仅可以更好的挖掘 HT for Web 的潜力，也可以加强自身身为一个程序员的综合素质。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!