5G新基建到來，圖撲推出智慧路燈三維可視化方案

前言

作爲智慧城市的重要組成部分，智慧燈杆管理系統採用信息化、數字化手段，把路燈及城市景觀照明等各種不同對象的監控和數據採集及處理融於一體， 爲城市管理者進行城市管理、進行科學決策提供了強有力的手段。

智慧燈杆管理系統是針對路燈智能管理的綜合性系統，可對範圍內的所有路燈集中控制、實時數據監測、異常智能分析及故障報警，以防止設備老化及丟失所帶來的問題，同時還可以實現路燈管網和其他設施配置信息化管理，以滿足後續用戶需求的升級。針對此種情況，我們基於HT for Web實現了智慧燈杆管理系統，通過友好的 3D 視覺人機交互界面來展示數據。

智慧杆塔作爲將信息通信技術與傳統城市公共基礎設施融合的典範，集 “綜合、共享、智慧、和諧” 四大特點於⼀體，被認爲是最有發展前景的新型公共基礎設施，在全球多個國家受到⼴泛關注並已開始落地建設。

目前整體來看，我國智慧杆塔的建設仍處於起步階段，但在新型智慧城市建設及 5G 商用的帶動下，相關⿎勵政策相繼出臺，發展呈加速態勢，預計未來兩三年將會在我國實現突破式增長。

（業務應用示例）

（多杆合一）

系統分析

1. 通訊業務

智慧塔杆作業通信連接點，可以通過無線或有線的方式對外延申，提供多種業務服務，包括無線基站、物聯網、邊緣計算、公共 WIFI 及光傳輸等。此外，智慧塔杆覆蓋區域廣、距離被聯接的物體近，適合作爲互聯網系統的承載，通過各種聯接方式，包括光纖傳輸網絡、2G/3G/4G/5G、NB-IoT、Wi-Fi、PLC、ZigBee 等，將無處不在的智能終端聯接並統一管理，隨時隨地接收、整合和傳遞來自城市各個領域的信息，提升城市的智能化水平和管理效率。

2. 公共安全

智慧塔杆廣泛分佈於城市的公路、街道和園區，對人口密集處有良好的滲透，通過在杆體上部署攝像頭和緊急求助按鈕等，與遠程監控系統組網，已經成爲城市安防場景中不可或缺的重要組成部分。通過部署攝像頭實現對車、人進行黑白名單監控，通過人臉識別/車牌識別/行爲識別等技術識別出危險因素；通過部署一鍵報警實現人在緊急情況下迅速與管理人員取得聯繫、向管理人員提供具體的位置信息、使用攝像頭遠程快速判斷現場情況，爲各類緊急情況的處理節省時間。

3. 智慧照明

隨着物聯網技術和 LED 技術的蓬勃發展，物聯網 + LED 珠聯璧合，市政照明智能化改造進入快車道。智慧照明將每一盞燈通過信息傳感設備與互聯網連接，以實現對批量燈具按需照明和精細化管理，從而達到節能減排、高效運行和維護目的。通過單燈控制啓、集中控制器、光照度傳感器，多功能電錶等以及智慧塔杆平臺可實現路燈實時/分組開燈、關燈、調光操作；迴路開啓、關閉操作；遠程監控運行狀態、運行參數和運行異常等。

4. 環境監測

基於智慧塔杆的氣象環境監測點，具有大範圍密集分佈覆蓋的特點，所採集的數據通過雲端平臺進行大數據分析，可結合環境數據本地及遠程推送服務，提供空氣質量、溫溼度、風速風向、噪音、電磁輻射、光照強度等環境信息；結合視頻監控系統，還可以提供便民的環境綜合服務；也可以結合智慧塔杆部署的 LED 屏實時發佈信息。實現城市環境和氣象的智能監測，預先報警，爲環保部門提供數據參看，來改善城市環境。

5. 智慧交通

智慧塔杆由於點位多、距離近的優勢，更有利於對道路和車輛信息的採集和管理。通過掛載高位攝像頭可以滿足交通部門管理超速、違停等各類違章、違法行爲的識別，此外也可以結合車牌識別完成智能道路停車場景的構建；通過交通流檢測器可以實時採集、傳遞交通狀態信息，如車流量、車道平均速度、車道擁堵情況等；通過智慧塔杆還可以提高道路的智慧化水平，比如道路的積水、故障信息可監測，實現更好的車路協同。

6. 信息發佈

