周玲芳，李長云，胡淑新，王　華（湖南工業(yè)大學(xué)　計算機(jī)與通信學(xué)院，湖南　株洲　412007）

基于HTML5的WebGIS實時客戶端設(shè)計*

周玲芳，李長云，胡淑新，王華
（湖南工業(yè)大學(xué)計算機(jī)與通信學(xué)院，湖南株洲412007）

在WebGIS的瀏覽器端存在繪圖效率差、不能直接支持矢量繪圖等問題。為提高客戶端的交互性和實時性，在解決瀏覽器不支持矢量繪圖和渲染速度慢、存儲空間小、傳輸速率慢這些問題的基礎(chǔ)上，結(jié)合HTML5中的Canvas、WebSocket、WebStorage技術(shù)，構(gòu)建了WebGIS實時客戶端，有效地改善了客戶端存在的問題，改善用戶的體驗。

HTML5；Canvas；WebGIS實時客戶端

0　引言

WebGIS是GIS技術(shù)與Internet的結(jié)合體，是對網(wǎng)絡(luò)GIS的發(fā)展，它將GIS從一種使用計算機(jī)的處理地理信息的系統(tǒng)工具，變?yōu)橐环N網(wǎng)絡(luò)共享資源，提高了地理信息的使用效率，使地理信息的價值得以充分體現(xiàn)［1］。WebGIS的實現(xiàn)手段主要是基于Web技術(shù)的多級B/S體系結(jié)構(gòu)，即瀏覽器、GIS服務(wù)器、數(shù)據(jù)庫等。B/S模式的構(gòu)架簡化了客戶端系統(tǒng)的部署，降低了用戶使用難度，同時也極大提高了系統(tǒng)的可維護(hù)性［2］。但是這種被動的工作模式無法滿足用戶實時性的需求。對于WebGIS的架構(gòu)研究，以前主要是對服務(wù)器端技術(shù)的改進(jìn)，如使用CGI、Server API等服務(wù)端技術(shù)，但是這些技術(shù)對于服務(wù)器及網(wǎng)絡(luò)的要求較高。隨著客戶端技術(shù)的發(fā)展，Java Applet技術(shù)、Plug-in技術(shù)、Ajax技術(shù)的出現(xiàn)擴(kuò)展了客戶端的功能，但是用戶需要預(yù)先安裝這些插件，安裝插件帶來了一定的安全隱患和不方便性。對比這兩種形式，使用HTML5的新技術(shù)實現(xiàn)的功能并不需要插件支持，且其本地存儲功能和高效率的雙向通信功能，還有動態(tài)快速繪圖功能的提出，使實時客戶端的實現(xiàn)成為可能。

1　實時客戶端的WebGIS系統(tǒng)結(jié)構(gòu)

HTML5是W3C推出的新標(biāo)準(zhǔn)，其強(qiáng)大功能已經(jīng)被大部分的瀏覽器支持，同時，相對于以前的版本，HTML5的改變不僅僅是使用更方便。第一，它新增了更具有語義化的標(biāo)簽和使用更智能化的表單；第二，HTML5還新增了許多JavaScript API，如實時繪圖（Canvas和SVG）、離線存儲（WebStorage）、實時通信（WebSocket）API等，這些API為實現(xiàn)實時客戶端提供了可能。用HTML5來實現(xiàn)WebGIS有地圖無限縮放而圖不失真，地圖的顯示渲染效果逼真的優(yōu)勢；且支持JavaScript腳本實現(xiàn)地圖的漫游、縮放、查詢等功能，這些功能都無需插件支持并可在不同平臺與設(shè)備上運(yùn)行［3］。根據(jù)這些特性，本文在傳統(tǒng)架構(gòu)的基礎(chǔ)上，構(gòu)建了圖1所示的WebGIS實時客戶端。

圖1　WebGIS實時客戶端系統(tǒng)結(jié)構(gòu)

在客戶端這些模塊中使用HTML5和JavaScript技術(shù)，實現(xiàn)數(shù)據(jù)地圖的繪制、本地存儲、數(shù)據(jù)傳輸?shù)裙δ?，將部分簡單的功能交給客戶端完成，增加了WebGIS客戶端的交互能力，減少了服務(wù)器的傳輸壓力，也增加了數(shù)據(jù)傳輸?shù)男剩瑢崿F(xiàn)了客戶端的實時性。

