摘 要： 目前,，主流的客戶端緩存地圖切片技術(shù)都是基于C/S結(jié)構(gòu),，這種技術(shù)在移動設(shè)備的地圖APP程序中應(yīng)用較廣泛。B/S結(jié)構(gòu)由于安全機制的限制,，不能夠在客戶端存儲大容量的文件，這一特點嚴重阻礙了基于WebGIS技術(shù)的地圖應(yīng)用程序的發(fā)展,。最新的HTML5文件系統(tǒng)API技術(shù)能夠?qū)崿F(xiàn)在客戶端存儲大批量文件,，可以將海量地圖切片緩存到用戶的電腦硬盤或者移動設(shè)備中，在需要訪問地圖時從客戶端調(diào)出使用,?；谠摴δ埽脩粼贐/S結(jié)構(gòu)下將地圖切片緩存到客戶端,，在離線環(huán)境中瀏覽預(yù)先存儲好的地圖數(shù)據(jù),，縮短系統(tǒng)的響應(yīng)時間，改善用戶體驗,。

　　關(guān)鍵詞： HTML5技術(shù); 網(wǎng)絡(luò)地理信息系統(tǒng);地圖切片預(yù)存儲;離線瀏覽;客戶端緩存;B/S結(jié)構(gòu)

0 引言

　　近年來隨著移動設(shè)備的快速普及,，出現(xiàn)了很多基于C/S模式的地圖應(yīng)用程序，并實現(xiàn)了下載離線地圖數(shù)據(jù)的功能,，方便了人們的生活,。離線瀏覽地圖切片功能是指把事先下載好的地圖切片放在離線環(huán)境中使用[1]。離線情況大致可以分為以下幾種：筆記本電腦或手機在“飛行模式”時,、Web應(yīng)用無法與服務(wù)器正常通信,、野外移動設(shè)備網(wǎng)絡(luò)信號弱或不穩(wěn)定等。有兩種形式在離線情況下存儲地圖：第一種是在網(wǎng)速正常的情況下預(yù)先下載地圖切片,，地圖切片被存儲到客戶端,，當(dāng)用戶在野外網(wǎng)絡(luò)信號弱時，系統(tǒng)會從客戶端取出地圖切片的信息,，供用戶瀏覽地圖 [2],。還有一種是在瀏覽地圖的過程中，程序自發(fā)地存儲瀏覽過的地圖,，被保存過的地圖可以重復(fù)瀏覽,，不需要與服務(wù)器端交互，系統(tǒng)反應(yīng)的時間變短,，節(jié)省了用戶大量的寬帶流量[3],。后者使用更加普遍,，這種被動智能化存儲，可以增強用戶體驗,，讓瀏覽地圖變得更加快捷[2],。

　　上述離線瀏覽地圖切片功能都是基于C/S模式的開發(fā)技術(shù)，運行在B/S模式中的WEB應(yīng)用程序由于受到安全因素的限制[2],，不能進行大容量文件的本地存儲,。與同類產(chǎn)品相比，離線情況下無法使用地圖已經(jīng)成為了Web程序的一大缺陷,，使WebGIS的發(fā)展受到了極大的限制[4],。

　　HTML5有關(guān)文件系統(tǒng)標(biāo)準的出現(xiàn)，填補了Web應(yīng)用程序不能在客戶端上存儲大文件的空白[1],。盡管處于安全的考慮,，HTML5對這一功能有一定的限制，不能自由地去訪問客戶端的文件系統(tǒng),，但是文件API標(biāo)準已經(jīng)足以解決在客戶端緩存地圖切片的難題[5],。

1 系統(tǒng)原理

　　1.1 地圖切片主要參數(shù)

　　自Google Maps推出地圖切片以來，WebGIS得到了空前的發(fā)展[4],。地圖切片主要是指按照分辨率等級的不同,，將原先動態(tài)生成的地圖圖片提前保存為靜態(tài)圖片，存儲在服務(wù)器上,，等到用戶瀏覽地圖時,，服務(wù)器將靜態(tài)圖片傳送到客戶端瀏覽器中。地圖切片有效縮短了服務(wù)器端動態(tài)生成地圖的時間和網(wǎng)絡(luò)傳送圖片的時間,，提高系統(tǒng)響應(yīng)速度[5],。

　　在用戶與地圖進行交互的那一片區(qū)域（簡單稱為地圖窗口[6]）有幾個重要的參數(shù)，包括：當(dāng)前窗口的寬高,、中心點坐標(biāo)和zoom值,，這些參數(shù)的變化決定地圖切片的選取。

　　1.2 系統(tǒng)流程

