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

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

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

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

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

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

因此，本文提出一種面向?qū)崟r(shí)道路交通大數(shù)據(jù)的大規(guī)模流光線網(wǎng)絡(luò)輕量化可視化方法.首先，采用高精度的大規(guī)模道路網(wǎng)數(shù)據(jù)為研究對(duì)象，在此基礎(chǔ)上進(jìn)行了道路網(wǎng)數(shù)據(jù)重構(gòu).基于道路屬性的道路網(wǎng)分層組織，系統(tǒng)研究了基于WebGL 線段索引特點(diǎn)的多道路合并方法.其次，使用視域剔除以及多線程技術(shù)對(duì)場(chǎng)景進(jìn)行優(yōu)化，設(shè)計(jì)實(shí)現(xiàn)了支持道路擁堵?tīng)顟B(tài)實(shí)時(shí)變換的漸變、高效實(shí)時(shí)動(dòng)態(tài)流光線等動(dòng)畫(huà)效果.最后，以全國(guó)道路網(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í)時(shí)動(dòng)態(tài)渲染可視化需要處理大量的道路數(shù)據(jù)，其精確的道路數(shù)據(jù)是實(shí)驗(yàn)的基礎(chǔ)[17].為保證流光線在Web 端可視化的實(shí)時(shí)性與高效性，需要對(duì)道路數(shù)據(jù)進(jìn)行合理的格式轉(zhuǎn)換以及冗余信息的過(guò)濾，有效提高Web 端對(duì)道路數(shù)據(jù)的獲取速度與傳輸效率.預(yù)處理流程如圖2 所示.

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

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

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

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

大規(guī)模道路網(wǎng)數(shù)據(jù)拓?fù)潢P(guān)系極其復(fù)雜，各等級(jí)道路交織縱橫，由于大規(guī)模道路網(wǎng)數(shù)據(jù)并沒(méi)有直接區(qū)分道路等級(jí)，若將所有道路直接進(jìn)行渲染會(huì)讓屏幕畫(huà)面過(guò)于雜亂且不美觀，導(dǎo)致用戶體驗(yàn)度很差.例如，當(dāng)視點(diǎn)很高時(shí)，很多肉眼難以分辨或模糊的道路依然被繪制出來(lái)，使屏幕畫(huà)面不清晰.而且多余的繪制以及數(shù)據(jù)調(diào)度會(huì)造成設(shè)備硬件資源的浪費(fèi).在此提出一種基于道路屬性的道路網(wǎng)分層組織方法，根據(jù)道路數(shù)據(jù)的幾何數(shù)據(jù)以及道路名稱屬性對(duì)JSON格式數(shù)據(jù)進(jìn)行合理的匹配合并，在此基礎(chǔ)上根據(jù)道路紅線寬度和路長(zhǎng)對(duì)道路網(wǎng)進(jìn)行分層，并建立空間索引，再根據(jù)視點(diǎn)位置變化進(jìn)行道路數(shù)據(jù)的動(dòng)態(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計(jì)算道路長(zhǎng)度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è)計(jì)規(guī)范》[18]，對(duì)道路紅線寬度W建議一級(jí)道路不小于40 m，二級(jí)道路30～40 m，三級(jí)道路25～30 m，四級(jí)道路12～25 m.設(shè)定路長(zhǎng)閾值為P，若W≥40m，將該道路歸為Ⅰ層；若30m≤W<40 m且D

步驟5根據(jù)道路分層結(jié)果建立空間索引優(yōu)化數(shù)據(jù)調(diào)度，開(kāi)始本幀渲染，判斷視角高H和閾值P1、P2、P3對(duì)應(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í)時(shí)渲染與場(chǎng)景優(yōu)化

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

在WebGL 中，線段的渲染是通過(guò)線圖元完成的，一條線段需要兩個(gè)三角形圖元構(gòu)成，所以需要通過(guò)復(fù)制頂點(diǎn)生成線段對(duì)應(yīng)的4 個(gè)頂點(diǎn)和6 個(gè)索引值.線段繪制出來(lái)的形狀取決于索引值數(shù)組的排列順序，若索引值缺失或者錯(cuò)位，繪制出來(lái)的圖形會(huì)是錯(cuò)亂的、不完整的.基于這個(gè)特點(diǎn)，可以將多條道路合并成一條道路.以A、B、C、D4 個(gè)點(diǎn)為例，經(jīng)過(guò)復(fù)制后，坐標(biāo)為分別對(duì)應(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）時(shí)，繪制圖形如圖4（a）所示.刪除點(diǎn)B和C之間的6 個(gè)索引值后，索引值數(shù)組為（0，2，1，1，2，3，8，10，9，9，10，11），繪制圖形如圖4（b）所示，此時(shí)B和C兩點(diǎn)之間的兩個(gè)三角形圖元沒(méi)有被繪制出來(lái).

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

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

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

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

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

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

2）設(shè)置一個(gè)初始值為0 且隨時(shí)間增長(zhǎng)的變量t，求當(dāng)前時(shí)間與道路時(shí)間值的差值 Δ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分別為所求顏色對(duì)應(yīng)道路點(diǎn)、Δt=T3對(duì)應(yīng)道路點(diǎn)、Δt=T2對(duì)應(yīng)道路點(diǎn)的道路時(shí)間值；c0為車(chē)道顏色；r、g、b分別為紅、綠、藍(lán)值.

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

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

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

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

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

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

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

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

為驗(yàn)證方法的有效性，利用WebGL 技術(shù)研發(fā)可視化原型系統(tǒng)，選擇全國(guó)道路網(wǎng)shape 格式數(shù)據(jù)進(jìn)行了實(shí)驗(yàn)分析.在數(shù)據(jù)處理方面，對(duì)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 視角高閾值將全國(guó)道路網(wǎng)分為4 個(gè)不同層次的道路網(wǎng).采用3 種不同顏色的流光線來(lái)表達(dá)不同擁擠程度的交通態(tài)勢(shì)，如表1 所示，其中每條流光線由流光線尾部到流光線頭部之間的顏色組成，表中顏色數(shù)值分別為紅、綠、藍(lán)值.

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

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

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

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

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

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

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

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

4 結(jié) 論

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

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

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