2　WebGIS客戶端的具體設(shè)計

2.1數(shù)據(jù)實時更新與傳輸設(shè)計

空間數(shù)據(jù)格式有柵格數(shù)據(jù)和矢量數(shù)據(jù)。柵格數(shù)據(jù)交互性能差，可用來展示空間數(shù)據(jù)，矢量數(shù)據(jù)交互性較好，可用來表示空間對象，但是客戶端不能直接支持矢量數(shù)據(jù)的二進(jìn)制格式傳輸，所以數(shù)據(jù)在傳輸中就要進(jìn)行格式編碼，目前使用的比較多的數(shù)據(jù)傳輸格式是GeoJSON（基于JSON數(shù)據(jù)格式的地理要素表示格式）。JSON（JavaScript Object Notation）是輕量級數(shù)據(jù)交換格式，適合于服務(wù)器與瀏覽器（通過JavaScript）交互［4］，在瀏覽器端JSON能夠簡單快速地解析成可以被客戶端操作的JavaScript地理信息，不需要使用專門的文本解析API進(jìn)行操作?？臻g數(shù)據(jù)傳輸大多使用Ajax的異步傳輸方式，但Ajax輪詢方式的時延較長，傳輸?shù)膶崟r性不高，因此將Ajax用于地圖數(shù)據(jù)的推送。實時性方面還是需要HTML5的WebSocket API實現(xiàn)。WebSocket使瀏覽器具有客戶機(jī)/服務(wù)器（C/S）模式下應(yīng)用程序的實時通信能力［5］。WebSocket的優(yōu)勢有：（1）為瀏覽器和服務(wù)器之間建立的更高效的雙向通信提供支持。其連接本質(zhì)為TCP連接，因此瀏覽器通過JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請求，onopen事件接收消息，連接建立以后，客戶端和服務(wù)器端就可通過TCP連接直接交換數(shù)據(jù)。（2）WebSocket有更為輕量級的Header，除了首次建立鏈接時需要發(fā)送頭部與普通Web鏈接類似的數(shù)據(jù)之外，連接建立后，相互溝通的Header就會很簡潔，大大減少了冗余的數(shù)據(jù)傳輸［6］；通過新建WebSocket實例建立握手并完成與服務(wù)器的連接，建立好連接之后數(shù)據(jù)就可以以全雙工模式在客戶端與服務(wù)器之間進(jìn)行雙向傳輸，并一直保持連接，直到用戶主動關(guān)閉［3］。圖2是傳統(tǒng)傳輸方式與WebSocket傳輸方式數(shù)據(jù)量的對比，從結(jié)果可以看出，當(dāng)傳輸數(shù)據(jù)量增大時，WebSocket的效率更高。

圖2　HTTP協(xié)議和WebSocket協(xié)議數(shù)據(jù)傳輸量對比圖

需要在服務(wù)器端安裝開源的WebSocket支持?jǐn)?shù)據(jù)庫，如Node.js、LibWebSockets、PHP WebSocket Server等，以調(diào)用接口使用。具體傳輸過程是：GIS服務(wù)器從空間數(shù)據(jù)庫獲取數(shù)據(jù)，將空間數(shù)據(jù)解析成JSON的格式，然后發(fā)送到已經(jīng)與WebSocket服務(wù)器連接的客戶端，客戶端WebSocket實例的onmessage事件接收數(shù)據(jù)并使用JSON.parse函數(shù)將JSON字符串解析成JavaScript對象，再根據(jù)對象的內(nèi)容在WebGIS的地圖中解析顯示。WebSocket API一個顯著特點是，連接建立后，服務(wù)器可主動推送消息。支持WebSocket協(xié)議的服務(wù)端接受請求和處理WebSocket任務(wù)，在客戶端可用WebStorage存儲模塊緩存?zhèn)鬏斶^來的數(shù)據(jù)，WebSocket的中間傳輸機(jī)制就實現(xiàn)了數(shù)據(jù)實時更新。

2.2客戶端空間數(shù)據(jù)緩存設(shè)計

