前言

　　在大數(shù)據(jù)盛行的現(xiàn)在，大屏數(shù)據(jù)可視化也已經(jīng)成為了一個(gè)熱門的話題。大屏可視化可以運(yùn)用在眾多領(lǐng)域中，比如工業(yè)互聯(lián)網(wǎng)、醫(yī)療、交通、工業(yè)控制等等。將各項(xiàng)重要指標(biāo)數(shù)據(jù)以圖表、各種圖形等形式表現(xiàn)在一個(gè)頁面上，各種數(shù)據(jù)一目了然。隨著瀏覽器不斷發(fā)展完善，使用 Web 做大屏展示也已經(jīng)不是新鮮的事了。市面上已有不少的大屏解決方案，大部分是以放各種圖表的形式呈現(xiàn)，基本是是 2D 的呈現(xiàn)。有些是根據(jù)投放屏幕的比例設(shè)計(jì)出來的，并不能自適應(yīng)于其它的屏幕比例。最近學(xué)習(xí)了 Hightopo 的 HT for Web 產(chǎn)品，特有的矢量，在各種比例下不失真，加上布局機(jī)制，解決了不同屏幕比例下的展示問題，加上 3D 的呈現(xiàn)部分，可以做出別具一格的大屏系統(tǒng)。在這里與大家分享學(xué)習(xí)，先來張整體效果圖：

鏈接：http://www.hightopo.com/demo/large-screen-puddling/

　　本文主要介紹內(nèi)容如下，文章中以 HT 作為 HT for Web 的簡(jiǎn)稱：

頁面搭建

數(shù)據(jù)對(duì)接

動(dòng)畫效果實(shí)現(xiàn)

其他細(xì)節(jié)優(yōu)化

一、頁面搭建

　　在這個(gè)系統(tǒng)中，我們需要?jiǎng)?chuàng)建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現(xiàn) 2D 和 3D 的內(nèi)容。設(shè)計(jì)師給到的 display.json 是 2D 圖紙的內(nèi)容，主要是使用矢量繪制呈現(xiàn)，有一些圖表是用了 Echarts，HT 也有機(jī)制可以讓我們使用它們。scene.json 是 3D 場(chǎng)景的內(nèi)容，大部分模型都是通過 3dMax 建模生成的，該建模工具可以導(dǎo)出 obj 與 mtl 文件，在 HT 中可以通過解析 obj 與 mtl 文件來生成 3d 場(chǎng)景中的所有復(fù)雜模型，簡(jiǎn)單的模型也可以通過 HT 來建模。關(guān)鍵代碼如下：

?

var g2d = new ht.graph.GraphView(); var g3d = new ht.graph3d.Graph3dView();// 將 3D 組件加入到 body 下 g3d.addToDOM(); // 將 2D 組件加入到 3D 組件的根 div 下，父子 DOM 事件會(huì)冒泡，這樣不會(huì)影響 3D 場(chǎng)景的交互 g2d.addToDOM(g3d.getView());g2d.deserialize('display.json', function(json, dm, g2d, datas){// TODO 2D 反序列化完成回調(diào)，后面會(huì)講到 }); g3d.deserialize('scene.json', function(json, dm, g3d, datas) {// TODO 3D 反序列化完成回調(diào)，后面會(huì)講到
});

?二、數(shù)據(jù)對(duì)接

　　頁面加載出來后，就可以與后臺(tái)通訊，請(qǐng)求相關(guān)數(shù)據(jù)對(duì)接到對(duì)應(yīng)的元素上了。HT 一大強(qiáng)項(xiàng)是作為 Web 組態(tài)，所以有很友好的數(shù)據(jù)綁定方式，我們可以輕松將數(shù)據(jù)展示到各個(gè)節(jié)點(diǎn)上。我們這個(gè)案例采用隨機(jī)數(shù)模擬的方式模擬展示數(shù)據(jù)，在 json 中對(duì)相應(yīng)的節(jié)點(diǎn)設(shè)置唯一標(biāo)識(shí) tag，在反序列化完成后，通過 g2d.dm().getDataByTag(tag) 來獲得相應(yīng)節(jié)點(diǎn)，再根據(jù)這個(gè)節(jié)點(diǎn)的數(shù)據(jù)綁定來將數(shù)據(jù)展示到改節(jié)點(diǎn)上。

以下是上面這個(gè)表格數(shù)據(jù)對(duì)接的代碼，它的 tag 是?alarmTable

// 模擬數(shù)據(jù) var mockData = [{ "time": "2019-02-17 21:54:31", "warningDesc": "11_15冷卻壁發(fā)生渣皮減薄" },{ "time": "2019-02-17 21:57:49", "warningDesc": "爐缸熱損失正常" },{ "time": "2019-02-17 22:00:34", "warningDesc": "8_12冷卻壁發(fā)生渣皮減薄" },{ "time": "2019-02-17 22:03:44", "warningDesc": "8_12冷卻壁發(fā)生渣皮減薄" },{ "time": "2019-02-17 22:07:09", "warningDesc": "11_15爐缸熱損失正常" },{ "time": "2019-02-17 22:11:35", "warningDesc": "8_12冷卻壁發(fā)生渣皮減薄" },{ "time": "2019-02-17 22:16:24", "warningDesc": "11_15局部小氣流" } ];var dm = g2d.dm(); var table = dm.getDataByTag('alarmTable'); table.a('ht.dataSource', mockData); View Code

