陳新澤, 楊 斌, 仲維亮

(西南交通大學(xué)信息科學(xué)與技術(shù)學(xué)院,四川成都610031)

0 引言

隨著移動(dòng)智能終端的大量普及,基于地理信息共享的移動(dòng)終端應(yīng)用也越來(lái)越多,實(shí)現(xiàn)的功能大致有:顯示對(duì)象之間的相對(duì)距離,如微信;通過(guò)地圖精確標(biāo)注目標(biāo)位置,如陌陌,等等。由于主流移動(dòng)終端采用的操作系統(tǒng)不盡相同,例如有蘋(píng)果公司的iOS,谷歌公司的Android,微軟公司的Windows Phone等,這些系統(tǒng)提供的開(kāi)發(fā)接口也不相同,開(kāi)發(fā)出來(lái)的應(yīng)用程序無(wú)法實(shí)現(xiàn)各個(gè)平臺(tái)間的兼容,為了使得地理信息應(yīng)用可以運(yùn)行在各個(gè)終端系統(tǒng),開(kāi)發(fā)者需要進(jìn)行大量重復(fù)性工作,影響了開(kāi)發(fā)效率。

HTML5[1]作為下一代互聯(lián)網(wǎng)技術(shù)標(biāo)準(zhǔn),雖然其正式版本需要到2022年左右才正式發(fā)布,但目前的草案規(guī)范涉及的許多新特性和新功能,已經(jīng)為大多數(shù)瀏覽器廠商所接受和支持,如Chrome、Safari等,而且目前主流移動(dòng)終端操作系統(tǒng)對(duì)HTML5的支持程度也在逐步提高,例如iOS、Android 4.0等[2]。HTML5提供的最新特性可以很容易地實(shí)現(xiàn)網(wǎng)絡(luò)通信、圖形渲染和地理信息等應(yīng)用,而且采用HTML5標(biāo)準(zhǔn)實(shí)現(xiàn)的應(yīng)用可以跨平臺(tái)使用,實(shí)現(xiàn)平臺(tái)間的最大程度兼容,提高開(kāi)發(fā)效率。

因此,將分析研究目前主流移動(dòng)終端操作系統(tǒng)所支持的HTML5關(guān)鍵技術(shù),并利用這些技術(shù)進(jìn)行針對(duì)移動(dòng)終端的地理信息應(yīng)用的設(shè)計(jì)及實(shí)現(xiàn)工作,最后進(jìn)行測(cè)試并得到相關(guān)結(jié)果。將在第一部分研究針對(duì)地理信息應(yīng)用的一些HTML5關(guān)鍵技術(shù),而第二部分主要介紹利用HTML5關(guān)鍵技術(shù)設(shè)計(jì)及實(shí)現(xiàn)的地理信息應(yīng)用,第三部分將對(duì)應(yīng)用進(jìn)行測(cè)試分析。

1 地理信息應(yīng)用的HTML5關(guān)鍵技術(shù)研究

1.1 HTML5 Geolocation

設(shè)備地理信息的獲取是地理信息應(yīng)用最基本的能力,由于HTML5提供了Geolocation[3]技術(shù),利用它可獲取設(shè)備定位信息。通常設(shè)備可使用的定位技術(shù)主要有:IP地址、GPS、WiFi及手機(jī)基站等,各種技術(shù)的定位精度也各不相同。HTML5 Geolocation不指定設(shè)備使用哪種底層技術(shù)定位,因此只要設(shè)備支持這幾種定位技術(shù)之一,就都可以使用HTML5 Geolocation,然而它并不保證獲取到的數(shù)據(jù)都是精確的,使用時(shí)可以根據(jù)返回的精度值進(jìn)行過(guò)濾,從而獲取精度合適的地理數(shù)據(jù)。HTML5 Geolocation規(guī)范提供了一套保護(hù)用戶隱私的機(jī)制,除非瀏覽器得到用戶的明確許可,否則瀏覽器不可獲取用戶的當(dāng)前地理位置數(shù)據(jù)。HTML5 Geolocation提供的接口使用非常容易,目前提供了兩種定位請(qǐng)求接口:

(1)單次定位請(qǐng)求,可使用getCurrentPosition()接口函數(shù),使用該函數(shù)只會(huì)進(jìn)行一次定位處理;