客戶端緩存功能主要是由WebStorage API來實現(xiàn)，WebStorage API是以Key-Value形式來進(jìn)行數(shù)據(jù)的持久性存儲。傳統(tǒng)客戶端一般是使用Cookie存儲數(shù)據(jù)，但是它效率低，存儲空間小，不能滿足大量矢量數(shù)據(jù)的存儲。WebStorage提供的兩種存儲方式可以改善這個狀況，一種是SessionStorage，它是一種會話級別的存儲方式，存儲的數(shù)據(jù)只在當(dāng)前頁面有效，當(dāng)頁面關(guān)閉時，數(shù)據(jù)也會隨之刪除，據(jù)此SessionStorage可以用在矢量圖繪制的緩存方面，即讓SessionStorage自動緩存解析好的JSON格式的矢量層數(shù)據(jù)，當(dāng)需要數(shù)據(jù)時直接從SessionStorage中提取JSON數(shù)據(jù)，這比從空間數(shù)據(jù)庫中獲取再解析效率明顯更高，數(shù)據(jù)顯示模塊可以直接從中獲取數(shù)據(jù)進(jìn)行繪制。另一種方式是LocalStorage，它是一個跨多窗口且數(shù)據(jù)永久存儲的方式，只有使用清除函數(shù)clear（）、removeItem（）或手動刪除數(shù)據(jù)時數(shù)據(jù)才會從瀏覽器中清除，同時它的數(shù)據(jù)可以在同源的窗口或標(biāo)簽共享使用。因此它可以用來永久存儲空間分析后的數(shù)據(jù)或服務(wù)器發(fā)送的數(shù)據(jù)和用戶數(shù)據(jù)，下次用戶打開瀏覽器可直接使用這些數(shù)據(jù)。圖3是具體矢量數(shù)據(jù)本地存儲過程。將數(shù)據(jù)緩存到本地，不用與服務(wù)器發(fā)生交互，客戶端存儲的數(shù)據(jù)可以由JavaScript訪問。

WebStorage存儲技術(shù)和WebSocket技術(shù)可結(jié)合使用并與JavaScript一起實現(xiàn)數(shù)據(jù)的實時更新，減輕服務(wù)器壓力。用戶發(fā)送數(shù)據(jù)請求后，WebSocket建立連接，將得到的數(shù)據(jù)解析后存儲在WebStorage預(yù)先定義好的空間中，等待用戶提取。對于常須更新地圖數(shù)據(jù)的操作采用這種預(yù)先存儲的方式，可以加快數(shù)據(jù)的渲染效率。為了提高圖3的實時更新效果，可以設(shè)定異步存儲機(jī)制，過程如下：（1）創(chuàng)建并初始化WebStorage對象，設(shè)置緩存區(qū)大?。ň彺鎱^(qū)分段）；（2）用戶發(fā)出消息，觸發(fā)onopen事件；（3）為WebSocket對象的信息添加偵聽器；（4）服務(wù)器調(diào)用received（）函數(shù)處理事件；（5）客戶端接收服務(wù)器發(fā)送的消息，觸發(fā)緩存判斷函數(shù)，判斷緩存大小，如果超出，設(shè)置緩存片段的編號，對象異步sends數(shù)據(jù)請求服務(wù)器處理；（6）服務(wù)器將片段編號入隊（服務(wù)端設(shè)置），直到傳輸完成，清除編號。這種傳輸方式將進(jìn)一步減少網(wǎng)絡(luò)流量，減少服務(wù)器的負(fù)載，提升傳輸效率。

圖3　具體矢量數(shù)據(jù)傳輸過程

2.3數(shù)據(jù)顯示設(shè)計

HTML5現(xiàn)提供了Canvas API，它可以解決傳統(tǒng)開發(fā)瀏覽器支持度差、跨平臺性不強(qiáng)和繪制矢量圖形需要插件的問題，通過JavaScript在瀏覽器不依賴任何插件的情況下高效地繪制動態(tài)圖形［7］，避免了安裝插件帶來安全風(fēng)險。

2.3.1繪制方法