　　典型的WebGIS系統(tǒng)如圖1所示,，通常由兩部分組成[7],，即客戶端地圖操作和服務(wù)器端數(shù)據(jù)返回。當(dāng)用戶進行瀏覽操作時,，客戶端程序會判斷用戶的操作,，把當(dāng)前窗口的寬高、中心點坐標(biāo)和zoom值發(fā)送給服務(wù)器端,。地圖服務(wù)器根據(jù)傳送過來的參數(shù)值計算出所有地圖切片的編號,，返回給客戶端，客戶端程序根據(jù)地圖編號,，以異步的方式訪問地圖切片的URL,，瀏覽器繪制出圖片給用戶,。上述流程中，客戶端與服務(wù)器發(fā)生了兩次交互,，一次是請求地圖切片編號,，還有一次是獲取地圖圖片。這兩步過程都決定了傳統(tǒng)WebGIS系統(tǒng)無法在離線環(huán)境中使用,，并且經(jīng)過實驗得知,，服務(wù)器端獲取圖片這一過程，對網(wǎng)絡(luò)速度的要求極高,，當(dāng)該系統(tǒng)在網(wǎng)絡(luò)信號不好的移動端使用時,，地圖操作的響應(yīng)速度極慢，網(wǎng)頁加載地圖時間漫長,，由此可以得出結(jié)論,，傳統(tǒng)WebGIS在網(wǎng)速較差的環(huán)境中幾乎無法使用。

　　本項目中改變了傳統(tǒng)WebGIS系統(tǒng)中地圖操作后系統(tǒng)響應(yīng)的方式,，即在客戶端增加了地圖切片預(yù)存儲功能,，如圖2所示,?？蛻舳说臑g覽器不再把地圖窗口參數(shù)發(fā)送給服務(wù)器，而是直接在前端計算出地圖切片的編號信息,，根據(jù)編號信息從文件沙箱中取出相應(yīng)圖片的內(nèi)容,，所有過程在前端腳本中完成，實現(xiàn)了離線方式操作地圖,，使用這種方式將會使系統(tǒng)響應(yīng)速度變得更快,。根據(jù)實驗得知，地圖切片交互時所需的寬帶數(shù)據(jù)量占整個系統(tǒng)中的絕大部分,，所以當(dāng)?shù)貓D切片放在離線環(huán)節(jié)時,，即使在網(wǎng)絡(luò)速度不佳的野外，當(dāng)請求數(shù)據(jù)量適中的矢量圖形或者打開網(wǎng)頁圖片時,，也不會影響系統(tǒng)的整體運行,，經(jīng)過改變系統(tǒng)響應(yīng)方式的新系統(tǒng)在網(wǎng)速不佳的情況下也能正常使用[8]。

2 系統(tǒng)實現(xiàn)

　　2.1 地圖切片預(yù)存儲

　　本項目用到的地圖切片為上海市航拍影像圖,，按分辨率的不同共分為6個等級,，這里把文件系統(tǒng)的目錄結(jié)構(gòu)分成6個主目錄。而每一級切片下,，又細分出了A,、B、C,、D 4個子文件夾,。在非離線情況下系統(tǒng)訪問地圖切片時的文件夾管理結(jié)構(gòu)如圖3所示,。文件API具有特殊管理機制，保存文件前需要設(shè)定虛擬的文件夾結(jié)構(gòu)來管理本機上的文件對象,，文件對象中的文本信息具有嚴格的編碼格式,，可以防止數(shù)據(jù)的意外泄露。本系統(tǒng)所創(chuàng)建虛擬文件夾路徑與真實路徑保持統(tǒng)一,，減少中間過程的轉(zhuǎn)換計算,，具體可設(shè)定為Map/A1/A/A001_002.jpg。具體的路徑加上文件名,，構(gòu)成了唯一的鍵名,，保證了離線系統(tǒng)中地圖信息的準確性[9]。

　　文件API支持文字信息的存儲,，單個圖片信息以Base64的文字編碼方式保存下來,。根據(jù)用戶的需求針對某個鄉(xiāng)鎮(zhèn)進行下載，利用本系統(tǒng)中的geoserver平臺可以查詢到指定區(qū)縣或鄉(xiāng)鎮(zhèn)下所有切片的名稱tileName和切片等級Level,，根據(jù)文件夾結(jié)構(gòu)可計算出該切片的文件路徑Path,。返回的Path代表了文件存放的具體位置，使用PHP技術(shù)將名稱為tileName的切片顏色信息提取出來,，通過網(wǎng)絡(luò)傳輸?shù)娇蛻舳艘晕募嗀PI形式保存[10],。下載地圖切片信息的過程如圖4所示。

　　2.2 地圖切片離線瀏覽

　　本項目所使用到的WebGIS系統(tǒng)是基于實驗室自主研發(fā)的Geoserver平臺,，所有后臺數(shù)據(jù)以及地圖信息的交互都是基于該平臺,，并非市場上流行的ArcGIS Server平臺[3]。在調(diào)用地圖切片環(huán)節(jié)中,，地圖切片的編號都是使用Geoserver平臺計算,，具有較強的創(chuàng)新性和自主性[6]。在離線瀏覽切片地圖時,，系統(tǒng)得到的地圖切片編號也就是存放在服務(wù)器中的靜態(tài)圖片的URL地址,，可以根據(jù)原來的URL地址，使用文件API來訪問具有相同文件結(jié)構(gòu)的客戶端地圖切片[7],。保存在文件系統(tǒng)的格式為Base64編碼的文本信息,，直接將切片容器中的src指向這段編碼信息，瀏覽器就能繪制出正確圖片,。文件系統(tǒng)可以保存硬盤容量內(nèi)的任意大小的文件,，保證了海量切片的批量存儲，并且單個切片信息存取速度快,，操作簡單,，這些特點為離線切片的存取創(chuàng)造了良好的條件。