(2)重復(fù)位置更新請(qǐng)求,可使用watchPosition()函數(shù),使用該函數(shù)后,只要用戶位置發(fā)生變化,就會(huì)返回當(dāng)前地理數(shù)據(jù)。

這兩個(gè)函數(shù)獲取到的數(shù)據(jù)結(jié)構(gòu)都包括了經(jīng)度、緯度、海拔、精度、時(shí)戳等成員。在具體地理信息應(yīng)用開(kāi)發(fā)中,可以靈活使用這兩種方法,獲取所需要的數(shù)據(jù)內(nèi)容。

1.2 HTML5 Web Storage

地理信息應(yīng)用通常需要在應(yīng)用端大量存儲(chǔ)地理信息數(shù)據(jù),這時(shí)可使用HTML5 Web Storage技術(shù)。Web Storage是HTML5最新提供的用于瀏覽器端的數(shù)據(jù)存儲(chǔ),它是以鍵/值對(duì)形式表示[4]。Web Storage與傳統(tǒng)的cookie存儲(chǔ)形式相比,最主要優(yōu)勢(shì)在于存儲(chǔ)空間更大,cookie方式最大存儲(chǔ)容量只為4KB,而Web Storage存儲(chǔ)空間可達(dá)到5MB,而且提供了更多易用的接口,使得數(shù)據(jù)操作更為簡(jiǎn)便。Web Storage共有Local Storage和Session Storage兩種實(shí)現(xiàn)方式。Local Storage可永久保存數(shù)據(jù),而Session Storage只在當(dāng)前的會(huì)話中可用,一旦用戶關(guān)閉窗口后,數(shù)據(jù)將被清除[5]。因此,在構(gòu)建地理信息應(yīng)用時(shí),可將需要永久保存的地理信息數(shù)據(jù)采用Local Storage進(jìn)行保存,而一般數(shù)據(jù)則采用Session Storage保存。

1.3 HTML5 WebSocket

構(gòu)建地理信息應(yīng)用不可避免地要與其它設(shè)備或服務(wù)器進(jìn)行數(shù)據(jù)的共享與交互,除了設(shè)備需要具備網(wǎng)絡(luò)接入的能力外,還需要采用合適的網(wǎng)絡(luò)傳輸協(xié)議,HTML5提供的WebSocket技術(shù)可發(fā)揮重要作用[6]。WebSocket是HTML5中最強(qiáng)大的通信功能,它基于同一底層TCP/IP連接,提供了一個(gè)全雙工通信信道。傳統(tǒng)上的HTTP通信主要有Comet和Ajax的Polling、XHR long-Polling以及streaming,這些方式不僅報(bào)頭數(shù)據(jù)量大,還容易造成傳輸延遲。相反,WebSocket大幅削減不必要的網(wǎng)絡(luò)流量和時(shí)延,它的每個(gè)消息都是一個(gè)WebSocket幀,只有2B的開(kāi)銷(xiāo),而非XHR-Polling的871B[7]。移動(dòng)終端的網(wǎng)絡(luò)流量通常比較有限,而且網(wǎng)絡(luò)環(huán)境也相對(duì)不太穩(wěn)定,這時(shí)采用WebSocket可以有效節(jié)約用戶網(wǎng)絡(luò)流量,并且能盡量縮小時(shí)延以達(dá)到盡量實(shí)時(shí)的目的。

1.4 HTML5 Canvas

對(duì)于地理信息應(yīng)用來(lái)說(shuō),需要探索如何提供良好的地理信息共享形式,使得用戶感知效果更佳。HTML5 Canvas在這方面可發(fā)揮重要作用。Canvas提供了使用JavaScript在網(wǎng)頁(yè)上繪制二維圖像的能力,畫(huà)布是一個(gè)矩形區(qū)域,可以控制其每一像素,Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法,利用它可以繪制出需要的圖像[8]。然而,HTML5 Canvas也存在缺點(diǎn):一是開(kāi)發(fā)困難,它缺少封裝好的圖形類(lèi)和強(qiáng)大的設(shè)計(jì)工具;二是動(dòng)畫(huà)實(shí)現(xiàn)比較繁瑣,三是缺少完整事件體系。因此,可以使用第三方的基于Canvas的JavaScript庫(kù),例如EASELJS等簡(jiǎn)化實(shí)現(xiàn)。

