基于HTML5的時(shí)空軌跡動(dòng)態(tài)可視化方法

王淑慶，韓 勇，張小壘，郭 建，陳 戈

（1.中國(guó)海洋大學(xué) 信息科學(xué)與工程學(xué)院，山東 青島266100；2.青島市勘察測(cè)繪研究院，山東 青島266033）

0 引 言

研究人員對(duì)時(shí)空軌跡數(shù)據(jù)進(jìn)行了大量的研究，并試圖挖掘軌跡數(shù)據(jù)背后隱藏的時(shí)空關(guān)系［1－4］。如何快速有效地表達(dá)這些數(shù)據(jù)以便為相關(guān)部門(mén)提供決策支持，是眾多領(lǐng)域研究的難點(diǎn)之一。時(shí)空軌跡數(shù)據(jù)蘊(yùn)含著速度、加速度、方向等重要的屬性信息，同時(shí)具有空間位置和時(shí)間維度信息，具有數(shù)據(jù)量大、頻率高、動(dòng)態(tài)變化等特點(diǎn)，挖掘分析非常困難?？梢暬夹g(shù)可以直觀地呈現(xiàn)多維時(shí)空軌跡數(shù)據(jù)，并提供豐富的互動(dòng)方式，以揭示數(shù)據(jù)中包含的時(shí)空規(guī)律［5］，以便將來(lái)重建歷史狀態(tài)、跟蹤變化和預(yù)測(cè)未來(lái)。時(shí)空數(shù)據(jù)的動(dòng)態(tài)可視化在時(shí)空規(guī)律的探索性分析中有著廣泛的應(yīng)用前景，例如人類(lèi)遷移，商業(yè)交易，社交網(wǎng)絡(luò)傳播等［6］。

通過(guò)互聯(lián)網(wǎng)實(shí)現(xiàn)地理時(shí)空數(shù)據(jù)的網(wǎng)絡(luò)發(fā)布、應(yīng)用和共享，提高地理信息資源的利用率和共享度，在未來(lái)各類(lèi)地理信息的建設(shè)中有著廣泛的發(fā)展空間［7］，地理空間信息共享與協(xié)同的社會(huì)化將是未來(lái)發(fā)展的趨勢(shì)［8］。傳統(tǒng)的時(shí)空數(shù)據(jù)網(wǎng)絡(luò)可視化大多需要在用戶(hù)在電腦上安裝客戶(hù)端［9，10］或者瀏覽器插件［11，12］，后期維護(hù)更新困難，難以進(jìn)行廣泛推廣和使用。HTML5以前的版本僅可以對(duì)預(yù)渲染的數(shù)據(jù)進(jìn)行可視化顯示，例如Google map，OpenStreetMap都是在服務(wù)器端對(duì)數(shù)據(jù)進(jìn)行預(yù)渲染，然后將相應(yīng)的圖像傳送到瀏覽器端，瀏覽器無(wú)法對(duì)基于圖像的表示進(jìn)行空間分析，也不能以任何方式個(gè)性化地圖可視化過(guò)程，例如動(dòng)態(tài)改變物體的顏色［13］。為了解決以上難題，減少瀏覽器對(duì)插件如Adobe Flash、Microsoft Silverlight和Oracle－Sun JavaFX等的需求，HTML5提供了Canvas和SVG 接口對(duì)數(shù)據(jù)進(jìn)行可視化繪制，使Web開(kāi)發(fā)人員在瀏覽器端使用標(biāo)準(zhǔn)的Web技術(shù)實(shí)現(xiàn)免插件、跨平臺(tái)的Web數(shù)據(jù)可視化成為可能。Web瀏覽器正迅速?gòu)暮?jiǎn)單的HTML渲染演變成能夠在許多應(yīng)用領(lǐng)域提供豐富交互式應(yīng)用程序的運(yùn)行時(shí)環(huán)境［14］。當(dāng)前IE9以上版本 （含IE9）、Firefox （火狐瀏覽器）、Chrome（谷歌瀏覽器）和Safari（狩獵）等傳統(tǒng)電腦端的主流瀏覽器都對(duì)實(shí)現(xiàn)了對(duì)HTML5的主要新特性支持，而且現(xiàn)在移動(dòng)終端的百度瀏覽器、UC 瀏覽器和Opera等瀏覽器也都實(shí)現(xiàn)了對(duì)HTML5主要標(biāo)準(zhǔn)的支持，使在移動(dòng)端實(shí)現(xiàn)數(shù)據(jù)的可視化成為可能。對(duì)于大數(shù)據(jù)量的實(shí)時(shí)繪制渲染Canvas具有非常好的性能［15］，軌跡數(shù)據(jù)具有數(shù)據(jù)量大、隨時(shí)間動(dòng)態(tài)變化等特點(diǎn)，因此利用HTML5Canvas可以較好的實(shí)現(xiàn)軌跡數(shù)據(jù)的動(dòng)態(tài)可視化。

