Web 三維組態的仿真運用案例：民航飛機的數據監控

前言

在飛機航行的過程當中，客艙裏座位上方的熒屏上，除了播放電視劇和廣告以外，還會時不時的切換到一個飛機航行的監控系統。這個監控系統的主要目的是，讓乘客能夠了解到飛機在航行過程當中的總體情況、距離目的地的航線進程以及一些有可能出現的突發事件。飛機航行的監控系統在必定程度上，可使乘客在旅途過程當中獲得準確的信息源，最重要的是可使乘客在旅途中獲得安心。在保障乘客獲取到實際信息源的同時，飛機航行的監控系統也能將採集到的數據及時的反饋給航務人員，並且將數據記錄保存下來，在飛機過站或航後供航務和機務人員使用和監測維護。介於 2D 組態和 3D 組態上， Hightopo（如下簡稱 HT ）的  HT for Web 產品上的有着豐富的組態化可供選擇，本文將介紹如何運用 HT 豐富的  2/3D 組態搭建出一個飛機航行的監控系統的解決方案。

預覽地址： flight-monitor

 

系統分析

飛機航行監控是一種測量、跟蹤飛機性能變化趨勢的簡單而實用方法。在平常航班飛行中，用機載儀表記錄飛機巡航時的有關參數，並將其與原有性能進行比較。監控的主要參數有:飛行單位時間消耗的燃油量、飛機的巡航飛行速度和消耗單位燃油量飛機飛過的水平距離。它們分別表示發動機、飛機及飛機發動機的綜合性能。它們分別表示發動機、飛機及飛機發動機的綜合性能。性能監控的結果，既可爲飛機維修提供可能的故障信息，又爲制定飛行計劃提供可靠的性能依據。

目前，先進的噴氣運輸機都已安裝飛行狀態監控系統，它記錄下有關參數值,並存儲在數據管理裝置中，這些數據能夠發送到或在飛機着陸後送到地面站，用專用計算機程序進行計算和修正，使性能監控數據採集、發送、計箅分析工做自動化，節省了人力，提升了精確度。

一、 飛行數據記錄器：自從飛行數據記錄器 FDR（Flight Data Recorder）「俗稱黑匣子」誕生以來，其提供的詳實準確的飛行數據爲事故調查、機務維護保障、安全運營監控提供了重要依據，成爲航空安全運營的重要管理手段。

二、 ACMS（Aireraft Condition Monitoring System）的系統概述：ACMS 系統是飛機上安裝的先進機載數據採集和處理系統，它能以實時方式收集數據，對發動機狀態和飛行性能進行監控以及進行特殊的工程調查。由飛機通訊尋址與報告系統（ACARS）經過地空數據鏈發送到地面接收站，最後傳送到航空公司的終端，也可經過快速存取記錄器（QAR）將數據記錄保存下來，在飛機過站或航後供航務和機務人員使用。

而 HT 實現的業務功能能夠經過ACMS 系統採集到的數據，對接到顯示終端去展現，經過實時監測的數據準確地顯示出來，起到對飛機狀態的監控功能並即時反饋信息數據的變化。

 

實現過程

雲中穿行效果

爲了達到飛機雲中穿行的效果，最開始我遇到的問題是飛機飛行的層次感，也就一般所說的透視效果，這裏我採用的是雲通道和雲背景以不一樣的速度流動，製造一種飛行的透視效果。

 

雲我採用的是貼圖的方式呈現的，可是僅僅是貼圖會遮擋天空和飛機，很是影響飛機飛行的觀感，因此我開啓了相應圖元的  transparent 和  opacity，雲背景和雲通道設置不一樣的透明度，不只增長了層次感，還會讓人產生雲朵從眼前飄過的錯覺。

 

雲通道採用的是  ht.Polyline 類型，通道縮放拉大了 Y 軸的比例，使雲通道有更大的縱向空間，設置  reverse.flip 背拷貝使雲通道內部也顯示出貼圖，彷彿讓飛機置身於雲海中穿梭；雲背景採用  ht.Node 類型，只設置一個面顯示充當雲背景。

 

總體的雲流動效果採用  offset 偏移實現，改變相應圖元或相應圖元面的貼圖偏移量來達到飛機雲中穿行的效果， 代碼以下：

var i = 1, p = 0; setInterval(() => { i -= 0.1; p += 0.005; clouds.s('shape3d.uv.offset', [i, 0]); cloudBackground.s('all.uv.offset', [p, 0]); }, 100);

 

升降顛簸效果

雖然達到了飛機雲中穿行的效果，可是若是飛機只是直直的飛行，那也會下降飛行的實感，相信坐過飛機的朋友確定都遇到過因氣流產生的顛簸，也常常感覺到飛機飛行途中的爬升和降低，這實際上是由於飛機的航線並非一直固定在一個高度上，有時會爬升有時會降低，因此我就用  ht-animation.js HT 動畫擴展插件去實現飛機顛簸效果，代碼以下：