2 應(yīng)用整體設(shè)計(jì)

HTML5的一些關(guān)鍵技術(shù)可以用來(lái)實(shí)現(xiàn)針對(duì)移動(dòng)終端的地理信息應(yīng)用,為了研究通過(guò)這些技術(shù)實(shí)現(xiàn)的地理信息應(yīng)用的性能及效果,設(shè)計(jì)了針對(duì)移動(dòng)終端的地理信息共享應(yīng)用,與以往簡(jiǎn)單的提示好友之間的相對(duì)距離和地圖標(biāo)注等特點(diǎn)不同的是,它的主要特點(diǎn)是可以根據(jù)設(shè)備地理信息及設(shè)備朝向,用戶可從顯示界面上直觀地查看好友們的相對(duì)方位、相對(duì)距離和相對(duì)海拔等信息,并且這些信息是動(dòng)態(tài)更新的,這也是針對(duì)地理信息應(yīng)用場(chǎng)景的探索方向。

2.1 整體架構(gòu)

為了實(shí)現(xiàn)上述目的采用了C/S模式,客戶端采用HTML5關(guān)鍵技術(shù)構(gòu)建,而服務(wù)器采用Node.js[9]框架實(shí)現(xiàn),并采用MySQL和Redis[10]作為后臺(tái)數(shù)據(jù)庫(kù),網(wǎng)絡(luò)通信協(xié)議則采用HTML5 WebSocket。整體架構(gòu)如圖1所示。

圖1中,客戶端之間不直接進(jìn)行通信,都通過(guò)服務(wù)器進(jìn)行轉(zhuǎn)發(fā),而且當(dāng)客戶端獲取到最新的地理信息后,只向服務(wù)器發(fā)送數(shù)據(jù),而后服務(wù)器根據(jù)該用戶當(dāng)前在線好友列表向所有好友“推送”該用戶的地理數(shù)據(jù)。這主要有兩大好處:一是簡(jiǎn)化了客戶端的實(shí)現(xiàn),二是能有效節(jié)約該客戶端的上行流量消耗。

圖1 整體架構(gòu)圖

2.2 客戶端設(shè)計(jì)

客戶端由控制模塊、存儲(chǔ)模塊、地理信息獲取模塊、數(shù)據(jù)發(fā)送及接收模塊等模塊組成,如圖2所示。

圖2 客戶端模塊圖

控制模塊:是客戶端中最重要模塊,用于與其他模塊交互?？刂颇K接收的輸入主要有地理信息獲取模塊、設(shè)備方位信息獲取模塊、數(shù)據(jù)接收模塊。一旦接收到輸入,則會(huì)通知計(jì)算模塊進(jìn)行相對(duì)位置的計(jì)算,并將計(jì)算結(jié)果通過(guò)顯示模塊進(jìn)行顯示更新,如果需要將數(shù)據(jù)發(fā)送到服務(wù)器,則通知數(shù)據(jù)發(fā)送模塊進(jìn)行數(shù)據(jù)發(fā)送。

存儲(chǔ)模塊:采用了HTML5 Web Storage技術(shù),用于保存和獲取用戶及好友的地理信息數(shù)據(jù)。

地理信息獲取模塊:采用HTML5 Geolocation技術(shù),用于獲取設(shè)備當(dāng)前最新的定位數(shù)據(jù)。

設(shè)備方位信息獲取模塊:采用的是HTML5的deviceorientation事件進(jìn)行設(shè)備方位數(shù)據(jù)獲取,如果要在顯示界面上正確顯示好友的相對(duì)方位,需要考慮到設(shè)備目前的朝向,由于HTML5支持方向傳感器,如指南針等,而且使用時(shí)只需要簡(jiǎn)單地注冊(cè)deviceorientation的事件處理函數(shù),因此對(duì)于該應(yīng)用來(lái)說(shuō),HTML5提供了非常實(shí)用的接口。