智慧塔杆具備靠近人流、成片和連線的特點，通過掛載設備進行信息發佈時，具有傳播廣、效應高、衝擊力大的效果。當發生如火災，地震等緊急事件時，可以通過多媒體信息發佈系統進行應急廣播、告警燈光提示，通知民衆安全撤離；同時結合 LED 屏幕也可進行政府信息、交通信息和商業廣告的發佈；配備多媒體交互終端的智慧塔杆還可通過傳感器實現人機之間的交互溝通。

7. 能源業務

基於智慧塔杆的能源除滿足多功能塔杆多種自身設備功能正常工作外，還可以對外提供多種供備電服務，可提供的業務包括但不限於：充電樁、USB 接口充電、信號燈、攝像頭備電、無人機充電等，用戶通過手機 APP，還可實現各類業務預約和查看。在條件允許的情況下智慧塔杆可搭載太陽能板或者風力發電設備，實現城市綠色能源。

代碼實現

HT for Web 有着完整的基於 HTML5 的圖形界面組件庫，這使得應用 HT 可以輕鬆的構建現代化、跨桌面和移動終端的智慧燈杆管理系統。獨特的 WebGL 層抽象，將 Model–View–Presenter (MVP) 的設計模型延伸應用到了 3D 圖形領域，下面是 2D 與 3D 相結合的界面處理：

// 2D 部分
// 隱藏選中邊框
gv.getSelectWidth = function() { return 0 };
// 禁止圖元移動
gv.setMovableFunc(function() { return false });
// 禁止鼠標縮放
gv.handleScroll = function() {}; 
// 禁止 touch 下雙指縮放
gv.handlePinch = function() {}; 
// 禁止平移
gv.setPannable(false);
// 禁止框選
gv.setRectSelectable(false); 
// 隱藏滾動條
gv.setScrollBarVisible(false); 
// 全局設置右鍵菜單禁用
window.document.oncontextmenu = function() { return false };

// 3D 部分
// 禁止拖動
g3d.setMovableFunc(function() { return false }); 
// 隱藏選中邊框
g3d.getWireframe = function(d) { d.s('wf.visible', false) };  
// 設置眼睛
g3d.setEye([-8812, 17520, 14341]); 
// 設置中心點
g3d.setCenter([-6217, 0, 28341]); 
// 設置遠端位置
g3d.setFar(5000000); 
// 設置近端位置
g3d.setNear(1); 
// 設置交互限制
g3d.setInteractors([ new ht.graph3d.MapInteractor(g3d) ]);

對於智慧燈杆的數據展示，我們應用了 3D 建模使得路燈與智慧城市的展現更加的立體與形象，數據看板採用了 2D 的看板形式，使得數據更加的直觀。這裏還要注意下，我們在操作 2D 界面時避免發生點擊穿透的問題：

const div2d = gv.getView();
div2d.addEventListener(this.getWheelEventName(div2d), handler);

// 在一個 HTMLElement 上，可能支持下面三個事件的一種或者兩種，但實際回調只會回調一種事件，優先回調標準事件，觸發標準事件後，不會觸發兼容性事件
getWheelEventName (element) {
    if ('onwheel' in element) {
        // 標準事件
        return 'wheel';
    } else if (document.onmousewheel !== undefined) {
        // 通用舊版事件
        return 'mousewheel';
    } else {
        // 舊版 Firefox 事件
        return 'DOMMouseScroll';
    }
};

var handler = function(e) {
    if (gv.getDataAt(e)) {
        // 阻止默認事件
        e.preventDefault(); 
        // 阻止事件冒泡
        e.stopPropagation();
    }
};
gv.getView().addEventListener('mousedown', handler);
gv.getView().addEventListener('touchstart', handler);

接下來第一個動畫效果就是開場鏡頭的運動效果，我們利用 moveCamera() 方法，通過 eye 和 center 的目標值以及動畫參數即可實現：

g3d.moveCamera([-12402, 12910, 52250], [-6822, 0, 35987], {duration : 3000});

在調整好鏡頭之後，再進一步通過事件監聽增加 3D 場景中所有的交互效果：

