新基建下，智慧交通發展新規劃：智慧隧道監控可視化系統

時間 2020-06-11

標籤基建智慧交通發展規劃隧道監控可視化系統简体版

原文原文鏈接

前言

隨着當代經濟的發展，交通環境日益緊張，加上山區地區的交通運輸的需求，隧道的交通建設開發方興未艾。隧道交通的規劃愈來愈完備，而對於隧道內監控管理維護卻顯得有些不足。而工業4.0的崛起，逐步進入了智能化的新時代，伴隨着工業互聯網的新興力量，工控可視化系統應運而生，不只能起到平常的監控管理維護，在發現事故或險情時能第一時間採起應急預案；還能經過實時數據的採集反饋，遠程操控設備運行以及預測設備的優良性能，從而達到更立體更全面的工控系統的運行。html

HT for Web 不止自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，爲可視化提供了豐富的展現效果。介於 2D 組態和 3D 組態上，Hightopo（如下簡稱 HT ）的 HT for Web 產品上的有着豐富的組態化可供選擇，本文將介紹如何運用 HT 豐富的 2/3D 組態搭建出一個隧道監控可視化系統的解決方案。node

監控隧道內的車道堵塞狀況、隧道內的車禍現場，在隧道中顯示當前車禍位置並在隧道口給予提示等功能都是很是有必要的。這個隧道監控可視化系統的主要內容包括：照明、風機、車道指示燈、交通訊號燈、情報板、消防、火災報警、車行橫洞、風向儀、微波車檢、隧道緊急逃生出口的控制以及事故模擬等等。json

界面簡介及效果預覽

預覽連接：http://www.hightopo.com/demo/tunnel2/index.html數組

上圖中的各類設備均可以雙擊，此時 camera 的位置會從當前位置移動到雙擊的設備的正前方；隧道入口的展現牌會自動輪播，出現事故時會展現牌中的內容會由「限速80，請開車燈」變爲「超車道兩車追尾，請減速慢行」；兩隧道中間的逃生通道上方的指示牌是能夠點擊的，點擊切換爲藍綠色激活狀態，兩旁的逃生通道門也會打開，再單擊指示牌變爲灰色，門關閉；還有一個事故現場模擬，雙擊兩旁變壓器中其中一個，在隧道內會出現一個「事故現場圖標」，單擊此圖標，出現彈出框顯示事故等等等等。瀏覽器

代碼實現

1、場景搭建

整個隧道都是基於 3D 場景上繪製的，先來看看怎麼搭建 3D 場景：緩存

// 數據容器
dm = new ht.DataModel();
// 3d 場景
g3d = new ht.graph3d.Graph3dView(dm);
// 將場景添加到 body 中
g3d.addToDOM();

上面代碼中的 addToDOM 函數，是一個將組件添加到 body 體中的函數的封裝，定義以下：網絡

addToDOM = function(){
    var self = this,
         // 獲取組件的底層 div
         view = self.getView(),
         style = view.style;
    // 將組件底層div添加進body中
    document.body.appendChild(view);
    // ht 默認將全部的組件的position都設置爲absolute絕對定位
    style.left = '0';
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    // 窗口大小改變事件，調用刷新函數
    window.addEventListener('resize', function () { self.iv(); }, false);
}

2、JSON反序列化

整個場景是由名爲隧道1.json 的文件導出而成的，我只須要用代碼將 json 文件中的內容轉換爲我須要的部分便可：app

// xhrLoad 函數是一個異步加載文件的函數
ht.Default.xhrLoad('./scenes/隧道1.json', function(text) {
    // 將 json 文件中的文本轉爲咱們須要的 json 格式的內容
    var json = ht.Default.parse(text);
    // 反序列化數據容器，解析用於生成對應的Data對象並添加到數據容器 這裏至關於把 json 文件中生成的 ht.Node 節點反序列化到數據容器中，這樣數據容器中就有這個節點了
    dm.deserialize(json);
});

因爲 xhrLoad 函數是一個異步加載函數，因此若是 dm 數據容器反序列化未完成就直接調用了其中的節點，那麼會形成數據獲取不到的結果，因此通常來講我是將一些邏輯代碼寫在這個函數內部，或者給邏輯代碼設置 timeout 錯開時間差。異步