數(shù)據(jù)發(fā)送及接收模塊:采用了Socket.io庫(kù)作為HTML5 WebSocket協(xié)議的實(shí)現(xiàn),因?yàn)樗С挚蛻舳撕头?wù)器。在該模塊中,數(shù)據(jù)的發(fā)送及接收都是基于事件的,可以通過(guò)注冊(cè)相應(yīng)的事件處理函數(shù)用于數(shù)據(jù)接收,而當(dāng)發(fā)送數(shù)據(jù)時(shí),可以觸發(fā)相應(yīng)的事件。

計(jì)算模塊:主要根據(jù)用戶設(shè)備及好友設(shè)備的地理數(shù)據(jù),并且結(jié)合目前設(shè)備的朝向進(jìn)行計(jì)算,用戶與好友之間的相對(duì)距離計(jì)算可根據(jù)Haversine公式計(jì)算

公式中兩點(diǎn)的經(jīng)緯度分別為(φ1,ψ1),(φ2,ψ2)。d表示兩點(diǎn)間的相對(duì)距離,r表示地球球面半徑。而方位的計(jì)算,可通過(guò)分別計(jì)算兩點(diǎn)在經(jīng)線和緯線的相對(duì)距離后,再根據(jù)反正切公式算出。如圖3所示,假設(shè)有 A、B兩點(diǎn),P為兩點(diǎn)在經(jīng)緯度上的交叉點(diǎn),要求出 A、B之間的方位,可先根據(jù)Haversine公式分別求出 A、P之間和B、P之間的距離,即可求出角度 ?。此時(shí)求出的方位為假設(shè) A目前朝向正北方向,如果要將好友位置正確顯示在設(shè)備界面上,需要結(jié)合 A設(shè)備此時(shí)的朝向進(jìn)行轉(zhuǎn)換。

顯示模塊:一旦計(jì)算出好友的相對(duì)距離、相對(duì)方位及相對(duì)海拔后,顯示模塊會(huì)將這些數(shù)據(jù)轉(zhuǎn)換為坐標(biāo)數(shù)據(jù),并將好友相關(guān)信息,如好友頭像顯示在相應(yīng)坐標(biāo)位置。為了簡(jiǎn)化HTML5 Canvas的使用,采用了稱為 EASELJS的JavaScript庫(kù),它提供了一個(gè)完整的,分層的顯示列表和核心交互模型。實(shí)現(xiàn)時(shí)首先需要?jiǎng)?chuàng)建Canvas標(biāo)簽,并指定畫(huà)布的大小,然后利用EASELJS提供的Stage類(lèi)創(chuàng)建屬于該畫(huà)布的對(duì)象,所有需要顯示的對(duì)象都應(yīng)該加入該Stage對(duì)象。為了支持多好友可以同時(shí)顯示,利用Image類(lèi)和Bitmap類(lèi),創(chuàng)建了屬于每個(gè)在線好友的顯示對(duì)象,顯示內(nèi)容為該好友頭像,最后利用EASELJS提供的鼠標(biāo)事件類(lèi)MouseEvent定義了onMouseOver事件的處理函數(shù),用于當(dāng)鼠標(biāo)或觸摸屏懸浮于某個(gè)好友頭像的上方時(shí),可以顯示出該好友的具體信息,包括相對(duì)距離,經(jīng)緯度,精度等。當(dāng)需要更新好友顯示信息時(shí),只需要針對(duì)該好友的Bitmap對(duì)象進(jìn)行操作。

使用Canvas和EASELJS實(shí)現(xiàn)的地理信息顯示界面如圖4所示。顯示界面可以較為直觀地反映出好友的相對(duì)位置。

圖3 A、B兩點(diǎn)方位計(jì)算

3 應(yīng)用部署及測(cè)試結(jié)果

3.1 應(yīng)用部署

目前越來(lái)越多移動(dòng)終端應(yīng)用采用了云服務(wù),為了增強(qiáng)服務(wù)器處理能力,將服務(wù)器部署到Cloud Foundry[11]云平臺(tái),使得服務(wù)器具備云端處理的能力,以更好地支持客戶端的并行訪問(wèn)。

客戶端硬件平臺(tái)采用基于ARM Cortex-A9雙核處理器的終端設(shè)備,設(shè)備配備有1GB的RAM 存儲(chǔ)器,并配備了GPS和方向傳感器等傳感器,提供WiFi模塊。軟件平臺(tái)采用的是Blackberry Tablet2.0操作系統(tǒng),全面支持HTML5新特性。

