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

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

0 引言

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

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

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

1 系統(tǒng)原理

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

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

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

　　1.2 系統(tǒng)流程

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

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

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

　　2.1 地圖切片預存儲

　　本項目用到的地圖切片為上海市航拍影像圖，按分辨率的不同共分為6個等級，這里把文件系統(tǒng)的目錄結(jié)構(gòu)分成6個主目錄。而每一級切片下，又細分出了A、B、C、D 4個子文件夾。在非離線情況下系統(tǒng)訪問地圖切片時的文件夾管理結(jié)構(gòu)如圖3所示。文件API具有特殊管理機制，保存文件前需要設定虛擬的文件夾結(jié)構(gòu)來管理本機上的文件對象，文件對象中的文本信息具有嚴格的編碼格式，可以防止數(shù)據(jù)的意外泄露。本系統(tǒng)所創(chuàng)建虛擬文件夾路徑與真實路徑保持統(tǒng)一，減少中間過程的轉(zhuǎn)換計算，具體可設定為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)絡傳輸?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)得到的地圖切片編號也就是存放在服務器中的靜態(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)在對離線和在線兩種模式的地圖響應速度進行測試。測試所使用的電腦硬件配置為Intel 3.30 GHz雙核CPU和4 GB內(nèi)存。

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

　　由此可見，地圖簡單操作時，系統(tǒng)響應切片花費在網(wǎng)絡上的時間過多，而通過預存切片的方式可以減少網(wǎng)絡的通信時間，并且可預知在野外當網(wǎng)絡速度緩慢時使用系統(tǒ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ā)出更豐富的應用，許多只能在C/S結(jié)構(gòu)上才能完成的功能，如今在Web應用程序上也能夠完成[11]。

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

參考文獻

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

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

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

　　[4] 李學俊,王尊亮,李曉歡，等. 基于地圖切片預取的WebGIS系統(tǒng)[J].計算機應用研究,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的地理信息服務研究[J].計算機科學,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)的設計與實現(xiàn)[J].計算機學報,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.