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

　　關鍵詞： HTML5；Canvas,；WebGIS實時客戶端

0 引言

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

1 實時客戶端的WebGIS系統(tǒng)結構

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

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

2 WebGIS客戶端的具體設計

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

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

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

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

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

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

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

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

　　2.3.1 繪制方法

　　Canvas API使用比較簡單,，像其他HTML標簽一樣，只需在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（）進行填充或者設置邊框，最后調(diào)用closePath（）結束圖形繪制,。Canvas在矢量數(shù)據(jù)方面是像素級管理,，Canvas的路徑操作能充分滿足矢量數(shù)據(jù)中的點要素、線要素,、面要素以及符號的表達要求,。

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

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

3 客戶端整體過程

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

4 結論

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

　　參考文獻

　　[1] 孟令奎,，史文中，張鵬林,，等.網(wǎng)絡地理信息系統(tǒng)原理與技術[M].北京：科學出版社,，2010.

　　[2] 李博霏，李欣,，李艷明.基于瀏覽器的地理信息服務客戶端技術研究[J].計算機工程與設計,，2011（9）：3031-3035.

　　[3] 龍云.基于HTML5的WebGIS研究[D].贛州：江西理工大學，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].測繪科學,，2012，37（1）：145-147.

　　[6] 魏進鋒,，孫春華.應用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ā)布關鍵技術研究[D].南京：南京師范大學,，2011.

　　[8] 梁春雨，李新通.使用HTML5 Canvas構建基于GeoJSON的輕量級WebGIS[J].計算機科學與應用,，2012（2）：189-196.