大規(guī)模道路交通數(shù)據(jù)網(wǎng)絡(luò)輕量化可視化方法

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

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

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

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

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

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

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

1 道路網(wǎng)分層組織方法

1.1 道路網(wǎng)數(shù)據(jù)重構(gòu)

本文的整體結(jié)構(gòu)如圖1 所示.

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

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

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

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

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

1.2 基于道路屬性的道路網(wǎng)分層組織

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

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

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

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

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

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

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

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

算法流程如圖3 所示.

圖3 算法流程Fig.3 Algorithm flowchart

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

2.1 基于WebGL 線段索引特點(diǎn)的多道路合并方法

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

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

圖4 WebGL 線段索引特點(diǎn)Fig.4 WebGL segment index features

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

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

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

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

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

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

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

式中：t0、t1、t2分別為所求顏色對應(yīng)道路點(diǎn)、Δt=T3對應(yīng)道路點(diǎn)、Δt=T2對應(yīng)道路點(diǎn)的道路時間值；c0為車道顏色；r、g、b分別為紅、綠、藍(lán)值.

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

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

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

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

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

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

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

3 實(shí)驗(yàn)結(jié)果與分析

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

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

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

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

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

圖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 幀/秒.進(jìn)行場景優(yōu)化后，4 種場景下的相關(guān)參數(shù)見表2.

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

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

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

4 結(jié) 論

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

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

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