針對(duì)客戶(hù)端軟件和瀏覽器插件所存在的問(wèn)題，利用最新的HTML5技術(shù)，基于Canvas實(shí)現(xiàn)了瀏覽器端時(shí)空軌跡的動(dòng)態(tài)實(shí)時(shí)渲染與繪制，基于WebSocket實(shí)現(xiàn)了時(shí)空軌跡數(shù)據(jù)的實(shí)時(shí)快速傳輸，對(duì)網(wǎng)絡(luò)環(huán)境下對(duì)時(shí)空軌跡數(shù)據(jù)的免插件動(dòng)態(tài)可視化進(jìn)行了探索和實(shí)踐。

1 可視化方法流程

基于HTML5Canvas、WebSocket和粒子追蹤等技術(shù)對(duì)網(wǎng)絡(luò)環(huán)境下時(shí)空軌跡數(shù)據(jù)的動(dòng)態(tài)可視化進(jìn)行了研究，提出的可視化總體技術(shù)框架如圖1所示?？傮w框架分為數(shù)據(jù)層、服務(wù)層和表現(xiàn)層3個(gè)部分，利用MVC 模式進(jìn)行開(kāi)發(fā)，做到了視圖、控制器和模型的分離，提高了設(shè)計(jì)的規(guī)范性，實(shí)現(xiàn)了各層間連接的松耦合。其中，數(shù)據(jù)層主要負(fù)責(zé)時(shí)空軌跡數(shù)據(jù)和地理基礎(chǔ)空間數(shù)據(jù)的存儲(chǔ)與管理；服務(wù)層通過(guò)WebSocket服務(wù)器與瀏覽器頁(yè)面進(jìn)行數(shù)據(jù)通訊和交換，根據(jù)瀏覽器端的請(qǐng)求對(duì)軌跡數(shù)據(jù)進(jìn)行預(yù)處理，包括清洗、坐標(biāo)變換等，然后將預(yù)處理后的數(shù)據(jù)傳輸?shù)娇蛻?hù)端；瀏覽器端進(jìn)行數(shù)據(jù)解析和插值模擬，通過(guò)HTML5Canvas和粒子追蹤技術(shù)實(shí)現(xiàn)動(dòng)態(tài)可視化交互繪制渲染。

圖1 可視化方法流程

2 可視化關(guān)鍵技術(shù)研究與實(shí)現(xiàn)

2.1 時(shí)空軌跡數(shù)據(jù)的處理

時(shí)空軌跡是指由一系列軌跡點(diǎn)按照時(shí)間先后順序組成的序列。本文將軌跡數(shù)據(jù)點(diǎn)定義為p（x，y，t，attr），其中x 代表經(jīng)度，y 代表緯度，t代表時(shí)間，attr代表加速度、速度、方向等信息。軌跡有一系列軌跡點(diǎn)p（xi，yi，ti，attri）組成，我們規(guī)定軌跡中至少有3 個(gè)軌跡點(diǎn)，軌跡Trajectory 可表示為

2.1.1 數(shù)據(jù)清洗

時(shí)空軌跡數(shù)據(jù)大多是由GPS定位裝置和各種傳感器獲取，由于GPS定位精度、傳感器系統(tǒng)誤差和采集頻率的影響軌跡數(shù)據(jù)會(huì)出現(xiàn)異常。本文主要對(duì)以下幾種數(shù)據(jù)進(jìn)行剔除：

