朱 軍，吳思豪，張昀昊，黃華平，郭煜坤，陳逸東，李維煉

（1.西南交通大學地球科學與環(huán)境工程學院，四川 成都 611756；2.中鐵二院測繪工程設計研究院，四川 成都610031）

伴隨著城市化的熱潮，不斷增加的城市汽車保有量與有限的交通資源的供需矛盾也愈發(fā)激烈[1]，其直接結果便是交通擁堵問題.道路交通信息實時可視化能夠清晰展示實時交通擁堵狀態(tài)，揭示交通流量變化趨勢，輔助交通部門實時監(jiān)控交通流量信息并及時向社會發(fā)布[2]，讓人們根據(jù)交通狀態(tài)更有計劃地選擇出行時間與路線.人們在日常出行中普遍通過瀏覽器使用各類工具瀏覽實時交通狀態(tài)，然而，瀏覽器的現(xiàn)有性能難以支持海量實時交通信息的展示[3-4].因此如何在網絡環(huán)境下對海量實時道路交通數(shù)據(jù)進行高效可視化是目前面臨的關鍵問題.

現(xiàn)有網絡可視化技術大多需要安裝瀏覽器插件實現(xiàn)對海量數(shù)據(jù)的高效渲染，但這對后期維護和更新帶來了一定的困難，同時，瀏覽器插件不能滿足用戶對Web GIS（geographic information system）便捷性與實時性的預期[5].近年來，隨著Web GIS 技術的快速發(fā)展與普及，基于WebGL (Web graghics library)技術實現(xiàn)網絡環(huán)境下跨平臺、免插件式的道路交通流量數(shù)據(jù)可視化的需求日益增強[6-10].然而，WebGL作為免插件式的網絡可視化技術，難以直接支持對大規(guī)模道路交通數(shù)據(jù)的高質量以及高效率渲染.

國內外利用WebGL 技術進行道路可視化方面的研究大多通過車輛軌跡流變化體現(xiàn)交通態(tài)勢變化[11]，面向公眾的電子產品，如百度地圖、高德地圖以及騰訊地圖等，一般在地圖上繪制箭頭，使用箭頭的方向、粗細或顏色代表軌跡方向以及密集程度[12]，可視化效果差，相較于動畫，數(shù)據(jù)表示方法給予人腦思維的刺激感更低.鄧晨晨[13]利用百度推出的ECharts開源可視化產品對重慶市公交出行軌跡進行了動態(tài)可視化；Tominski 等[14]通過二、三維聯(lián)動可視化車輛軌跡，在二維地圖上增加三維屬性值表示車速以及車流量，但以上方法并不支持大規(guī)模交通數(shù)據(jù)的渲染，在效率上依舊存在缺陷.

在可視化系統(tǒng)中，利用合適的動畫與過渡效果是增強可視化結果視圖的豐富性與可理解性的有效方法[15].流光線和顏色漸變作為提高可視化效果的兩種基礎方法，對改善視覺效果以及用戶交互感受有巨大作用.流光線是通過不斷更新顏色、透明度等光學屬性產生流動效果的光線[16]，其相較于靜態(tài)線來說，有更強的視覺沖擊力，顏色漸變作為輔助手段，能夠提升用戶觀察交通態(tài)勢變化的敏感程度.海量道路交通數(shù)據(jù)若直接在瀏覽器中渲染，將存在數(shù)據(jù)獲取速度慢、傳輸效率低、渲染效果差等問題.

因此，本文提出一種面向實時道路交通大數(shù)據(jù)的大規(guī)模流光線網絡輕量化可視化方法.首先，采用高精度的大規(guī)模道路網數(shù)據(jù)為研究對象，在此基礎上進行了道路網數(shù)據(jù)重構.基于道路屬性的道路網分層組織，系統(tǒng)研究了基于WebGL 線段索引特點的多道路合并方法.其次，使用視域剔除以及多線程技術對場景進行優(yōu)化，設計實現(xiàn)了支持道路擁堵狀態(tài)實時變換的漸變、高效實時動態(tài)流光線等動畫效果.最后，以全國道路網數(shù)據(jù)為例，進行大規(guī)模流光線網絡輕量化可視化實驗與分析.

1 道路網分層組織方法

1.1 道路網數(shù)據(jù)重構

本文的整體結構如圖1 所示.

圖1 大規(guī)模流光線網絡輕量化可視化方法Fig.1 Lightweight visualization method of large-scale streaminglight network

大規(guī)模流光線高效實時動態(tài)渲染可視化需要處理大量的道路數(shù)據(jù)，其精確的道路數(shù)據(jù)是實驗的基礎[17].為保證流光線在Web 端可視化的實時性與高效性，需要對道路數(shù)據(jù)進行合理的格式轉換以及冗余信息的過濾，有效提高Web 端對道路數(shù)據(jù)的獲取速度與傳輸效率.預處理流程如圖2 所示.