首先，因爲數據都是存儲在 dm 數據容器中的（經過 dm.add(node) 添加的），因此咱們要獲取數據除了能夠經過 id、tag 等獨立的方式，還能夠經過遍歷數據容器來獲取多個元素。因爲這個場景比較複雜，模型的面也比較多，鑑於設備配置，我將能 Batch 批量的元素都進行了批量。ide

批量是 HT 實現下的一種特有的機制，批量能提升性能的原理在於，當圖元一個個獨立繪製模型時性能較差，而當一批圖元聚合成一個大模型進行一次性的繪製時，則會極大提升 WebGL 刷新性能，執行代碼以下

dm.each(function(data) {
    // 對「電話」進行批量
    if (data.s('front.image') === 'assets/sos電話.png'){
        data.s('batch', 'sosBatch');
    }
    // 逃生通道批量（透明度也會影響性能）
    else if (data.s('all.color') === 'rgba(222,222,222,0.18)') {
        data.s('batch', 'emergencyBatch');
    }
    else if (data.s('shape3d') === 'models/隧道/攝像頭.json' || data.s('shape3d') === 'models/隧道/橫洞.json' || data.s('shape3d') === 'models/隧道/捲簾門.json') {
        // 個別攝像頭染色了 不作批量
        if(!data.s('shape3d.blend'))
            // 基礎批量什麼也不作
            data.s('batch', 'basicBatch');
    }
    else if (data.s('shape3d') === 'models/大型變壓器/變壓器.json') {    
        data.s('batch', 'tileBatch');
        data.setToolTip('單擊漫遊，雙擊車禍地點出現圖標');
    }
    else if (data.getDisplayName() === '地面') {
        // 設置隧道「地面」不可選中
        data.s('3d.selectable', false);
    }
    else if (data.s('shape3d') === 'models/隧道/排風.json') {
        // 排風扇的模型比較複雜，因此作批量
        data.s('batch', 'fanBatch');
    }
    else if (data.getDisplayName() === 'arrow') {
        // 隧道兩旁的箭頭路標
        if (data.getTag() === 'arrowLeft') data.s('shape3d.image', 'displays/abc.png');
        else data.s('shape3d.image', 'displays/abc2.png');
        data.s({
            'shape3d': 'billboard',
            // 緩存，設置了 cache 的代價是須要設置 invalidateShape3dCachedImage
            'shape3d.image.cache': true,
            // 設置這個值，圖片上的鋸齒就不會太明顯了（若圖片類型爲 json，則設置 shape3d.dynamic.transparent)
            'shape3d.transparent': true 
        });
        g3d.invalidateShape3dCachedImage(data);
    }
    // 隧道入口處的情報板
    else if (data.getTag() === 'board' || data.getTag() === 'board1') {
        // 業務屬性，用來控制文本的位置[x,y,width,height]
        data.a('textRect', [0, 2, 244, 46]); 
        // 業務屬性，設置文本內容
        data.a('limitText', '限速80，請開車燈');
        var min = -245;
        var name = 'board' + data.getId();
        window[name] = setInterval(function() {
            // 設置情報板中的文字向左滾動，而且當文字所有顯示時重複閃爍三次
            circleFunc(data, window[name], min);
        }, 100);
    }

    //給逃生通道上方的指示板 動態設置顏色
    var infos = ['人行橫洞1', '人行橫洞2', '人行橫洞3', '人行橫洞4', '車行橫洞1', '車行橫洞2', '車行橫洞3'];
    infos.forEach(function(info) {
        if(data.getDisplayName() === info) {
            data.a('emergencyColor', 'rgb(138, 138, 138)');
        }
    });

    infos = ['車道指示器', '車道指示器1', '車道指示器2', '車道指示器3'];
    infos.forEach(function(info) {
        if (data.getDisplayName() === info) {
            // 考慮到性能問題 將六面體變換爲 billboard 類型元素
            createBillboard(data, 'assets/車道信號-過.png', 'assets/車道信號-過.png', info);
        }
    });
});