（2）計(jì)算兩個(gè)軌跡點(diǎn)間的速度，移除速度大于一定閾值的點(diǎn)，例如：人步行的速度一般不超過(guò)5m／s，公交車(chē)不超過(guò)16m／s；

（3）受采樣頻率的影響，軌跡可能會(huì)產(chǎn)生冗余，即在同一個(gè)時(shí)間戳產(chǎn)生多個(gè)軌跡點(diǎn)，本文保留第一個(gè)點(diǎn)，移除其它的點(diǎn)；

（4）移除軌跡點(diǎn)個(gè)數(shù)小于3的軌跡。

2.1.2 基于Cat－mull曲線(xiàn)插值的時(shí)空軌跡重構(gòu)

原始的軌跡數(shù)據(jù)是由一系列離散點(diǎn)組成的，而時(shí)空軌跡的動(dòng)態(tài)可視化是按照特定時(shí)間順序連續(xù)變化的過(guò)程，需要對(duì)軌跡進(jìn)行重構(gòu)獲取每一個(gè)繪制時(shí)刻的軌跡點(diǎn)。軌跡重構(gòu)的主要思想是對(duì)數(shù)據(jù)進(jìn)行插值，文中采用Cat－mull曲線(xiàn)插值算法對(duì)時(shí)空軌跡數(shù)據(jù)進(jìn)行插值獲取平滑完整的軌跡線(xiàn)。Cat－mull曲線(xiàn)是一種分段式連續(xù)平滑曲線(xiàn)，每一分段都可以獨(dú)立計(jì)算，進(jìn)行一次擬合只需要利用前后4個(gè)基準(zhǔn)控制點(diǎn)進(jìn)行插值，通過(guò)連續(xù)的控制頂點(diǎn)的控制，可以實(shí)現(xiàn)分段間的連續(xù)平滑［16］。假設(shè)有一組軌跡控制點(diǎn)：p0（x0，y0，t0），p1（x1，y1，y1），p2（x2，y2，t2），p3（x3，y3，t3）其中t0＜t1＜t2＜t3，如圖2所示。

圖2 Cat－mull軌跡曲線(xiàn)重構(gòu)

對(duì)于給定的控制點(diǎn)p0，p1，p2，p3，曲線(xiàn)p1p2中間的插值點(diǎn)pt（xt，yt，tt），其中t1＜＝tt＜＝t2，可由以下公式計(jì)算

公式中t＝ （tt－t1）／ （t2－t1）其取值范圍為： ［0，1］，通過(guò)設(shè)置t值可以插值獲得 ［t1，t2］時(shí)間范圍內(nèi)任意時(shí)刻tt的軌跡點(diǎn)坐標(biāo)，對(duì)于軌跡起始點(diǎn)可將第一個(gè)點(diǎn)和第二個(gè)點(diǎn)設(shè)為同一點(diǎn)，軌跡結(jié)束點(diǎn)最后一個(gè)點(diǎn)和倒數(shù)第二個(gè)點(diǎn)設(shè)為同一點(diǎn)，同樣利用Cat－mull插值算法獲得首段和末段軌跡曲線(xiàn)。

2.1.3 坐標(biāo)變換

時(shí)空軌跡位置數(shù)據(jù)以經(jīng)緯度形式表示，為了在Canvas上實(shí)現(xiàn)軌跡數(shù)據(jù)的繪制，需要將地理坐標(biāo)系轉(zhuǎn)換為Canvas屏幕坐標(biāo)系。

如圖3 所示，設(shè)地理坐標(biāo)系的左上角點(diǎn)為 （LTlng，LTlat），右下角點(diǎn)為 （RDlng，RDlat），屏幕Canvas的寬度為canvasWidth，高度為canvasHeight，則

其中： （centerX，centerY）為Canvas地圖中心點(diǎn)坐標(biāo)，（offsetX，offetY）是Canvas地圖在x軸和y軸上的偏移量，scale為Canvas地圖的縮放級(jí)別。

圖3 坐標(biāo)變換

2.2 基于WebSocket的時(shí)空軌跡數(shù)據(jù)動(dòng)態(tài)加載技術(shù)

