智慧城市交通的要素：路口監管可視化系統的解決方案

前言

隨着信息時代的發展變遷，熒幕裏呈現的 智慧城市慢慢出現了在現實生活中，很大程度上便利了平常的管理和維護。在智慧城市的大背景下， 智慧交通監管可視化系統是其重要的組成部分，經過一條條道路監控的串聯，引伸出一座智慧城市的管控，而在衆多數據的維護中， 實時數據、 設備狀態以及 視頻監控是極爲重要的。其中視頻監控一直是做爲主體的部分，而在 互聯網和 物聯網齊頭並進的形式下， 「中國天網」應運而生，這實際上是一項城市監控系統，但它不是個僅一臺攝像頭的設備，而是足足有1.7億個監控攝像頭，而在將來三年內，還將再安裝4億個攝像頭。交通做爲城市發展的動脈，與人們下平常息息相關，而在這一系列的監管做用下，成爲了一個「公安治安視頻監控系統」，關乎人們平常的安全治安管理。

城市交通的主要方式體如今城市道路、公交、軌道交通等設施上，但隨着城市化進程的加快和經濟社會發展的推進下，機動車保有量迅速增長，城市交通問題日益嚴峻。面對這一現狀，爲了緩和城市交通的各類問題，採起了多種解決方案，例如建設一系列信號燈控制，路口卡口監控、視頻監控等多種方法的系統維護，有着必定程度上的效果，可是各個系統都獨立着解決其對應的問題，沒法從總體的交通態勢上進行綜合掌控，而實現城市化智慧交通的管理系統能夠很好地應對這一問題。介於 2D 組態和 3D 組態上， Hightopo（如下簡稱 HT ）的  HT for Web 產品上的有着豐富的組態化可供選擇，本文將介紹如何運用 HT 豐富的  2/3D 組態搭建出一個路口監控系統的解決方案。

 

本文將從一下幾個方面介紹智慧交通可視化監控系統的實現過程：

一、車輛生成以及在紅綠燈控制下的運行；

二、攝像頭的仿真和實景監控；

三、路口監控信息的實時數據以及維護；

 

界面簡介及效果預覽

在智慧交通監控系統裏，呈現了擬真的紅綠燈控制下實時車輛行駛的場景，搭配上可控制的天氣環境切換面板，能夠模擬在各類天氣下的路口運行狀態；還實現了路口攝像頭的監控狀態，點擊路口的每一個攝像頭能夠查看此攝像頭監控範圍內路口的實時運行，提供仿真和實景兩種狀態的切換；其次還添加了許多實時數據的監控面板，對接真實接口數據起到實時路口監控的最大效益化。

 

系統分析

HT 經過豐富的 2D 組態和 3D 組態的交融結合使用上，整理出許多工業互聯網上的解決方案，在智慧城市推進的背景下，智慧交通管理系統可視化決策系統也是極爲重要的部分，對於道路以及路口的監測中，面向交管智慧中心大屏環境，其三維場景上可經過  HT for Web 產品輕量化 HTML5/WebGL 建模的方案，實現快速建模、運行時輕量化到甚至手機終端瀏覽器便可 3D 可視化運維的良好效果；二維圖紙上擁有矢量圖標在放大後圖像不會失真，支持大屏、多屏、超大分辨率等顯示情景。

一、綜合態勢監測
集成地理信息系統、視頻監控系統、交管部門各業務系統數據，對交通路況車流量、事故處理報告等要素進行綜合監測，並支持點選查看具體警力、機動目標、交通事件、監控視頻等詳細信息，幫助管理者實時掌握交通總體運行態勢。

二、交通基礎資源監測

支持對攝像頭、流量檢測設備、交通訊號燈等交通基礎資源的數量、空間位置分佈、實時狀態等信息進行監測和可視化管理，支持設備詳細信息查詢，支持對未正常工做的設備進行告警，增強管理者對設備狀態的監測與感知，提高交通基礎設施的運維管理效率。

三、視頻巡檢監測
支持集成前端視頻巡檢系統，有效結合視頻智能分析、智能定位、智能研判技術，對道路擁堵點位、隱患點位、事故點位等狀況進行可視化監測，實現異常事件的實時告警、快速顯示，並可智能化調取異常點位周邊監控視頻，有效提高接處警效率。