以上表格是一個(gè)用 ht 定義的矢量節(jié)點(diǎn)，矢量由一個(gè)個(gè)組件組成，組件不僅可以預(yù)定義的矩形，文本等內(nèi)容，也可以引用其它定義好的矢量，甚至可以自定義繪制邏輯，這個(gè)表格就由此而來。矢量不僅可以用在 2D 圖紙里，還可以用在 3D 貼圖中，在我們 3D 場(chǎng)景中，以下截圖的幾個(gè)面板也是使用矢量實(shí)現(xiàn)，

HT 中數(shù)據(jù)都由 DataModel 驅(qū)動(dòng)，所以 3D 對(duì)接數(shù)據(jù)也是一樣的，這里就不再贅述。

三、動(dòng)畫效果實(shí)現(xiàn)

• 鐵水罐車動(dòng)畫　　

這個(gè)案例中最明顯的動(dòng)畫應(yīng)該就是鐵水罐車的動(dòng)畫了，我們先來聊聊它的實(shí)現(xiàn)。基本流程是這樣的

如上，我們依然是在反序列化完成后，通過 car = g3d.dm().getDataByTag('car'); 得到鐵水罐車的節(jié)點(diǎn)對(duì)象。

通過 car.s('3d.visible', true | false); 就可以控制它的顯隱。

通過不斷修改節(jié)點(diǎn)的 3D 坐標(biāo)就可以實(shí)現(xiàn)位移效果 car.setPosition3d(x, y, z);

至于鐵水罐車上的面板，也是個(gè)矢量，將它吸附于鐵水罐車節(jié)點(diǎn)，它就會(huì)跟隨車移動(dòng)，不需要單獨(dú)控制它的坐標(biāo)來實(shí)現(xiàn)動(dòng)畫。

• 管道中氣體流動(dòng)動(dòng)畫

?

這部分動(dòng)畫效果，只要不斷修改貼圖的 uv 值就可以實(shí)現(xiàn)，以下是示例代碼，node 還是由 getDataByTag 得來

var offset1 = 0.03;setInterval(function () {node.s({'top.uv.offset': [-offset1, 0],'front.uv.offset': [-offset1, 0],});offset1 += 0.1; }, 100);

上料履帶的動(dòng)畫也是相同的實(shí)現(xiàn)方式

四、其他細(xì)節(jié)優(yōu)化

　　在點(diǎn)擊 2D 有點(diǎn)到圖元像素時(shí)，我們希望不觸發(fā) 3D 的交互，比如拖動(dòng)表格滾動(dòng)時(shí)，3D 場(chǎng)景也會(huì)跟著旋轉(zhuǎn)。可以通過如下代碼控制：

var handler = function(e) {if (gv.getDataAt(e)) { // 如果點(diǎn)擊到的位置有節(jié)點(diǎn)信息 e.preventDefault();e.stopPropagation();} } gv.getView().addEventListener('mousedown', handler); gv.getView().addEventListener('click', handler); gv.getView().addEventListener('touchstart', handler);

同時(shí)，禁用一些交互動(dòng)作和一些默認(rèn)選中邊框

// 選中邊框?yàn)? gv.getSelectWidth = function () { return 0; }; // 禁止鼠標(biāo)縮放 gv.handleScroll = function () { }; // 禁止 touch 下雙指縮放 gv.handlePinch = function () { }; // 禁止平移 gv.setPannable(false); // 禁止框選 gv.setRectSelectable(false); // 隱藏滾動(dòng)條 gv.setScrollBarVisible(false); // 2D 中所有節(jié)點(diǎn)不可拖動(dòng) gv.setMovableFunc(function () { return false; }); // 3D 中所有節(jié)點(diǎn)不可拖動(dòng) g3d.setMovableFunc(function () { return false; });

總結(jié)

通過 2D 3D 結(jié)合的方式的大屏展示，可以非常直觀的看到數(shù)據(jù)呈現(xiàn)，比如在履帶出的上料數(shù)據(jù)，通過它的位置，不需要太多文字描述就知道這里是要展示什么內(nèi)容。HT 非常輕量，可以結(jié)合 2D 3D 呈現(xiàn)數(shù)據(jù)，矢量在各種屏幕下不失真，還可以適應(yīng)各種屏幕大小進(jìn)行展示，用來做大屏可視化再合適不過了。除了在大屏上，電腦上可以展示良好，移動(dòng)端同樣支持，最后放上一張移動(dòng)端的效果圖

?

轉(zhuǎn)載于:https://www.cnblogs.com/yilyl/p/10393072.html

總結(jié)

以上是生活随笔為你收集整理的基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。