WebSocket是HTML5 新引入的技術(shù)，允許后臺(tái)隨時(shí)向客戶(hù)端發(fā)送數(shù)據(jù)；WebSocket的實(shí)現(xiàn)使Web應(yīng)用不需要每次都發(fā)起HTTP請(qǐng)求來(lái)建立與服務(wù)器的連接，可以實(shí)現(xiàn)瀏覽器與服務(wù)器間的一次握手多次數(shù)據(jù)交換，這樣二者之間就形成了一條快速的數(shù)據(jù)傳輸通道。瀏覽器與服務(wù)器溝通的頭文件大概只有2Bytes，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊。現(xiàn)在主流的瀏覽器包括Chrome，F(xiàn)irefox，Opera，Safari，IE10都實(shí)現(xiàn)了WebSocket的支持。目前在已經(jīng)有了很多符合WebSocket規(guī)范的開(kāi)源服務(wù)器實(shí)現(xiàn)方 案，例 如 基 于JavaScript 的Node.js、基 于Java 的Kaazing WebSocket Gateway 和 基 于.NET 的SuperWeb－Socket等。本文利用基于.NET 的SuperWebSocket開(kāi)源框架構(gòu)建了WebSocket服務(wù)器應(yīng)用程序，服務(wù)器可以按照時(shí)間順序?qū)崟r(shí)向客戶(hù)端傳輸特定時(shí)間段的時(shí)空軌跡數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的分時(shí)段動(dòng)態(tài)加載，避免一次完全加載過(guò)程中用戶(hù)等待時(shí)間過(guò)長(zhǎng)的問(wèn)題。圖4為基于WebSocket的時(shí)空軌跡數(shù)據(jù)動(dòng)態(tài)加載方案。

圖4 基于WebSocket的時(shí)空軌跡數(shù)據(jù)動(dòng)態(tài)加載方案

2.3 瀏覽器端基于HTML5Canvas的可視化繪制

2.3.1 地理基礎(chǔ)矢量數(shù)據(jù)的加載與繪制

時(shí)空軌跡數(shù)據(jù)需要與地理基礎(chǔ)地圖結(jié)合來(lái)發(fā)現(xiàn)軌跡運(yùn)動(dòng)與周?chē)h(huán)境之間的關(guān)系，為此需要加載地理基礎(chǔ)數(shù)據(jù)。在繪制大數(shù)據(jù)量、多圖層的情況下使用HTML5Canvas繪制矢量圖形相比傳統(tǒng)地圖切片技術(shù)在網(wǎng)頁(yè)加載速度上也有明顯優(yōu)勢(shì)［17］。本文利用Canvas繪圖API將矢量數(shù)據(jù)分為地圖輪廓、地名標(biāo)注、道路等進(jìn)行繪制，采用輕量級(jí)GeoJSON 格式進(jìn)行地理數(shù)據(jù)發(fā)布。GeoJSON 類(lèi)型是一種對(duì)點(diǎn)、線(xiàn)、面等幾何地理數(shù)據(jù)要素進(jìn)行編碼和數(shù)據(jù)交換的輕量級(jí)JSON 數(shù)據(jù)格式［18］。本文定義了點(diǎn)Point、線(xiàn)Line、面Polygon這3個(gè)GeoJSON 格式的地理要素類(lèi)型對(duì)地名標(biāo)注、地圖輪廓、道路進(jìn)行描述。瀏覽器端通過(guò)WebSocket動(dòng)態(tài)請(qǐng)求獲取GeoJSON 格式的矢量數(shù)據(jù)，利用原生JavaScript對(duì)數(shù)據(jù)進(jìn)行解析，并將數(shù)據(jù)坐標(biāo)變換為Canvas坐標(biāo)。地圖輪廓和道路使用創(chuàng)建路徑的方法實(shí)現(xiàn)，首先調(diào)用beginPath開(kāi)始一個(gè)路徑，然后通過(guò)moveTo（）和lineTo（）命令控制路徑的繪制，最后使用stroke（）函數(shù)并調(diào)用closePath（）完成路徑的繪制，使用fillText（“text”，x，y）將相應(yīng)的地名標(biāo)注繪制在Canvas上。

2.3.2 基于粒子追蹤技術(shù)的時(shí)空軌跡動(dòng)態(tài)可視化