g3d.mi(function(e) {
    var data = e.data,
        kind = e.kind;
    // 雙擊背景
    if (kind === 'doubleClickBackground') { 
        // 恢復視角
        g3d.moveCamera([-12402, 12910, 52250], [-6822, 0, 35987], {duration : 1000}); 
    }
    // 雙擊模型
    else if (kind === 'doubleClickData') {
        // 切換2D
        eventbus.emit('switch2D'); 
    }
    // 移入模型
    else if (kind === 'onEnter') {
        g3d.getView().style.cursor = 'pointer';
    }
    // 移出模型
    else if (kind === 'onLeave') {
        g3d.getView().style.cursor = 'default';
    }
    // 單擊模型
    else if (kind === 'clickData') {
        // 選中狀態不變色
        data.s('select.brightness', 1); 
        // 拉近視角
        g3d.flyTo(data, {animation : {duration : 1000}, distance : 3500});
    }
});

這其中我們增加了雙擊背景恢復視角，鼠標移入、移出時的 hover，點擊燈杆時拉近視角，以及雙擊燈杆後切換至 2D 界面。flyTo() 方法也是一個移動鏡頭的方式，用法與上面提到的 moveCamera() 類似。

關於數據變化，我們用一塊能耗面板來例舉。它在 3D 場景中作爲一個 billboard 類型存在，裏面所變化的文本即我們在 2D 編輯器中所提前綁定好的屬性。這裏我們僅提供綁定隨機數作爲參考。實際應用中，我們可以通過建立網絡鏈接獲取數據、可以通過數據庫獲取數據、可以通過硬件串口獲取數據等，在此不加累述。下面是代碼實現：

// 數據面板
var dataPanel = dm.getDataByTag('dataPanel'); 
setInterval(function() {
    dataPanel.a('electricity', getRandomNum(1000, 8000));
    dataPanel.a('illumination', getRandomNum(2000, 6000));
    dataPanel.a('time', getRandomNum(3000, 4000));
},  1000);

切換至 2D 界面後，這裏面也有一個小的 3D 場景，爲了查看設備的局部和宏觀，其交互方式跟大的一樣，都包含了拉近還原等效果，並且會在點擊菜單時切換。關於這些 2D 面板的切換，我們在圖標製作時也都爲各自做了細緻的封裝，保證通過鼠標事件點擊面板中的特定元素時，能夠切換所包含模塊信息。通過返回按鈕，來控制 2D 部分的隱藏：

// 切換2D
eventbus.on('switch2D', function() {
　　// 背景顯示
    background.s('2d.visible', true);
　　// 標題欄顯示
    title.s('2d.visible', true);
　　// 小場景顯示
    scene.s('2d.visible', true);
　　// 其他面板隱藏
    for (var i = 1; i < 8; i++) {
        dm.getDataByTag('panel' + i).s('2d.visible', false);
    };
    dm.getDataByTag('panel' + title.a('state')).s('2d.visible', true);
});
// 切換3D
eventbus.on('switch3D', function() {
　　// 背景隱藏
    background.s('2d.visible', false);
　　// 標題欄隱藏
    title.s('2d.visible', false);
　　// 小場景隱藏
    scene.s('2d.visible', false);
　　// 其他無關面板隱藏
    for (var i = 1; i < 8; i++) {
        dm.getDataByTag('panel' + i).s('2d.visible', false);
    };
});

總結

至此，我們的智慧燈杆管理系統就完成了。智慧城市的建立是未來科技發展的必經之路，我們國家目前正處於發展中的國家，正處在成爲科技大國強國的關鍵時刻，面臨着人工成本上升、原材料價格波動、貿易競爭日益加劇等問題，迫切需要提高效率、降低生產成本。只有堅定不移地推動工業互聯網落地，加快更多企業的數字化轉型和智能化改造，纔有能讓在全球化競爭中立於不敗之地。可視化作爲智能化數字化的最後一環，讓複雜抽象的數據變得真正可知可感，幫助決策者發現規律，洞悉未來，爲企業提速增效。

該系統的完成離不開 HT for Web 平臺的支持，豐富完善的圖標庫資源，使得組態設計變得更加的簡單便捷。其廣泛應用於電信網絡拓撲和設備管理，以及電力、燃氣等工業自動化 (HMI/SCADA) 領域。同時 HT 的成功與完善更是離不開廣大用戶的支持。各行各業提供的專業需求，使得它越發的完善。歡迎更多大佬加入，這將使得數據可視化有無限的可能。

2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：《分享數百個 HT 工業互聯網 2D 3D 可視化應用案例之 2019 篇》。

歡迎大家來瀏覽更多科技感十足的demo，學習打造炫酷的效果及先進的思想，我會不間斷的更新~~