3 系統(tǒng)性能

　　為了測試離線模式給系統(tǒng)交互有效性帶來的提高，現(xiàn)在對離線和在線兩種模式的地圖響應(yīng)速度進行測試,。測試所使用的電腦硬件配置為Intel 3.30 GHz雙核CPU和4 GB內(nèi)存,。

　　網(wǎng)絡(luò)情況正常的情況下，在PC端進行1 000次的地圖操作,，并對30張和100張不同數(shù)量級的切片進行比較,，把縮放和平移之后系統(tǒng)響應(yīng)切片的等待時間記錄下來，此過程由專門開發(fā)的程序?qū)崿F(xiàn),，測試結(jié)果如表1所示,。從表1中可以看出，30張切片時離線中的切片等待時間大約為在線情況下的1/15,，而當(dāng)切片增加到100張時,，系統(tǒng)的響應(yīng)速度得到了極大的提高[8]。

　　由此可見,，地圖簡單操作時,，系統(tǒng)響應(yīng)切片花費在網(wǎng)絡(luò)上的時間過多，而通過預(yù)存切片的方式可以減少網(wǎng)絡(luò)的通信時間,，并且可預(yù)知在野外當(dāng)網(wǎng)絡(luò)速度緩慢時使用系統(tǒng),，在線模式的響應(yīng)時間可令系統(tǒng)無法使用或瀏覽器崩潰。

4 總結(jié)

　　本系統(tǒng)是一個基于B/S結(jié)構(gòu)的多功能系統(tǒng),，旨在結(jié)合遙感照片人工采集上海市農(nóng)業(yè)信息的數(shù)據(jù),。離線瀏覽地圖切片的難題是本文探討的重點，Web瀏覽器對用戶本地文件讀寫的支持,，極大地促進了WebGIS系統(tǒng)的發(fā)展,，有助于方便地開發(fā)出更豐富的應(yīng)用,，許多只能在C/S結(jié)構(gòu)上才能完成的功能,，如今在Web應(yīng)用程序上也能夠完成[11]。

　　離線瀏覽地圖切片以及地圖切片預(yù)存儲這兩大功能,，很好地促進了WebGIS的發(fā)展,，在今后富客戶端的趨勢下，許多工作都可以放到前端來完成,，這樣帶來的好處是,，地圖的交互速度將會更快，同時,，這種方式還可以消除周圍環(huán)境的影響,，例如網(wǎng)速的強弱和穩(wěn)定性，甚至在完全沒有網(wǎng)絡(luò)的情況下,，如在野外,、海上遠行、飛機起降時，用戶可以照常工作,，等到有需要時再將電腦或移動設(shè)備中的數(shù)據(jù)進行上傳或更新,。

參考文獻

　　[1] 陸凌牛. HTML5與CSS3權(quán)威指南[M]. 北京:機械工業(yè)出版社, 2013.

　　[2] 劉琦,潘瑜春,王雪峰，等. 基于B/S模式的WebGIS應(yīng)用系統(tǒng)研究[J].計算機工程與應(yīng)用, 2004（20）:177-179.

　　[3] 李治洪. WebGIS原理與實踐[M].北京：高等教育出版社,， 2009.

　　[4] 李學(xué)俊,王尊亮,李曉歡,，等. 基于地圖切片預(yù)取的WebGIS系統(tǒng)[J].計算機應(yīng)用研究,2009,26(10):3849-3851.

　　[5] 陳方圓,李治洪,謝文明，等. 基于Linux的能源與環(huán)境監(jiān)測WebGIS[J].計算機工程,2011,37(24):247-250.

　　[6] 周牧,談曉軍,左翔,，等. 基于AJAX和XML的WebGIS系統(tǒng)研究[J].計算機工程,2009,35(13):271-273.

　　[7] 黃祥志,劉南,劉仁義,，等. 適用于可編輯WebGIS的動態(tài)緩存策略[J].計算機工程,2011,37(5):285-287.

　　[8] 畢建濤,王雷,池天河，等.基于Web Service的地理信息服務(wù)研究[J].計算機科學(xué),2004,31(1):69-71.

　　[9] Thein T, Park J S. Availability analysis of application servers using software rejuvenation and virtualization[J]. Journal of Computer Science and Technology,2009,24(2):339-346.

　　[10] Silva L M, Alonso J, Torres J, et al. Using virtualization to improve software rejuvenation[J]. IEEE Transactions on Computers,2009,58(11):1525-1538.

　　[11] 羅英偉,汪小林,許卓群,，等.層次化WebGIS構(gòu)建系統(tǒng)的設(shè)計與實現(xiàn)[J].計算機學(xué)報,2004,27(2):177-185.

　　[12] Yang Chaowei, Michael G, Huang Qunying, et al. Spatial cloud computing: how can the geospatial sciences use and help shape cloud computing[J]. International Journal of Digital Earth, 2011,4(4):305-329.