為了動(dòng)態(tài)模擬時(shí)空軌跡數(shù)據(jù)的連續(xù)變化過(guò)程，需要對(duì)時(shí)空軌跡產(chǎn)生、發(fā)展和滅亡的過(guò)程進(jìn)行抽象和表達(dá)，粒子系統(tǒng)采用大量的、具有一定位置、生命周期和屬性的粒子來(lái)模擬事物的演變過(guò)程。本文將產(chǎn)生軌跡的實(shí)體抽象為粒子系統(tǒng)中的粒子，粒子按照時(shí)空路徑移動(dòng)產(chǎn)生時(shí)空軌跡，每個(gè)粒子代表一個(gè)產(chǎn)生軌跡的實(shí)體，具有位置、速度、加速度等信息，將時(shí)空軌跡隨時(shí)間的變化過(guò)程抽象為粒子的“產(chǎn)生”、“活動(dòng)”和 “消亡”3個(gè)階段。時(shí)空軌跡數(shù)據(jù)的動(dòng)態(tài)可視化是按照特定時(shí)間間隔interval進(jìn)行動(dòng)態(tài)繪制渲染的，為了更好的適應(yīng)軌跡可視化的特點(diǎn)，對(duì)粒子系統(tǒng)進(jìn)行改進(jìn)，將位置position定義為位置序列，表示時(shí)間內(nèi)實(shí)體的軌跡序列，軌跡序列由一系列控制點(diǎn)組成。

利用粒子系統(tǒng)實(shí)現(xiàn)多時(shí)空軌跡的追蹤與繪制的流程如圖5所示，主要分為以下幾個(gè)步驟：

（1）Emit發(fā)射粒子：判斷軌跡序列是否在當(dāng)前時(shí)間戳內(nèi)，發(fā)射特定時(shí)間戳內(nèi)含有軌跡序列的實(shí)體，對(duì)粒子的位置序列、速度、年齡、壽命、顏色、大小等屬性進(jìn)行初始化，使用JavaScript粒子數(shù)ParticlesArray［］來(lái)存儲(chǔ)初始化的粒子；

（2）Simulate模擬粒子：利用前文提到的基于Cat－mull的時(shí)空軌跡插值算法，根據(jù)當(dāng)前時(shí)刻前后位置序列 （即控制點(diǎn)序列）對(duì)軌跡進(jìn)行插值計(jì)算獲取當(dāng)前時(shí)段interval內(nèi)由粒子序列組成的軌跡曲線(xiàn)，每一次模擬粒子的年齡就會(huì)增加，對(duì)于年齡超過(guò)粒子壽命的粒子則需要調(diào)用粒子系統(tǒng)的Kill方法從粒子數(shù)組中移除；

（3）Render 繪 制 渲 染：利 用JavaScript 在HTML5 Canvas中繪制有生命的粒子，通過(guò)上一步的模擬插值方法計(jì)算當(dāng)前時(shí)段interval內(nèi)的軌跡曲線(xiàn)，按照繪制路徑的方法進(jìn)行繪制。動(dòng)態(tài)設(shè)置軌跡的透明度，最新繪制的軌跡無(wú)透明度，隨著時(shí)間的推移后繪制的軌跡透明度逐漸降低，最早繪制的軌跡會(huì)慢慢消失，產(chǎn)生軌跡慢慢移動(dòng)的效果，多個(gè)粒子的軌跡同時(shí)繪制就會(huì)產(chǎn)生多軌跡動(dòng)態(tài)流動(dòng)的效果，可以直觀展現(xiàn)大量時(shí)空軌跡的演變規(guī)律。

2.3.3 分層繪制解決方案的設(shè)計(jì)與實(shí)現(xiàn)