圖4 在線好友顯示界面

3.2 測(cè)試結(jié)果

測(cè)試主要針對(duì)兩方面進(jìn)行:使用環(huán)境和在線好友數(shù)目的影響。

使用環(huán)境的測(cè)試,采用陰/晴天和室內(nèi)/外環(huán)境分組對(duì)比測(cè)試,主要測(cè)試內(nèi)容為好友在用戶界面上位置顯示的精度及速度,每組測(cè)試的在線好友均為5個(gè),而且每組測(cè)試次數(shù)為10次。測(cè)試結(jié)果如表1所示,可以看出,晴天室外時(shí)測(cè)試結(jié)果最佳;而在室內(nèi)或陰天時(shí)效果較差,主要原因在于,用于獲取地理信息的GPS設(shè)備容易受到環(huán)境影響。

在線好友數(shù)目影響的測(cè)試,采用不同數(shù)目的在線好友分組對(duì)比測(cè)試,主要測(cè)試內(nèi)容為在晴天室外時(shí)不同數(shù)目的在線好友是否都可以顯示出來(lái),和全部顯示所需時(shí)間。測(cè)試結(jié)果如表2所示,總共進(jìn)行3組測(cè)試,每組測(cè)試次數(shù)為10次。每組在線好友數(shù)目分別為2,5和10。結(jié)果表明,即使在線好友數(shù)目為10個(gè),都可以顯示全部在線好友,而且所需時(shí)間相對(duì)比較接近。這說(shuō)明在網(wǎng)絡(luò)和GPS設(shè)備正常情況下,采用HTML5關(guān)鍵技術(shù)實(shí)現(xiàn)的地理信息應(yīng)用可以滿足實(shí)際應(yīng)用需求。

表1 “使用環(huán)境”測(cè)試結(jié)果

表2 “在線好友數(shù)目”測(cè)試結(jié)果

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

主要研究了移動(dòng)終端地理信息應(yīng)用所涉及的HTML5關(guān)鍵技術(shù),根據(jù)地理信息應(yīng)用的特點(diǎn),設(shè)計(jì)并實(shí)現(xiàn)了基于HTML5關(guān)鍵技術(shù)的移動(dòng)終端地理信息應(yīng)用,并進(jìn)行了相關(guān)測(cè)試,測(cè)試結(jié)果表明采用HTML5技術(shù)實(shí)現(xiàn)的地理信息應(yīng)用可以滿足實(shí)際需求。在下一步的研究中將研究HTML5與WebGL結(jié)合的三維顯示技術(shù),增強(qiáng)地理信息應(yīng)用的顯示效果。

[1] WHATWG工作組.HTML5標(biāo)準(zhǔn)[S/OL].http://whatwg.org/html,2011-1-17.

[2] 李慧云,何震葦,李麗,等.HTML5技術(shù)與應(yīng)用模式研究[J].電信科學(xué),2012(5):24-29.

[3] W3C.Geolocation API Specification[S/OL].http://dev.w3.org/geo/api/spec-source.html,2012-5.

[4] William West,S.Monisha Pulimood[J].Analysis of privacy and security in HTML5 web storage 2012,(3):80-87.

[5] Peter Lubbers,Brian Albers,Frank Salim.HTML5高級(jí)程序設(shè)計(jì)[M].北京:人民郵電出版社,2011:113-120.

[6] 李代立,陳榕.WebSocket在Web實(shí)時(shí)通信領(lǐng)域的研究[J].電腦知識(shí)與技術(shù),2010,(28):7923-7925.

[7] 劉華星,楊庚.HTML5——下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展,2011,(8):54-62.

[8] 吳磊,張福慶.基于HTML canvas的WebGIS客戶端技術(shù)研究[J].地理信息世界,2009,(3):78-82.

[9] Joyent,Inc.node.js規(guī)范[S/OL].http://nodejs.org/,2012-7.

[10] Vmware.Redis開(kāi)源項(xiàng)目[S/OL].http://redis.io/,2012-7.

[11] Vmware.Cloud Foundry開(kāi)源項(xiàng)目[S/OL].http://www.cloudfoundry.com/,2012-7.