圖2 數(shù)據(jù)預處理Fig.2 Data preprocessing

目前大規(guī)模二維道路網數(shù)據(jù)一般為shape 文件.相比于shape，JSON 更加簡練、小巧，另外瀏覽器對JSON 快速解析的支持使得JSON 更適用于網絡傳輸領域[3]，符合在網絡環(huán)境下傳輸大數(shù)據(jù)的需求.因此本文選用JSON 作為數(shù)據(jù)交換格式，通過WebSocket實時服務器與瀏覽器頁面進行數(shù)據(jù)傳輸，在接入shape 文件與實時路況信息時對其進行格式轉換，然后將處理好的JSON 形式的數(shù)據(jù)傳輸?shù)綖g覽器端，用以數(shù)據(jù)解析以及后續(xù)動態(tài)可視化渲染繪制.

由于道路數(shù)據(jù)含有多種特征信息，冗余信息過多勢必會造成數(shù)據(jù)量過大，影響精確道路數(shù)據(jù)在瀏覽器中的獲取速度與傳輸效率，因此需要過濾掉數(shù)據(jù)中的無關信息，本文只需要道路編號、道路名稱、道路幾何數(shù)據(jù)、道路紅線寬度4 種道路特征信息.

1.2 基于道路屬性的道路網分層組織

大規(guī)模道路網數(shù)據(jù)拓撲關系極其復雜，各等級道路交織縱橫，由于大規(guī)模道路網數(shù)據(jù)并沒有直接區(qū)分道路等級，若將所有道路直接進行渲染會讓屏幕畫面過于雜亂且不美觀，導致用戶體驗度很差.例如，當視點很高時，很多肉眼難以分辨或模糊的道路依然被繪制出來，使屏幕畫面不清晰.而且多余的繪制以及數(shù)據(jù)調度會造成設備硬件資源的浪費.在此提出一種基于道路屬性的道路網分層組織方法，根據(jù)道路數(shù)據(jù)的幾何數(shù)據(jù)以及道路名稱屬性對JSON格式數(shù)據(jù)進行合理的匹配合并，在此基礎上根據(jù)道路紅線寬度和路長對道路網進行分層，并建立空間索引，再根據(jù)視點位置變化進行道路數(shù)據(jù)的動態(tài)調度，其具體步驟描述如下：

步驟1獲取JSON 數(shù)據(jù)中每條道路的道路點數(shù)據(jù)的幾何數(shù)據(jù)、道路名稱.

步驟2匹配道路名稱和道路幾何數(shù)據(jù)的起點與終點，將道路名稱相同且被分為多段的道路進行合并，合并道路紅線寬度取最大值.

步驟3獲取JSON 數(shù)據(jù)中每條道路的道路點序列、道路紅線寬度.

步驟4計算道路長度D=d1+d2+···+dn，定義di為相鄰道路頂點之間距離，單位為km，i=1,2,···,n.根據(jù)Haversin 公式可推導得

式中：Δ λ1、Δ λ2分別為相鄰道路頂點的緯度差、經度差；l1、l2為相鄰道路頂點的緯度；R=6371 km，為地球半徑.

根據(jù)《城市道路工程設計規(guī)范》[18]，對道路紅線寬度W建議一級道路不小于40 m，二級道路30～40 m，三級道路25～30 m，四級道路12～25 m.設定路長閾值為P，若W≥40m，將該道路歸為Ⅰ層；若30m≤W<40 m且D

步驟5根據(jù)道路分層結果建立空間索引優(yōu)化數(shù)據(jù)調度，開始本幀渲染，判斷視角高H和閾值P1、P2、P3對應的視角高H1、H2、H3（分別取1、10、50 km）的大小.若H≥H1，只調用Ⅰ層道路數(shù)據(jù)；若H2≤H

算法流程如圖3 所示.

圖3 算法流程Fig.3 Algorithm flowchart

2 大規(guī)模流光線實時渲染與場景優(yōu)化

2.1 基于WebGL 線段索引特點的多道路合并方法

在WebGL 中，線段的渲染是通過線圖元完成的，一條線段需要兩個三角形圖元構成，所以需要通過復制頂點生成線段對應的4 個頂點和6 個索引值.線段繪制出來的形狀取決于索引值數(shù)組的排列順序，若索引值缺失或者錯位，繪制出來的圖形會是錯亂的、不完整的.基于這個特點，可以將多條道路合并成一條道路.以A、B、C、D4 個點為例，經過復制后，坐標為分別對應的索引值為0、1、2、3、4、5、6、7、8、9、10、11.