上面有一處設置了 tooltip 文字提示信息，在 3d 中，要顯示這個文字提示信息，就須要設置 g3d.enableToolTip() 函數，默認 3d 組件是關閉這個功能的。

3、邏輯代碼

情報板滾動條

我就直接按照上面代碼中提到的方法進行解釋，首先是 circleFunc 情報板文字循環移動的函數，在這個函數中咱們用到了業務屬性 limitText 設置情報板中的文字屬性以及 textRect 設置情報板中文字的移動位置屬性：

// 設置情報板中的文字向左滾動，而且當文字所有顯示時重複閃爍三次
function circleFunc(data, timer, min) {
    // 獲取當前業務屬性 limitText 的內容
    var text = data.a('limitText');
    // 設置業務屬性 textRect 文本框的座標和大小
    data.a('textRect', [data.a('textRect')[0]-5, 2, 244, 46]); 
    if (parseInt(data.a('textRect')) <= parseInt(min)) {
        data.a('textRect', [255, 2, 244, 46]);
    }
    else if (data.a('textRect')[0] === 0) {
        clearInterval(timer);
        var index = 0;
        // 設置多個 timer 是由於可以進入這個函數中的不止一個 data，若是在同一時間多個 data 設置同一個 timer，那確定只會對最後一個節點進行動畫。後面還有不少這種陷阱，要注意
        var testName = 'testTimer' + data.getId();
        window[testName] = setInterval(function() {
            index++;
            // 若是情報板中文本內容爲空
            if(data.a('limitText') === '') {
                setTimeout(function() {
                    // 設置爲傳入的 text 值
                    data.a('limitText', text);
                }, 100);
            }
            else {
                setTimeout(function() {
                    // 若情報板中的文本內容不爲空，則設置爲空
                    data.a('limitText', ''); 
                }, 100);
            }
            // 重複三次 
            if(index === 11) { 
                clearInterval(window[testName]);
                data.a('limitText', text);
            }
        }, 100);

        setTimeout(function() {
            timer = setInterval(function() {
                // 回調函數
                circleFunc(data, timer, min);
            }, 100);
        }, 1500);
    }
}

因爲 WebGL 對瀏覽器的要求不低，爲了能儘可能多的適應各大瀏覽器，咱們將全部的「道路指示器」 ht.Node 類型的六面體所有換成 billboard 類型的節點，性能能提高很多。

http://www.hightopo.com

設置 billboard 的方法很簡單，獲取當前的六面體節點，而後給這些節點設置：

node.s({
    'shape3d': 'billboard',
    'shape3d.image': imageUrl,
    'shape3d.image.cache': true
});
// 還記得用 shape3d.image.cache 的代價麼？
g3d.invalidateShape3dCachedImage(node);

固然，由於 billboard 不能雙面顯示不一樣的圖片，只是一個「面」，因此咱們還得在這個節點的位置建立另外一個節點，在這個節點的「背面」顯示圖片，而且跟這個節點的配置如出一轍，不過位置要稍稍偏移一點。

Camera 緩慢偏移

其餘動畫部分比較簡單，我就不在這裏多說了，這裏有一個雙擊節點能將視線從當前 camera 位置移動到雙擊節點正前方的位置的動畫我提一下。我封裝了兩個函數 setEye 和 setCenter，分別用來設置 camera 的位置和目標位置的：

// 設置「目標」位置
function setCenter(center, finish) {
    // 獲取當前「目標」位置，爲一個數組，而 getCenter 數組會在視線移動的過程當中不斷變化，因此咱們先拷貝一份
    var c = g3d.getCenter().slice(0), 
        // 當前x軸位置和目標位置的差值
        dx = center[0] - c[0], 
        dy = center[1] - c[1],
        dz = center[2] - c[2];
    // 啓動 500 毫秒的動畫過分
    ht.Default.startAnim({
        duration: 500,
        action: function(v, t) {
            // 將「目標」位置緩慢從當前位置移動到設置的位置處
            g3d.setCenter([ 
                c[0] + dx * v,
                c[1] + dy * v,
                c[2] + dz * v
            ]);
        }
    });
};