dm.enableAnimation(20);
plane.setAnimation({
    back1: {
        from: 0, to: 160, easing: 'Cubic.easeInOut', duration: 8000, next: "up1", onUpdate: function (value) { value = parseInt(value); var p3 = this.p3(); this.p3(value, p3[1], p3[2]); } }, //...省略類似 start: ["back1"] });

 

球扇形視角限制

飛行效果完善以後，這時我就遇到了一個比較棘手的問題，由於實際上雖然看着飛機是在雲海中穿梭，可是僅僅是在通道中飛行，背景其實也只是平面貼圖，因此當視角到達某種程度的時候就會有強烈的違和感和不真實感，就須要一個視角限制，使視角的調整剛恰好在一個範圍內。

 

視角限制的話通常是限制 g3d 的  eye 和  center，不太瞭解的朋友能夠去看 hightopo 官網中的 3d 手冊，裏面有詳細的說明，這裏我就再也不贅述了；由於視角範圍的關係，因此我決定固定  center 的位置，代碼以下：

g3d.addPropertyChangeListener(e => {
    // 固定中心點 if (e.property === 'center') { e.newValue[0] = center[0]; e.newValue[1] = center[1]; e.newValue[2] = center[2]; } }

而後再把 eye 限制在某一個範圍內就大功告成了，然而這裏卻並非那麼簡單，最開始我把 eye 限制在一個立方體的空間內，但交互效果很不理想，考慮到 g3d 默認交互中，鼠標拖拽平移視角變換時，實際上 eye 是在一個以 center 爲球心的球面上運動的，因此我決定從這個球中挖出來一塊做爲 eye 的限制空間，也就是球扇形，不太理解的朋友能夠參考這個圖：

 

球扇形視角限制，一共須要三個參數，分別是中心參考軸、中心軸和外邊所成角度、所在球限制半徑，其中中心參考軸可根據初始 eye 和 center 的鏈接延長線肯定，所在球限制半徑又分最大限制和最小限制，代碼以下：

function limitEye(g3d, eye, center, options) { var limitMaxL = options.limitMaxL, limitMinL = options.limitMinL, limitA = options.limitA; g3d.addPropertyChangeListener(e => { // 固定中心點 if (e.property === 'center') { e.newValue[0] = center[0]; e.newValue[1] = center[1]; e.newValue[2] = center[2]; } // 限制視角 if (e.property === 'eye') { var newEyeV = new ht.Math.Vector3(e.newValue), centerV = new ht.Math.Vector3(center), refEyeV = new ht.Math.Vector3(eye), refVector = refEyeV.clone().sub(centerV), newVector = newEyeV.clone().sub(centerV); if (centerV.distanceTo(newEyeV) > limitMaxL) { newVector.setLength(limitMaxL); e.newValue[0] = newVector.x; e.newValue[1] = newVector.y; e.newValue[2] = newVector.z; } if (centerV.distanceTo(newEyeV) < limitMinL) { newVector.setLength(limitMinL); e.newValue[0] = newVector.x; e.newValue[1] = newVector.y; e.newValue[2] = newVector.z; } if (newVector.angleTo(refVector) > limitA) { var oldLength = newVector.length(), oldAngle = newVector.angleTo(refVector), refLength = oldLength * Math.cos(oldAngle), vertVector, realVector, realEye; refVector.setLength(refLength); newEyeV = newVector.clone().add(centerV); refEyeV = refVector.clone().add(centerV); vertVector = newEyeV.clone().sub(refEyeV); vertLength = refLength * Math.tan(limitA); vertVector.setLength(vertLength); realVector = vertVector.clone().add(refEyeV).sub(centerV); realVector.setLength(oldLength); realEye = realVector.clone().add(centerV); // 防止移動角度大於 180 度，視角反轉 if (oldAngle > Math.PI / 2) { realEye.negate(); } e.newValue[0] = realEye.x; e.newValue[1] = realEye.y; e.newValue[2] = realEye.z; } } }) }

 

飛機監控系統

固然做爲監控系統，天然要有監控了，增長右下角的小地圖，並提供三種模式，分別是聚焦飛機，聚焦飛行軌跡和聚焦地圖，並根據飛機的飛行方向控制飛行軌跡的流動效果，其中聚焦飛機會跟隨飛機移動進行  fitData，使飛機一直處於小地圖的中心，代碼以下：

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 倍時間流速下的變化狀況：

 

總結

身處大數據時代的咱們，在網絡科技發展愈來愈快的環境下，迎來了 5G 的新徵程和工業4.0的新變革，在信息數據採集傳輸和數據可視化系統的融合下，能夠發掘出許多行業管控可視化系統的解決方案。而 HT 長久以來一直致力於多樣化行業系統可視化的搭建，涉獵的技術行業所累積的經驗，經過自主創新研發的技術產品，已經打造出許多行業上具備表明性意義的可視化管控系統，例如一樣有關於飛機的監控可視化系統： 無人機 3D 可視化系統

2019 咱們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不同的工業互聯網： https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同時，你也能夠查看更多案例及效果： https://www.hightopo.com/demos/index.html