當索引值數(shù)組為（0，2，1，1，2，3，4，6，5，5，6，7，8，10，9，9，10，11）時，繪制圖形如圖4（a）所示.刪除點B和C之間的6 個索引值后，索引值數(shù)組為（0，2，1，1，2，3，8，10，9，9，10，11），繪制圖形如圖4（b）所示，此時B和C兩點之間的兩個三角形圖元沒有被繪制出來.

圖4 WebGL 線段索引特點Fig.4 WebGL segment index features

當用戶需要分別繪制點A、B和點C、D之間的道路時，將它們分為兩個primitive 進行渲染.向頂點著色器中按順序輸入兩段道路的點坐標后，只要在索引值數(shù)組中刪去道路與道路接合部分的索引，就能實現(xiàn)相同的渲染結果.在渲染大規(guī)模道路交通數(shù)據(jù)時，此方法能極大地減少CPU 的計算次數(shù)，有效地縮短由數(shù)據(jù)解析到生成primitive 過程所耗費的時間.

由于將多條道路合并為一個primitive 進行渲染改變了索引數(shù)組的結構，所以需要對索引數(shù)組對應的其他描述數(shù)據(jù)進行修改.

已知所有道路的數(shù)量和每條道路的數(shù)據(jù)點數(shù)量，構建一個巨大的索引值數(shù)組.索引增加規(guī)律如下：設置n的初始值為0，在相同的道路內，每增長一個數(shù)據(jù)點，n的值增長1，索引值數(shù)組在原來的基礎上增加以下6個數(shù)組元素 4n、4n+2、4n+1、4n+1、4n+2、4n+3；完成道路數(shù)據(jù)點遍歷后，n的值增長1，然后開始處理新的道路.重復上述步驟，直到所有道路處理完成.

經過道路網分層組織以及多道路進行合并之后，渲染效率得到了有效的提升.流光線渲染可以解釋為折線段的分段設色與周期變色相結合.算法流程如下：

1）根據(jù)道路分層將每條道路分為合適的n段，實驗中n在Ⅰ、Ⅱ、Ⅲ、Ⅳ層分別設置為相鄰道路點距離（m）除以1000、200、30、2 的商值，并為每段道路添加道路時間值 α 以及流光流動周期 β，使流光在道路上循環(huán)流動.

2）設置一個初始值為0 且隨時間增長的變量t，求當前時間與道路時間值的差值 Δt=tmod β?α.

設置閾值T1、T2、T3分別為65、70、130.當T1≤Δt≤T2，流光線條頭部顏色設置為c1；當T2≤Δt≤T3，流光線條尾部顏色設置為c2，如式（2）所示.

式中：t0、t1、t2分別為所求顏色對應道路點、Δt=T3對應道路點、Δt=T2對應道路點的道路時間值；c0為車道顏色；r、g、b分別為紅、綠、藍值.

如圖5 所示，漸變流光線由5 個顏色組成，前端的深色部分代表流光線的流動方向.交通態(tài)勢發(fā)生變化時，c1與c2設置為隨t變化而變化的目標顏色，從而實現(xiàn)顏色漸變的效果.圖中由深至淺構成漸變流光線的5 個顏色的（r，g，b）分別為（137，105，5）、（203，155，5）、（255，230，110）、（255，243，164）、（255，255，217）.

圖5 流光線實時渲染Fig.5 Real-time rendering of streaming light

2.2 大規(guī)模道路網場景優(yōu)化方法

在可視化過程中，場景的渲染速度及效果除了與硬件單元性能以及數(shù)據(jù)復雜度有關外，也和優(yōu)化方式關系密切[19].雖然對大規(guī)模道路數(shù)據(jù)的復雜問題進行了處理，但在渲染大規(guī)模流光線時，依舊存在大量硬件資源被浪費的情況，實時動態(tài)渲染大規(guī)模流光線時，選擇繪制場景中的內容與提升計算并行度是優(yōu)化渲染速度及效果的關鍵.具體優(yōu)化流程如圖6 所示.

圖6 場景優(yōu)化Fig.6 Scene optimization

在大規(guī)模流光線實時動態(tài)渲染時，在顯示設備中只能顯示道路的一部分，未被顯示的道路并不需要繪制，這一部分道路會很大程度地浪費硬件資源，因此需要把未被觀察到的道路進行剔除處理.通過獲取每幀渲染開始時的相機坐標、視點位置以及視角高，計算得到視域范圍，將在視域范圍外的道路點數(shù)據(jù)剔除.