// 設置「眼睛」位置
function setEye(eye, finish) {
    // 獲取當前「眼睛」位置，爲一個數組，而 getEye 數組會在視線移動的過程當中不斷變化，因此咱們先拷貝一份
    var e = g3d.getEye().slice(0),
        dx = eye[0] - e[0],
        dy = eye[1] - e[1],
        dz = eye[2] - e[2];
    // 啓動 500 毫秒的動畫過分
    ht.Default.startAnim({
        duration: 500,
        // 將 Camera 位置緩慢地從當前位置移動到設置的位置
        action: function(v, t) {
            g3d.setEye([
                e[0] + dx * v,
                e[1] + dy * v,
                e[2] + dz * v
            ]);
        }
    });
};

後期咱們要設置的時候就直接調用這兩個函數，並設置參數爲咱們目標的位置便可。好比我這個場景中的各個模型，因爲不一樣視角對應的各個模型的旋轉角度也不一樣，我只能找幾個比較有表明性的 0°，90°，180°以及360° 這四種比較典型的角度了。因此繪製 3D 場景的時候，我也儘可能設置節點的旋轉角度爲這四個中的一種（並且對於咱們這個場景來講，基本上只在 y 軸上旋轉了）：

// 獲取事件對象的三維座標
var p3 = e.data.p3(), 
    // 獲取事件對象的三維尺寸
    s3 = e.data.s3(),
    // 獲取事件對象的三維旋轉值
    r3 = e.data.r3();
// 設置「目標」位置爲當前事件對象的三維座標值
setCenter(p3);
// 若是節點的 y 軸旋轉值 不爲 0
if (r3[1] !== 0) {
    // 浮點負數得作轉換才能進行比值
    if (parseFloat(r3[1].toFixed(5)) === parseFloat(-3.14159)) { 
        // 設置camera 的目標位置
        setEye([p3[0], p3[1]+s3[1], p3[2] * Math.abs(r3[1]*2.3/6)]);
    }
    else if (parseFloat(r3[1].toFixed(4)) === parseFloat(-1.5708)) {
        setEye([p3[0] * Math.abs(r3[1]/1.8), p3[1]+s3[1], p3[2]]);
    }
    else {
        setEye([p3[0] *r3[1], p3[1]+s3[1], p3[2]]);
    }
}
else {
    setEye([p3[0], p3[1]+s3[1]*2, p3[2]+1000]);
}

事故模擬現場

最後來講說模擬的事故現場吧，這段仍是比較接近實際項目的。操做流程以下：雙擊「變壓器」-->隧道中間某個部分會出現一個「事故現場」圖標-->單擊圖標，彈出對話框，顯示當前事故信息-->點擊肯定，則事故現場以前的燈都顯示爲紅色×，而且隧道入口的情報板上的文字顯示爲「超車道兩車追尾，請減速慢行」-->再雙擊一次「變壓器」，場景恢復事故以前的狀態。

在 HT 中，可經過 Graph3dView#addInteractorListener（簡寫爲 mi）來監聽交互過程：

g3d.addInteractorListener(function(e) {
    if(e.kind === 'doubleClickData') {
        // 有「事故」圖標節點存在
        if (e.data.getTag() === 'jam') return;
        // 若是雙擊對象是變壓器
        if (e.data.s('shape3d') === 'models/大型變壓器/變壓器.json') {
            index++;
            // 經過惟一標識 tag 標籤獲取「事故」圖標節點對象
            var jam = dm.getDataByTag('jam');
            if(index === 1){
                var jam = dm.getDataByTag('jam');
                jam.s({
                    // 設置節點在 3d 上可見
                    '3d.visible': true,
                    // 設置節點爲 billboard 類型
                    'shape3d': 'billboard',
                    // 設置 billboard 的顯示圖片
                    'shape3d.image': 'assets/車禍.png', 
                    // 設置 billboard 圖片是否緩存
                    'shape3d.image.cache': true,
                    // 是否始終面向鏡頭
                    'shape3d.autorotate': true,
                    // 默認保持圖片本來大小，設置爲數組模式則能夠設置圖片顯示在界面上的大小
                    'shape3d.fixSizeOnScreen': [30, 30],
                });
                // cache 的代價是節點須要設置這個函數
                g3d.invalidateShape3dCachedImage(jam);
             }
             else {
                 jam.s({
                     // 第二次雙擊變壓器就將全部一切恢復「事故」以前的狀態
                     '3d.visible': false
                });
                dm.each(function(data) {
                    var p3 = data.p3();
                    if ((p3[2] < jam.p3()[2]) && data.getDisplayName() === '車道指示器1') {
                        data.s('shape3d.image', 'assets/車道信號-過.png');
                    }
                    if(data.getTag() === 'board1') {
                        data.a('limitText', '限速80，請開車燈');
                    }
                });
                index = 0;
            }             
        }
    }
});