Canvas API使用比較簡單，像其他HTML標(biāo)簽一樣，只需在HTML5的頁面中添加一個＜canvas＞元素即可。Canvas繪圖首先要獲得上下文（context），因為Canvas自己本身并沒有繪圖能力，所以所有的繪圖工作要由JavaScript完成。它的工作過程為：先定義Canvas元素的id，然后通過getElementById函數(shù)找到自己前面創(chuàng)建好的Canvas元素，最后用JavaScript調(diào)用繪圖API接口得到上下文繪圖環(huán)境后就可在畫布上繪制任何的圖形了。但Canvas只支持一種基本圖形——矩形，想使用Canvas繪制其他的圖形，就要使用其提供的路徑（Path）繪制函數(shù)［8］，使用beginPath（）開始繪制，使用moveTo（）、lineTo（）繪制直線，繪制完畢后調(diào)用fill（）、stroke（）進(jìn)行填充或者設(shè)置邊框，最后調(diào)用closePath（）結(jié)束圖形繪制。Canvas在矢量數(shù)據(jù)方面是像素級管理，Canvas的路徑操作能充分滿足矢量數(shù)據(jù)中的點要素、線要素、面要素以及符號的表達(dá)要求。

2.3.2數(shù)據(jù)顯示過程

用Canvas與JavaScript技術(shù)實現(xiàn)地圖實時繪制。地理實體對象可以根據(jù)OGC的簡單要素規(guī)范和GIS界的研究將其分為：點狀實體、線狀實體、面狀實體、標(biāo)注實體和柵格實體［3］。Canvas可直接使用這些實體，對于柵格實體，可以用JavaScript對象表示，通過APIdrawImage直接在HTML5 Canvas中繪制。矢量實體的地理要素從GeoJSON文本轉(zhuǎn)化為JavaScript對象，根據(jù)該對象的信息，調(diào)用坐標(biāo)轉(zhuǎn)換對象，將坐標(biāo)轉(zhuǎn)換成Canvas元素里的屏幕坐標(biāo)來對應(yīng)顯示要素。實現(xiàn)實時繪圖的流程為：（1）服務(wù)器從數(shù)據(jù)庫獲取數(shù)據(jù)；（2）數(shù)據(jù)進(jìn)行JSON格式解析；（3）瀏覽器加載地圖，調(diào)用Canvas畫布及函數(shù)實現(xiàn)繪圖和地圖的顯示；（4）地圖操作由自定義腳本實現(xiàn)地圖渲染。Canvas在客戶端展現(xiàn)地理數(shù)據(jù)的靈活性與互操作性要優(yōu)于傳統(tǒng)的切片技術(shù)，并且在地圖加載速度方面有明顯的優(yōu)勢［8］，因此將Canvas和WebStorage結(jié)合起來，可以提高實時性能，將要顯示或者要存儲的數(shù)據(jù)先經(jīng)過緩存，再進(jìn)行顯示或存儲，這種機(jī)制效率明顯更高。圖4說明了從數(shù)據(jù)推送到顯示的流程。

圖4　數(shù)據(jù)整體更新過程

3　客戶端整體過程

Canvas實現(xiàn)實時繪圖和快速渲染，WebSocket API在通信方面提供了支持。WebStorage提供了客戶端的本地存儲技術(shù)，以地圖放大操作為例，用戶提交請求，數(shù)據(jù)獲取函數(shù)可以從SessionStorage中獲取數(shù)據(jù)，然后將緩存的數(shù)據(jù)轉(zhuǎn)換成JavaScript對象，最后通過Canvas直接添加在地圖中，同時，緩存中的數(shù)據(jù)不斷更新。WebSocket的雙向通信機(jī)制和WebStorage的異步存儲機(jī)制加速了數(shù)據(jù)交換效率，空間數(shù)據(jù)庫也通過WebGIS服務(wù)器，在實時通信的基礎(chǔ)上，將數(shù)據(jù)以JSON文本格式傳輸?shù)娇蛻舳?，存入SessionStorage中，窗口關(guān)閉后，所有數(shù)據(jù)存入Local-Storage，供用戶下次直接使用。這種方式的效率很明顯會比從服務(wù)器獲取數(shù)據(jù)的方式高，實時性要好，如需要執(zhí)行其他的交互操作，也可以基于這種方式實現(xiàn)。

4　結(jié)論