為了提高繪制效率、減少渲染量，使用HTML5Canvas分層緩存與繪制技術(shù)對(duì)不發(fā)生變化的地理基礎(chǔ)地圖實(shí)現(xiàn)預(yù)繪制。在選擇分層的場(chǎng)景時(shí)，需要考慮場(chǎng)景是如何組成的。時(shí)空軌跡的動(dòng)態(tài)可視化由地理基礎(chǔ)地圖和時(shí)空軌跡組成，地理基礎(chǔ)底層又可分為：地圖輪廓、道路、地名標(biāo)注等。使用Canvas分層繪制時(shí)，在DOM 中創(chuàng)建不同Canvas畫(huà)布使各畫(huà)布共存于視區(qū)的同一位置，按照畫(huà)布應(yīng)該顯示的順序來(lái)樣式化z－index樣式，從而管理圖層順序。圖6為時(shí)空軌跡數(shù)據(jù)動(dòng)態(tài)可視化的一個(gè)分層解決方案，方案將需要實(shí)時(shí)繪制渲染的時(shí)空軌跡圖與保留不變的地理基礎(chǔ)圖層分離，從而提高繪制渲染效率實(shí)現(xiàn)不同圖層間的交互顯示。

圖5 基于粒子追蹤的動(dòng)態(tài)軌跡繪制流程

圖6 分層繪制方案

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

本文所采用的 實(shí)驗(yàn)平臺(tái)為Intel Core i5－3570k3.4GHz CPU、4G 內(nèi)存和NVIDIA GeForce GTX 650 1024M 顯卡，操作系統(tǒng)為Windows7，服務(wù)器為IIS7.0，客戶(hù)端與服務(wù)器處于同一個(gè)局域網(wǎng)環(huán)境中。在實(shí)驗(yàn)平臺(tái)上使用VS2010開(kāi)發(fā)環(huán)境基于.NET 和HTML5開(kāi)發(fā)完成了青島市公交軌跡動(dòng)態(tài)可視化系統(tǒng)，利用青島市30天的公交軌跡數(shù)據(jù)對(duì)提出的可視化技術(shù)方法進(jìn)行了驗(yàn)證。公交軌跡數(shù)據(jù)為青島市199條公交車(chē)線(xiàn)路的31 295 183條軌跡點(diǎn)數(shù)據(jù)，軌跡點(diǎn)包括位置、站點(diǎn)名稱(chēng)、線(xiàn)路名稱(chēng)、時(shí)間、上下行、車(chē)牌號(hào)等信息，通過(guò)對(duì)公交軌跡數(shù)據(jù)采用預(yù)處理算法去除異常、重復(fù)數(shù)據(jù)，最后得到16 644 709條軌跡點(diǎn)數(shù)據(jù)，每天從早晨4：00到晚上11：30大約50萬(wàn)條軌跡點(diǎn)數(shù)據(jù)。以公交軌跡數(shù)據(jù)為支撐開(kāi)發(fā)完成了青島市公交動(dòng)態(tài)可視化系統(tǒng)，實(shí)現(xiàn)了日期選擇、時(shí)間軸拖動(dòng)、興趣區(qū)選擇、軌跡流向控制等可視化交互，同時(shí)具有放大、縮小、漫游等地圖交互。分別在IE10，Chrome36，F(xiàn)irefox和Opera這4個(gè)瀏覽器下進(jìn)行了測(cè)試，結(jié)果表明青島市公交動(dòng)態(tài)可視化系統(tǒng)可以在瀏覽器端流暢地運(yùn)行。公交軌跡在瀏覽器上實(shí)際表現(xiàn)為一個(gè)隨時(shí)間連續(xù)動(dòng)態(tài)變化的過(guò)程，圖7選取了2014年5月某日青島市公交實(shí)際動(dòng)態(tài)可視化過(guò)程中幾個(gè)時(shí)刻的截圖，利用不同的顏色繪制不同速度的公交，其中黑色軌跡線(xiàn)代表交通擁堵、灰色代表非擁堵。

從圖7動(dòng)態(tài)可視化結(jié)果中可以直觀的看到青島市一天內(nèi)不同時(shí)刻公交時(shí)空分布的動(dòng)態(tài)變化情況，結(jié)合下方的柱狀統(tǒng)計(jì)圖表可視化可以清晰的看出堵車(chē)公交數(shù)量的變化趨勢(shì)。圖7 （a）～圖7 （d）中反應(yīng)了公交數(shù)量和時(shí)空分布的變化，早晨5：30公交數(shù)量相對(duì)較少而且基本沒(méi)有堵路段，到8：00的時(shí)候公交數(shù)量大幅度增加且有幾個(gè)路段堵車(chē)比較嚴(yán)重，中午12：00的時(shí)候公交數(shù)量沒(méi)有發(fā)生明顯變化，但是擁堵路段空間分布明顯減少，到了晚上10：30公交分布又開(kāi)始減少。通過(guò)連續(xù)的動(dòng)態(tài)可視化，可以觀察到整個(gè)城市公交的流動(dòng)性規(guī)律。系統(tǒng)可以動(dòng)態(tài)反映青島市公交的時(shí)空分布規(guī)律及交通擁堵?tīng)顩r，經(jīng)實(shí)際交通狀況比較，可視化結(jié)果基本正確。公交動(dòng)態(tài)可視化系統(tǒng)對(duì)于城市交通狀況的探索性分析具有一定的應(yīng)用價(jià)值，可以為有關(guān)交通部門(mén)提供決策支持，對(duì)城市交通出行和規(guī)劃具有重要的指導(dǎo)意義。