既然「事故」節點圖標出現了，接着點擊圖標出現「事故信息彈出框」，監聽事件一樣是在 mi（addInteractorListener）中，可是此次監聽的是單擊事件，咱們知道，監聽雙擊事件時會觸發一次單擊事件，爲了不這種狀況，我在單擊事件裏面作了演示：

// 點擊圖元
else if (e.kind === 'clickData'){
    timer = setTimeout(function() {
        clearTimeout(timer);
        // 若是是「事故」圖標節點
        if (e.data.getTag() === 'jam') {
            // 建立一個對話框
            createDialog(e.data);
        }
    }, 200);
}

在上面的雙擊事件中我沒有 clearTimeout，怕順序問題給你們形成困擾，要記得加一下。

彈出框以下：

這個彈出框是由兩個 ht.widget.FormPane 表單構成的，左邊的表單只有一行，行高爲 140，右邊的表單是由 5 行構成的，點擊肯定，則「事故」圖標節點以前的道路指示燈都換成紅色×的圖標：

// 彈出框右邊的表單
function createForm4(node, dialog) {
    // 表單組件
    var form = new ht.widget.FormPane();
    // 設置表單組件的寬
    form.setWidth(200);
    // 設置表單組件的高
    form.setHeight(200);
    // 獲取表單組件的底層 div 
    var view = form.getView();
    // 將表單組件添加到 body 中
    document.body.appendChild(view);

    var infos = [
        '編輯框內容爲：2輛',
        '編輯框內容爲：客車-客車',
        '編輯框內容爲：無起火',
        '編輯框內容爲：超車道'
    ];
    infos.forEach(function(info) {
        // 向表單中添加行
        form.addRow([ 
            info
        // 第二個參數爲行寬度，小於1的值爲相對值
        ], [0.1]);
    });
    
    form.addRow([
        {
            // 添加一行的「確認」按鈕
            button: {
                label: '確認',
                // 按鈕點擊事件觸發
                onClicked: function() {
                    // 隱藏對話框
                    dialog.hide();
                    dm.each(function(data) {
                        var p3 = data.p3();
                        // 改變「車道指示器」的顯示圖片爲紅色×，這裏我是根據「事故」圖標節點的座標來判斷「車道顯示器」是在前仍是在後的
                        if ((p3[2] < node.p3()[2]) && data.getDisplayName() === '車道指示器1') {
                            data.s('shape3d.image', 'assets/車道信號-禁止.png');
                        }
                        // 將隧道口的情報板上的文字替換
                        if(data.getTag() === 'board1') {
                            data.a('limitText', '超車道兩車追尾，請減速慢行');
                        }
                    });
                }
            }
        }
    ], [0.1]);
    return form;
}

總結

伴隨着新基建的建設興起，是以新發展理念爲引領，以技術創新爲驅動，以信息網絡爲基礎，面向高質量發展須要，提供數字轉型、智能升級、融合創新等服務的基礎設施體系的完備，國家正邁入新時代的建設，也迎來了新時代的挑戰與機遇。隧道交通的監控能夠概括爲工控管理與智慧交通建設的產物，一樣具備極爲重要的意義。在衆多行業上所積累的經驗，HT 已經實現了許多不一樣領域建設的案例，例如路口監管可視化系統，有興趣的話也能夠了解一下！

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

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