在網絡端的渲染過程中，如果圖像渲染、加載數(shù)據(jù)以及邏輯關系處理都在同一線程，易導致線程堵塞，渲染效率偏低[20].將數(shù)據(jù)讀取、處理與顯示分別放在不同線程中進行.主線程、渲染線程以及加載線程這樣的多線程設計使得加載數(shù)據(jù)不會堵塞主線程或者渲染線程，進一步提升計算并行度，提高大規(guī)模流光線實時動態(tài)渲染的效果.

3 實驗結果與分析

為驗證方法的有效性，利用WebGL 技術研發(fā)可視化原型系統(tǒng)，選擇全國道路網shape 格式數(shù)據(jù)進行了實驗分析.在數(shù)據(jù)處理方面，對shape 文件進行處理，轉為geojson 格式.然后提取了geojson 文件中的ID、coordinate 以及name 信息，并將其組織為更適合網絡環(huán)境傳輸?shù)腏SON 格式.

采用筆記本電腦作為服務端搭建網絡環(huán)境.硬件環(huán)境為Intel Core i52.6 GHz CPU、8 GB 內存、2 GB 顯存的NVIDA Geforce 860 M 顯卡；軟件環(huán)境為Windows 10 操作系統(tǒng)、Google Chrome 78 瀏覽器.

使用1、10、50 km 視角高閾值將全國道路網分為4 個不同層次的道路網.采用3 種不同顏色的流光線來表達不同擁擠程度的交通態(tài)勢，如表1 所示，其中每條流光線由流光線尾部到流光線頭部之間的顏色組成，表中顏色數(shù)值分別為紅、綠、藍值.

表1 不同顏色的流光線Tab.1 Different colors of streaming light

實驗效果見圖7 和圖8.圖7 展示了分別截取自7000.0、40.0、5.0、0.5 km 視角高交互漫游過程中的場景，分別對應場景1～4.圖8 展示了一條正在運動的流光線在不同時刻的可視化效果.

圖7 不同視角高下交通數(shù)據(jù)可視化Fig.7 Visualization of traffic data from different view heights

圖8 不同時刻下的流光線Fig.8 Streaming light at different times

圖9 展示了大規(guī)模流光線可視化在不同場景、角度、方法漫游交互50.0 秒過程中的幀率.從圖中可以看出利用本文可視化方法在不同場景下、不同角度下的可視化幀率均穩(wěn)定在40 幀/秒以上，相較于同等情況下利用百度ECharts GL 方法幀率提高了20～30 幀/秒.進行場景優(yōu)化后，4 種場景下的相關參數(shù)見表2.

圖9 大規(guī)模流光線可視化實時渲染幀率Fig.9 Real-time rendering frame rate of large-scale streaming light visualization

從表2 可以看出，在漫游過程中，基于視角高的變化，動態(tài)地對道路網數(shù)據(jù)進行了選擇性可視化，做到了按需加載，并且在有效減少場景一次性渲染大量流光線同時，相應的道路層級道路占可視化頁面總道路數(shù)75%以上，保持了較高的道路層級真實度，大大的提升了渲染效率.在不同視角高以及不同漫游角度下均能保證交互漫游過程中瀏覽器端可視化的實時渲染幀率穩(wěn)定在 40 幀/秒以上，性能表現(xiàn)良好.證明本文方法支持在網絡環(huán)境下對面向實時交通大數(shù)據(jù)的大規(guī)模流光線進行可視化展示.

表2 不同場景下參數(shù)記錄Tab.2 Parameter records in different scenarios

4 結 論

1）本文提出一種基于道路屬性的大規(guī)模道路網分層組織方法，對道路網數(shù)據(jù)進行合理的格式轉換以及數(shù)據(jù)篩選，顧及道路紅線寬度、路長等屬性對其進行合理的分層，在可視化時使相應的道路層級道路占可視化頁面總道路數(shù)的75%以上，有效地避免了過量的數(shù)據(jù)調度以及可視化畫面雜糅的問題.

2）本文提出一種基于WebGL 線段索引特點的道路合并場景優(yōu)化方法，利用WebGL 畫線機制將數(shù)量龐大的道路圖元合并為視覺上是多條道路的一個圖元，同時結合視域剔除以及多線程技術，有效地節(jié)約了硬件資源.

3）本文以全國道路網為實驗數(shù)據(jù)，按照前文的理論與方法進行了實驗，使用分段設色和周期變色實現(xiàn)能夠漸變的流光線來表達交通態(tài)勢，并記錄多個場景下的可視化幀率，實驗表明該方法瀏覽器端可視化的實時渲染幀率穩(wěn)定在40 幀/秒以上，能夠滿足網絡環(huán)境下免插件的實時道路交通態(tài)勢的大眾化應用.