四、路口信號燈監測
支持集成路口信號燈、視頻監控等系統數據，對路口交通流量、流速、車輛及道路異常事件、信號燈狀態等信息進行實時監測，並可結合專業的模型算法，比對歷史最佳通行速度及最佳通行量，對路口交通態勢進行可視化分析研判，爲信號配時調優和路口交通組織優化提供科學的決策依據，有效提高交通運行效率。

五、違法違章案件分析
充分整合交管部門現有數據資源，提供多種可視化分析、交互手段，對海量歷史違法違章案件數據進行可視化串並分析，深度挖掘案件時空分佈規律，爲交管部門進行緣由分析、主動防範等業務應用提供支持。

 

 

代碼實現

1、車輛生成以及在紅綠燈控制下的運行

在路口的仿真的運行系統下，場景中有這許許多多來往運行的車輛，是經過動態加載車輛模型而且設置管道運行動畫，而這些車輛固然須要符合信號燈的運行規則，須要運用一些控制手段，讓這些車輛遵紀守法。

如下是經過設置一些車輛的基礎屬性以及根據 type 類型判斷加載對應的車輛模型的僞代碼：

loadCar(type) {
    // 建立車輛新節點 let car = new ht.Node(); // 根據車輛類型建立加載對應車輛模型 switch (type) { case 'familyCar': car.s('shape3d', 'models/HT模型庫/交通/車輛/家用車.json'); break; case 'truck': car.s('shape3d', 'models/HT模型庫/交通/車輛/卡車.json'); break; case 'jeep': car.s('shape3d', 'models/HT模型庫/交通/車輛/吉普車.json'); break; ... default: console.log('NO THIS TYPE CAR!'); break; } // 設置車輛不可選擇和不可移動  car.s({ '3d.selectable': false, '3d.movable': false }); // 設置錨點 --- 車的頭部 car.setAnchor3d(1, 0, 0.5); // 設置初始位置 car.setPosition3d(0, 100000, 0); let typeIndex = 1; // 判斷是否此前生成了這種類型的車輛 this.g3dDm.each(data => { if (data.getTag() === type + typeIndex) { typeIndex++; } }) // 設置車輛節點標籤 car.setTag(type + typeIndex); // 設置車輛節點的名字  car.setDisplayName(type); // 將車輛節點添加到數據模型中 this.g3dDm.add(car); }

 

經過管道動畫的驅使，生成的車輛在信號燈的控制下行駛着，首先要經過 ht.Polyline 繪製出一條車輛的運行管道，其實現上有二維形式與三維的形式，是繼承於 ht.Shape，當 shape3d 設置爲 cylinder 時則顯示爲立體的三維管線效果。而當車輛加載以及管道繪製的完成，咱們就能夠經過 HT 封裝的動畫函數 ht.Default.startAnim() 來趨勢車輛沿着管道運行，實現管道動畫的效果。

而關於管道動畫的實現上，基於 ht.Default.startAnim() 封裝了一個 move 的動畫函數是節點沿着路徑平滑移動的封裝函數，主要參數爲：

• node：動畫節點；
• path：運行路徑；
• duration：動畫執行調度時間;
• animParams：動畫參數；

經過繪製一條運行路線的管道，ht.Default.getLineCacheInfo() 獲得這條管道的點位和分割信息 cache，而後管道信息經過 ht.Default.getLineLength() 獲得管道的長度，而且經過 ht.Default.getLineOffset() 來獲取連線或者管道指定比例的偏移信息，從而達到移動的效果，是爲了經過 node.lookAtX() 來獲取節點下一個面對的朝向的位置信息，並設置節點此時的位置，從而達到節點沿着路徑平滑移動的效果。

move(node, path, duration = 20000, animParams) {
    // path._cache_ 裏面存着管道的節點信息 let cache = path._cache_; // 若是沒有緩存信息，則獲取 path._cache_ 裏面存着管道的節點信息 if (!cache) { cache = path._cache_ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments()); } // 獲取管道緩存信息的長度 const len = ht.Default.getLineLength(cache); // 設置動畫對象初始化 animParams = animParams || {}; // 設置 action 爲 animParams 的動畫執行函數 const action = animParams.action; // 動畫執行部分 animParams.action = (v, t) => { // 獲取管道運動的偏移信息 const offset = ht.Default.getLineOffset(cache, len * v); // 獲取偏移位置上的點 const point = offset.point; // 設置節點看向的下一個位置 node.lookAtX([point.x, point.y, point.z], "forward "); // 設置節點的位置  node.p3(point.x, point.y, point.z); // 判斷動畫是否執行完 if (action) action(); }; // 循環調用動畫執行函數 return loop(animParams.action, duration); } // 循環動畫函數 loop(action, duration) { return ht.Default.startAnim({ duration: duration, action: action }); }

 

2、攝像頭的仿真和實景監控

視頻監控做爲本系統重要的解決方案之一，提供了仿真和實景的兩套風格實現，仿真的意義是經過簡單的車輛模型模擬出交通流向而後經過繪製場景並共用一個數據模型來體現，實質意義上能夠經過科幻風格突出監控的重點信息，例如設備維護以及一些違法的場景重現；而對於實景風格是經過對接實時的視頻數據流，而後展現出路口的運行狀態，以真實的原貌重現路口的每個動態信息。

 

 

 

2.1 擬真攝像頭的實現原理

做爲擬真方案的攝像頭實現上，經過 HT 的渲染元素 renderHTML 加載出一個彈窗的三維小場景，而且與路口主場景共享一個數據模型 dataModel，實現數據變化以及動畫的互通，而如今只須要去獲取所點擊攝像頭的真實視角信息，經過全局事件派發將獲取的真實視角，傳到攝像頭彈窗場景去改變對應視角的 眼睛 eye 和 中心點 center，就能達到獲取攝像頭在主場景中擬真的視角。爲了使攝像頭活動的時候具備動畫的辨識度，在每一個攝像頭前繪製了一個錐形的監控區域吸附在攝像頭上，界定出攝像頭的監控範圍，達到智慧監控的效果。

在交互實現上，經過點擊選中攝像頭後，使這個攝像頭的錐形區域變爲直線，表示爲選中狀態同時標記選中的攝像頭的選中先後順序，而且經過派發事件驅使 2D 圖紙上顯示攝像頭彈窗，在彈窗顯示的同時，經過計算獲得實時變更的中心點位置信息（center），只要實時經過全局派發事件把位置信息傳輸到攝像頭彈窗場景，就能起到攝像頭場景視角與主場景中所點擊攝像頭的視角同步；取消彈窗顯示的交互方式是經過雙擊場景背景，恢復攝像頭錐形區域而且派發事件去隱藏 2D圖紙上的攝像頭彈窗：

// 全局事件派發器 var G = {} window.G = G; G.event = new ht.Notifier(); handleInteractive(e) { const {kind, data} = e; if(kind === 'clickData') { // 判斷點擊節點是否帶有標籤，沒有標籤則 return let tag = data.getTag(); if(!tag) return; // 判斷標籤名爲攝像頭 if(tag.indexOf('camera') >= 0) { // 設置指定上一個點擊的攝像頭和當前點擊的攝像頭 this.lastClickCamera = this.nowClickCamera; this.nowClickCamera = data; // 若是以前有點擊攝像頭，則初始化攝像頭錐體的大小 if (this.lastClickCamera !== null) { let clickRangeNode = this.lastClickCamera.getChildren()._as[0]; clickRangeNode.s3(300, 150, 500); } // 若是有點擊攝像頭，則設定所點擊攝像頭錐體的大小 if (this.nowClickCamera !== null) { let clickRangeNode = this.nowClickCamera.getChildren()._as[0]; clickRangeNode.s3(5, 5, 500); } // 獲取點擊攝像頭的位置信息 var cameraP3 = nowClickCamera.p3(); // 獲取點擊攝像頭的旋轉信息 var cameraR3 = nowClickCamera.r3(); // 獲取點擊攝像頭的大小信息 var cameraS3 = nowClickCamera.s3(); // 當前錐體起始位置 var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2]; // 將當前眼睛位置繞着攝像頭起始位置旋轉獲得正確眼睛位置 var realEye = getCenter(cameraP3, realP3, cameraR3); // 全局事件派發至攝像頭場景改變視角的眼睛 eye 和中心點 center  G.event.fire({ type: 'videoCreated', eye: realEye, center: getCenter(realEye, [realEye[0], realEye[1] ,realEye[2] + 5], cameraR3) }); // 視頻彈窗顯示派發 event.fire(SHOW_VIDEO, {g3dDm: this.g3dDm, cameraName:tag}); } } // 雙擊背景隱藏攝像頭場景窗口，並初始化攝像頭錐體的大小 if(kind === 'doubleClickBackground') { // 視頻彈窗隱藏派發  event.fire(HIDE_VIDEO); // 若是以前有點擊攝像頭，則初始化攝像頭錐體的大小 if (this.nowClickCamera !== null) { let clickRangeNode = this.nowClickCamera.getChildren()._as[0]; clickRangeNode.s3(300, 150, 500) } // 設置當前點擊攝像頭爲空 this.nowClickCamera = null; } }

 

以上所涉及到方法 getCenter()，其實是經過去獲取每一個攝像頭節點在場景中對應的旋轉角度，簡化理解就是一個點 A 圍繞着另一個點 B 旋轉，即中心點位置（center）圍繞着眼睛位置（eye）旋轉，而咱們則須要去計算點 A 的位置（中心點位置 center），這裏經過封裝一個 getCenter 方法用於獲取 3d 場景中點 A 繞着點 B 旋轉 angle 角度以後獲得的點 A 在 3d 場景中的位置，方法中採用了 HT 封裝的 ht.Math 下面的方法，如下爲實現的代碼：

實現代碼以下：

// pointA 爲 pointB 圍繞的旋轉點 // pointB 爲須要旋轉的點 // r3 爲旋轉的角度數組 [xAngle, yAngle, zAngle] 爲繞着 x, y, z 軸分別旋轉的角度 const getCenter = function(pointA, pointB, r3) { const mtrx = new ht.Math.Matrix4(); const euler = new ht.Math.Euler(); const v1 = new ht.Math.Vector3(); const v2 = new ht.Math.Vector3(); mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2])); v1.fromArray(pointB).sub(v2.fromArray(pointA)); v2.copy(v1).applyMatrix4(mtrx); v2.sub(v1); return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z]; };

 

 

2.2 實景攝像頭的實現原理

對於實景的實現上，咱們能夠經過對接實時的視頻數據流，如今主要經常使用的流媒體傳輸協議有： RTMP、 RTSP、 HLS 和  HTTP-FLV。

• RTMP (Real Time Messaging Protocol)：實時消息傳輸協議，RTMP 協議中，視頻必須是 H264 編碼，音頻必須是 AAC 或 MP3 編碼，且多以 flv 格式封包。由於 RTMP 協議傳輸的基本是 FLV 格式的流文件，必須使用 flash 播放器才能播放。
• RTSP (Real-Time Stream Protocol)：RTSP 實時效果很是好，適合視頻聊天、視頻監控等方向。
• HLS(Http Live Streaming)：由 Apple 公司定義的基於 HTTP 的流媒體實時傳輸協議。傳輸內容包括兩部分：1.M3U8 描述文件，2.TS 媒體文件。TS 媒體文件中的視頻必須是H264編碼，音頻必須是 AAC 或 MP3 編碼。數據經過 HTTP 協議傳輸。目前 video.js 庫支持該格式文件的播放。
• HTTP-FLV：本協議就是 http+flv，將音視頻數據封裝成FLV格式，而後經過http協議傳輸到客戶端，這個協議大大方便了瀏覽器客戶端播放直播視頻流.目前 flv.js 庫支持該格式的文件播放。

例如經過一個簡單的 RTMP 視頻流的對接就能夠明白其實現的原理。對於的視頻的載入，須要用到 video.js 的插件進行展現，因此先引入插件，而後對接視頻流後，也是一樣經過全局事件派發到 HT 的渲染元素 renderHTML 將視頻流渲染到場景圖紙中，如下是實現的僞代碼：

// 引入 video.js 插件 <script src="./js/video.js"></script> // 經過全局事件派發到渲染元素 renderHTML 去渲染視頻到場景圖紙中 G.event.add(function(e){ if(e.type==='videoCreated'){ var div=e.div; div.innerHTML='<video id="video" class="video-js vjs-default-skin"><source src="rtmp://10.10.70.57/live/test" type="rtmp/flv"></video>'; window.player = videojs('video'); } });

 

3、路口監控信息的實時數據以及維護 

對於一些路口的關鍵數據能夠經過接口對接的形式展現出來，經過實時數據變更的監控，即時反饋道路路口的信息數據，包含一些事故統計、車流量分析、設備維護狀態以及車輛違章。這些數據依賴展現的載體是經過 HT 的 2D 組態矢量圖來實現的，矢量圖適用於不少場合，其特色是放大後圖像不會失真，能夠適應不一樣分辨率的屏幕都不會模糊，使得整個系統適用與不一樣的屏幕下，包括在大屏的監控系統上也駕輕就熟。而經過矢量圖的信息展現上，對比以往一些單純數據展現的頁面，本系統則是經過一些自定義的動畫交互，可使得整個頁面的上效果呈現上有一種沉浸式的體驗，總體的客戶體驗能夠大大地提高。

 

數據的展現形式有着多種多樣的方式，能夠經過一些圖表插件，例如 eEcharts，HT 也有機制可讓咱們使用它們，固然咱們也能夠自定義封裝一些組件，示例中的表格和圓環進度條就是一種很好地呈現方式，而在許多效果呈現上，HT也是擁有本身一套功能豐富的 UI 組態，若是感興趣的話能夠經過  HT主頁 上來了解使用。

對於數據接口的獲取，能夠運用一些主流的方法：

• ajax：使用 JavaScript 向服務器提出請求並處理響應而不阻塞用戶核心對象 XMLHttpRequest；
• axios：基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中；
• WebSocket：HTML5 提供的一種在單個 TCP 鏈接上進行全雙工通信的協議；

ajax 和 axios 要實時獲取接口數據得經過輪詢調用接口的形式進行傳輸，而 WebSocket 能夠雙向進行數據傳輸，在選擇運用上能夠匹配本身的實現需求。本系統是採用經過 axios 調用接口獲取實時數據。

示例中的柱狀圖和折線圖，是經過 HT 裏的機制下去使用 eEcharts 上一些圖表進行自定義配置而實現的，繼而經過對 axios 接口輪詢調用載入數據，展示了實時的路口監控數據信息：

loadData() {
    // 獲取圖紙的數據模型 let dm = this.g2d.dm(); // 獲取車流量接口的數據 axios.get('/traffic').then(res => { // 接入日車流量折線圖的數據 this.lineChart1.a({ 'seriesData1': res.lineChartData1, 'axisData' : res.axisData }); // 接入車輛運行高峯折線圖的數據 this.lineChart2.a({ 'seriesData1': res.lineChartData2, 'axisData' : res.axisData }) // 採用數字跳動的方式載入一些數據內容 setBindingDatasWithAnim(dm, res, 800, v => Math.round(v)); // 接入運行峯值的時刻 this.peakTime.s('text', res.peakTime); }); // 載入設備運行狀態的數據 axios.get('/equipmentStatus').then(res => { setBindingDatasWithAnim(dm, res, 800, v => Math.round(v)); }); // 載入事故統計的數據 axios.get('/accident').then(res => { setBindingDatasWithAnim(dm, res, 800, v => Math.round(v)); // 接入每個月事故柱狀圖的數據 this.accidentBar.a({ axisData: res.axisData, seriesData1: res.seriesData1 }) }); }

 

關於表格的繪製，其實是封裝了一個組件來實現的，而其中的交互動畫，主要仍是運用了 HT 自帶的動畫函數 ht.Default.startAnim()，橫向經過滾動 100 寬度並數據透明度慢慢浮現，縱向採用向下偏移一行表格行高 54 來添加新的警報信息。

addTableRow() {
    // 獲取表格節點 let table = this.table; // 經過 axios 的 promise 請求接口數據 axios.get('getEvent').then(res => { // 獲取表格節點滾動信息的數據綁定 let tableData = table.a('dataSource'); // 經過向 unshift() 方法可向滾動信息數組的開頭添加一個或更多元素  tableData.unshift(res); // 初始化表格的縱向偏移 table.a('ty', -54); // 開啓表格滾動動畫  ht.Default.startAnim({ duration: 600, // 動畫執行函數 action action: (v, t) => { table.a({ // 經過添加數據後，橫向滾動 100 'firstRowTx': 100 * (1 - v), // 第一行行高出現的透明度漸變效果 'firstRowOpacity': v, // 縱向偏移 54 的高度 'ty': (v - 1) * 54 }); } }); }); }

 

總結

城市大腦被炒的火熱，紅綠燈調控解決擁堵問題只是智慧交通的冰山一角，常態下的監測監管、分析研判，纔是交通管理者真正得以指揮若定的有利保障，而這些，離不開讓交通數據可見可感的「智慧交通可視化決策平臺」。

智慧交通可視化系統經過實時數據的載入，能夠有效即時地反映出路口所處的狀態，使得以往散亂的各個系統串聯起來造成一個完整的智慧交通系統，而在這個系統下串聯出許多條道路的監控，這實際上是一個智慧城市的縮影，而在以往的經驗積累上，HT 也完成了一套完整的智慧城市系統的解決方案，串聯了許多城市數據以及設施建設的記錄，能夠起到合併許多個功能子系統進行實時的數據監控和展現： HT 智慧城市

 

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

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