4 結(jié)束語(yǔ)

針對(duì)傳統(tǒng)可視化方法存在的問(wèn)題，在B／S架構(gòu)下利用HTML5Canvas和粒子系統(tǒng)在瀏覽器端完成了時(shí)空軌跡數(shù)據(jù)的免插件動(dòng)態(tài)可視化，通過(guò)對(duì)WebSocket和Canvas緩存繪制技術(shù)的研究分別實(shí)現(xiàn)了基于WebSocket的實(shí)時(shí)數(shù)據(jù)加載和基于Canvas的矢量數(shù)據(jù)分層繪制，最后在此基礎(chǔ)上構(gòu)建了集時(shí)空軌跡數(shù)據(jù)和地理基礎(chǔ)矢量圖層為一體的青島市公交軌跡動(dòng)態(tài)可視化系統(tǒng)。實(shí)驗(yàn)結(jié)果表明，提出的可視化方法可以很好的通過(guò)網(wǎng)絡(luò)平臺(tái)在瀏覽器端模擬時(shí)空軌跡數(shù)據(jù)連續(xù)變化過(guò)程，并可在多種瀏覽器上取得良好的可視化效果和用戶(hù)體驗(yàn)，提出的方法在跨平臺(tái)、免插件、后期維護(hù)更新方面較傳統(tǒng)客戶(hù)端和瀏覽器插件等方式具有明顯優(yōu)勢(shì)。用戶(hù)客戶(hù)端不安裝任何第三方插件就可以在瀏覽器端實(shí)現(xiàn)時(shí)空軌跡數(shù)據(jù)的動(dòng)態(tài)可視化繪制，具有簡(jiǎn)單易行、快速靈活的優(yōu)點(diǎn)。結(jié)合系統(tǒng)開(kāi)發(fā)的可視化交互功能，可以直觀地反應(yīng)時(shí)空軌跡的時(shí)空演變規(guī)律。提出的可視化方法具有通用性，可以通過(guò)網(wǎng)絡(luò)平臺(tái)廣泛地應(yīng)用到各種軌跡數(shù)據(jù)的實(shí)時(shí)監(jiān)控和歷史分析，實(shí)現(xiàn)Internet環(huán)境下時(shí)空軌跡數(shù)據(jù)的實(shí)時(shí)發(fā)布與共享。

圖7 公交動(dòng)態(tài)可視化

［1］GONG Xi，PEI Tao，SUN Jia，et al.Review of the research progresses in trajectory clustering methods ［J］.Progress in Geography，2011，30 （5）：522－534 （in Chinese）. ［龔璽，裴韜，孫嘉，等.時(shí)空軌跡聚類(lèi)方法研究進(jìn)展 ［J］.地理科學(xué)進(jìn)展，2011，30 （5）：522－534.］

［2］Zheng Y，Wang L，Zhang R，et al.GeoLife：Managing and understanding your past life over maps［C］／／9th International Conference on Mobile Data Management.IEEE，2008：211－212.

［3］Agamennoni G，Nieto J I，Nebot E M.Robust inference of principal road paths for intelligent transportation systems ［J］.IEEE Transactions on Intelligent Transportation Systems，2011，12 （1）：298－308.

［4］Qi F，Du F.Tracking and visualization of space－time activities for a micro－scale flu transmission study ［J］.International Journal of Health Geographics，2013，12 （1）：6.