隨著Web技術(shù)的發(fā)展，客戶端的交互性和實時性要求不斷提升，據(jù)此，本文將HTML5的新特性與JavaScript技術(shù)結(jié)合，在WebSocket雙向通信機(jī)制和WebStorage緩存機(jī)制實現(xiàn)異步存儲提供的數(shù)據(jù)支撐，Canvas能實現(xiàn)動態(tài)繪圖和快速渲染的基礎(chǔ)上，提出了一種實時性更強(qiáng)的WebGIS客戶端，為建立實時的WebGIS客戶端提供了一種方案。HTML5中的新技術(shù)雖然強(qiáng)大，還是有需要加強(qiáng)的地方，WebStorage讓數(shù)據(jù)能夠緩存在本地，但是由于是存儲在本地，數(shù)據(jù)容易泄漏，安全性還有欠缺。未來WebGIS的發(fā)展會隨著數(shù)據(jù)量的增大實現(xiàn)云平臺化，資源更龐大，數(shù)據(jù)更易共享，用戶使用起來也會更方便。

［1］孟令奎，史文中，張鵬林，等.網(wǎng)絡(luò)地理信息系統(tǒng)原理與技術(shù)［M］.北京：科學(xué)出版社，2010.

［2］李博霏，李欣，李艷明.基于瀏覽器的地理信息服務(wù)客戶端技術(shù)研究［J］.計算機(jī)工程與設(shè)計，2011（9）：3031-3035.

［3］龍云.基于HTML5的WebGIS研究［D］.贛州：江西理工大學(xué)，2013.

［4］CROCKFORD D.The application/json media type for JavaScript Object Notation（JSON）［EB/OL］.［2006-07］.http://tools.ietf.org/html/rfc4627.

［5］徐卓揆.基于HTML5、Ajax和Web Service的WebGIS研究［J］.測繪科學(xué)，2012，37（1）：145-147.

［6］魏進(jìn)鋒，孫春華.應(yīng)用HTML5的WebSocket實現(xiàn)BiDirection數(shù)據(jù)交換［EB/OL］.［2012-12-28］（2015-02-25）.http://www.ibm.com/developerworks/cn/web/1112_weijf_websocket/.

［7］王曉.基于HTML5的矢量地圖發(fā)布關(guān)鍵技術(shù)研究［D］.南京：南京師范大學(xué)，2011.

［8］梁春雨，李新通.使用HTML5 Canvas構(gòu)建基于GeoJSON的輕量級WebGIS［J］.計算機(jī)科學(xué)與應(yīng)用，2012（2）：189-196.

Diablo Technologies發(fā)布全球首款全閃存DDR4內(nèi)存模塊MEMORY（TM）

——該突破性的設(shè)計獲近期于北京舉辦的大數(shù)據(jù)世界論壇"最佳大數(shù)據(jù)分析基礎(chǔ)設(shè)施獎"和"最佳大數(shù)據(jù)運(yùn)營基礎(chǔ)設(shè)施獎"

Diablo Technologies近日在北京發(fā)布全球首款全閃存服務(wù)器系統(tǒng)內(nèi)存技術(shù)Memory1TM，這項技術(shù)改寫了數(shù)據(jù)中心性能表現(xiàn)和經(jīng)濟(jì)效益兩方面的行業(yè)標(biāo)準(zhǔn)。Diablo還宣布Memory1技術(shù)獲得2015年大數(shù)據(jù)世界論壇頒發(fā)的“最佳大數(shù)據(jù)分析基礎(chǔ)設(shè)施獎”和“最佳大數(shù)據(jù)運(yùn)營基礎(chǔ)設(shè)施獎”兩項大獎。大數(shù)據(jù)世界論壇是全球每年一次的交流研討活動，吸引行業(yè)先進(jìn)企業(yè)參加并共同探討大數(shù)據(jù)技術(shù)面臨的各種挑戰(zhàn)和具有領(lǐng)先優(yōu)勢的解決方案。

