基于HTML5的移動終端地理信息應用設計

陳新澤, 楊 斌, 仲維亮

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

0 引言

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

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

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

1 地理信息應用的HTML5關鍵技術研究

1.1 HTML5 Geolocation

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

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

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

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

1.2 HTML5 Web Storage

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

1.3 HTML5 WebSocket

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

1.4 HTML5 Canvas

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

2 應用整體設計

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

2.1 整體架構

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

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

圖1 整體架構圖

2.2 客戶端設計

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

圖2 客戶端模塊圖

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

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

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

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

數(shù)據發(fā)送及接收模塊:采用了Socket.io庫作為HTML5 WebSocket協(xié)議的實現(xiàn),因為它支持客戶端和服務器。在該模塊中,數(shù)據的發(fā)送及接收都是基于事件的,可以通過注冊相應的事件處理函數(shù)用于數(shù)據接收,而當發(fā)送數(shù)據時,可以觸發(fā)相應的事件。

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

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

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

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

圖3 A、B兩點方位計算

3 應用部署及測試結果

3.1 應用部署

目前越來越多移動終端應用采用了云服務,為了增強服務器處理能力,將服務器部署到Cloud Foundry[11]云平臺,使得服務器具備云端處理的能力,以更好地支持客戶端的并行訪問。

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

圖4 在線好友顯示界面

3.2 測試結果

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

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

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

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

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

4 結束語

主要研究了移動終端地理信息應用所涉及的HTML5關鍵技術,根據地理信息應用的特點,設計并實現(xiàn)了基于HTML5關鍵技術的移動終端地理信息應用,并進行了相關測試,測試結果表明采用HTML5技術實現(xiàn)的地理信息應用可以滿足實際需求。在下一步的研究中將研究HTML5與WebGL結合的三維顯示技術,增強地理信息應用的顯示效果。

[1] WHATWG工作組.HTML5標準[S/OL].http://whatwg.org/html,2011-1-17.

[2] 李慧云,何震葦,李麗,等.HTML5技術與應用模式研究[J].電信科學,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高級程序設計[M].北京:人民郵電出版社,2011:113-120.

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

[7] 劉華星,楊庚.HTML5——下一代Web開發(fā)標準研究[J].計算機技術與發(fā)展,2011,(8):54-62.

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

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

[10] Vmware.Redis開源項目[S/OL].http://redis.io/,2012-7.

[11] Vmware.Cloud Foundry開源項目[S/OL].http://www.cloudfoundry.com/,2012-7.