［5］PU Jiansu，QU Huamin，NI Mingxuan.Survey on visualiza－tion of trajectory data ［J］.Journal of Computer－Aided Design＆Computer Graphics，2012，24 （10）：1273－1282 （in Chinese）. ［蒲劍蘇，屈華民，倪明選.移動(dòng)軌跡數(shù)據(jù)的可視化［J］.計(jì) 算 機(jī) 輔 助 設(shè) 計(jì) 與 圖 形 學(xué) 學(xué) 報(bào)，2012，24 （10）：1273－1282.］

［6］Guo D，Wu K，Zhang Z，et al.Wms－based flow mapping services ［C］／／IEEE Eighth World Congress on Services，2012：234－241.

［7］WANG Yi，ZHOU Xun，ZHOU Wei，et al.A study of dynamic visualization of discrete spatial－temporal data on WebGIS platform ［J］.Remote Sensing for Land ＆ Resource，2012，24 （2）：143－147 （in Chinese）. ［王軼，周迅，周偉，等.基于WebGIS的離散時(shí)序空間數(shù)據(jù)動(dòng)態(tài)可視化研究 ［J］.國(guó)土資源感，2012，24 （2）：143－147.］

［8］WANG Jiayao.Development of geographic information system and developing geographic information system ［J］.Engineering Sciences，2009，11 （2）：10－16 （in Chinese）.［王家耀.地理信息系統(tǒng)的發(fā)展與發(fā)展中的地理信息系統(tǒng) ［J］.中國(guó)工程科學(xué)，2009，11 （2）：10－16.］

［9］Box S，Chen X，Blainey S，et al.Fine－grained traffic state estimation and visualisation ［C］／／Proceedings of the ICE－Civil Engineering，2014，167 （5）：9－16.

［10］McArdle G，Demar U，Van Der Spek S，et al.Classifying pedestrian movement behaviour from GPS trajectories using visualization and clustering ［J］.Annals of GIS，2014，20（2）：85－98.

［11］Van Ho Q，Lundblad P，strm T，et al.A web－enabled visualization toolkit for geovisual analytics ［J］.Information Visualization，2012，11 （1）：22－42.

［12］Wang H，Zou H，Yue Y，et al.Visualizing hot spot analysis result based on mashup ［C］／／Proceedings of the International Workshop on Location Based Social Networks.ACM，2009：45－48.

［13］Corcoran P，Mooney P，Winstanley A，et al.Effective vector data mission and visualization using HTML5 ［C］／／Proceedings of the 19th GIS Research UK Annual Conference.University of Portsmouth with Ordnance Survey，2011：179－183.

［14］Melamed T，Clayton B.A comparative evaluation of HTML5 as a pervasive media platform ［M］.Mobile Computing，Applications，and Services.Springer Berlin Heidelberg，2010：307－325.

［15］Boulos M N K，Warren J，Gong J，et al.Web GIS in practice VIII：HTML5and the canvas element for interactive online mapping ［J］.International Journal of Health Geographics，2010，9 （1）：14.

［16］CHEN Hongqian，LI Fengxia，ZHANG Qingyi，et al.Progressive rendering method for smooth trajectorie［J］.Journal of System Simulation，2012，24 （2）：357－360 （in Chinese）.［陳紅倩，李鳳霞，張慶義，等.一種漸進(jìn)式平滑軌跡線(xiàn)標(biāo)繪方法 ［J］.系統(tǒng)仿真學(xué)報(bào)，2012，24 （2）：357－360.］

［17］LIANG Chunyu，LI Xintong.The design of the lightweight WebGIS based on GeoJSON by using HTML5canvas ［J］.Computer Science and Application，2012，2：189－196 （in Chinese）.［梁春雨，李新通.使用HTML5Canvas構(gòu)建基于GeoJSON 的輕量級(jí)WebGIS ［J］.計(jì)算機(jī)科學(xué)與應(yīng)用，2012，2：189－196.］

［18］WU Lei，ZHANG Fuqing.A study on WebGIS client based on HTML canvas［J］.Geomatics World，2009，7 （3）：78－82 （in Chinese）. ［吳磊，張福慶.基于HTML canvas的WebGIS 客戶(hù)端技術(shù)研究 ［J］.地理信息世界，2009，7（3）：78－82.］