Diablo Technologies公司首席執(zhí)行官兼聯(lián)合創(chuàng)辦人Riccardo Badalone先生表示，“Memory1技術(shù)代表了服務(wù)器架構(gòu)的重大進(jìn)步，大規(guī)模數(shù)據(jù)中心的需求正在改變，此改變突出注重提高贏得互聯(lián)網(wǎng)市場的決勝能力，同時達(dá)到嚴(yán)格的成本和動力約束條件?！盧iccardo先生還說，“Memory1獲得大數(shù)據(jù)世界論壇兩個重要獎項，我們感到非常激動。行業(yè)給予我們的榮譽(yù)進(jìn)一步表明Memory1技術(shù)能夠推動數(shù)據(jù)中心在運(yùn)算性能和經(jīng)濟(jì)效益兩方面取得飛躍性的進(jìn)步。這項技術(shù)具有變革性意義——使用Memory1，可以平均減少四分之三的服務(wù)器使用量；某一用戶甚至可以減少90％的服務(wù)器使用量?！?/p>

具有革命性突破意義的Memory1技術(shù)可提供四倍于規(guī)模最大的DRAM模塊容量，大大提高服務(wù)器使用效率并實現(xiàn)數(shù)據(jù)中心成本降低最高達(dá)到70％?，F(xiàn)在能容納128GB或384GB內(nèi)存的系統(tǒng)最大可以承載4TB的Memory1，并處理以往無法滿足的海量數(shù)據(jù)應(yīng)用。Diablo突破性的內(nèi)存設(shè)計技術(shù)帶動了上述一系列效率提升，新技術(shù)以低廉的成本和大容量的閃存顆粒取代了價格昂貴的DRAM顆粒，同時達(dá)到了符合企業(yè)要求的性能表現(xiàn)。

Memory1技術(shù)平臺使用戶在無需改變硬件和軟件堆棧的條件下無縫地將NAND閃存用做系統(tǒng)內(nèi)存，Memory1技術(shù)部署在標(biāo)準(zhǔn)的DDR4 DIMM內(nèi)存條插槽上，并可與標(biāo)準(zhǔn)的主板、服務(wù)器、操作系統(tǒng)和應(yīng)用程序相互兼容。Memory1供貨目前僅提供給部分指定用戶，今年秋季將全面推向市場。

IDC固體硬盤和研究總監(jiān)Jeff Janukowicz先生指出，“云計算、數(shù)據(jù)虛擬化、大數(shù)據(jù)及數(shù)據(jù)分析對許多企業(yè)數(shù)據(jù)中心的現(xiàn)有基礎(chǔ)設(shè)施造成壓力，Diablo推出的Memory1解決方案與現(xiàn)有解決方案相比具有多項優(yōu)勢，包括加快應(yīng)用性能，提供更大容量、降低功耗和冷卻能耗成本并削減總體開支成本。這將滿足目前各類企業(yè)市場客戶群以及下一代數(shù)據(jù)中心設(shè)計的要求。”

如欲了解更多信息，請訪問http://www.diablo-technologies.com。

（Diablo Technologies供稿）

Design of WebGIS real-time client based on HTML5

Zhou Lingfang，Li Changyun，Hu Shuxin，Wang Hua
（School of Computer and Communication，Hunan University of Technology，Zhuzhou 412007，china）

There are some problems in the browser side of WebGIS that the drawing efficiency is poor and it cannot supporting vector drawing directly.In order to improve the client′s interactivity and real-time performance，this article solves those problems that browser doesn′t support vector drawing and renders slowing，the storage space is small，and the transfer rate is slow.And on this basis，it combines with the HTML5 Canvas，WebSocket and WebStorage technology to build a WebGIS real-time client that can solve those problems in the client side effectively and improve the user′s experience.

HTML5；Canvas；WebGIS real-time client

TP391.7

A

1674-7720（2015）16-0066-04

周玲芳，李長云，胡淑新，等.基于HTML5的WebGIS實時客戶端設(shè)計［J］.微型機(jī)與應(yīng)用，2015，34（16）：66-69.

2015-03-18）

周玲芳（1990-），女，碩士研究生，主要研究方向：軟件開發(fā)技術(shù)、軟件工程。

李長云（1972-），男，博士，教授，主要研究方向：軟件演化、可信軟件、軟件工程。

胡淑新（1991-），男，碩士研究生，主要研究方向：網(wǎng)絡(luò)化軟件開發(fā)。

2013年度科技部科技支撐計劃課題（2013BAJ10B14-5）；2014年度湖南省研究生創(chuàng)新基金（CX2014B428）