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

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

0 引言

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

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

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

1 系統(tǒng)原理

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

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

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

　　1.2 系統(tǒng)流程

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

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

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

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

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

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

　　2.2 地圖切片離線瀏覽

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

3 系統(tǒng)性能

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

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

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

4 總結(jié)

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

　　[8] 畢建濤,王雷,池天河，等.基于Web Service的地理信息服務(wù)研究[J].計(jì)算機(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è)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)學(xué)報(bào),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.