摘 要:該文探討了WEB GIS應(yīng)用中瓦片地圖的加載方式,提出了一種地圖顯示優(yōu)化的方法,并給出了優(yōu)化方法的實(shí)現(xiàn)策略與步驟,為封裝功能更強(qiáng)、用戶體驗(yàn)更好的WEB GIS組件提供了技術(shù)理論依據(jù)。
關(guān)鍵詞:地圖顯示 緩存 優(yōu)化
中圖分類號(hào):TP39 文獻(xiàn)標(biāo)識(shí)碼:A 文章編號(hào):1674-098X(2014)05(b)-0216-02
WEB GIS是一種新型的GIS應(yīng)用模式,是GIS應(yīng)用在瀏覽器端的擴(kuò)展,瀏覽器端GIS地圖加載的通用方式是事先在服務(wù)器上生成GIS地圖瓦片,然后在瀏覽器端動(dòng)態(tài)加載瓦片。目前大部分的開源WEB GIS組件,對(duì)于瓦片地圖的顯示只提供了加載、瀏覽等最基本的功能,而對(duì)如何提高加載瓦片的效率,減少對(duì)服務(wù)器的訪問壓力與提供更加友好的地圖顯示效果等方面都沒有涉及。傳統(tǒng)的瓦片加載方式,可能存在瀏覽GIS地圖時(shí)地圖出現(xiàn)白邊,服務(wù)器訪問壓力大等問題。該文綜合瀏覽器緩存機(jī)制、內(nèi)存緩存機(jī)制、瓦片預(yù)加載等方法,提出了一種地圖顯示優(yōu)化方法。
1 主要機(jī)制說明
該地圖優(yōu)化方法是一種多層緩存結(jié)構(gòu),綜合了瀏覽器緩存機(jī)制、內(nèi)存緩存機(jī)制、瓦片預(yù)加載等方法,地圖顯示的優(yōu)化順序如下。
(1)地圖瀏覽加載新的地圖時(shí),WEB GIS地圖顯示容器首先判斷內(nèi)存中是否有需要的瓦片,如果內(nèi)存有,則直接從內(nèi)存中獲取瓦片數(shù)據(jù),否則執(zhí)行步驟2。
(2)程序判斷瀏覽器是否有緩存請(qǐng)求的瓦片,如果有緩存請(qǐng)求的瓦片,則直接從瀏覽器緩存中獲取瓦片數(shù)據(jù),否則執(zhí)行步驟3。
(3)向服務(wù)器請(qǐng)求瓦片數(shù)據(jù)動(dòng)態(tài)加載瓦片.在請(qǐng)求瓦片的時(shí)候,程序主動(dòng)多請(qǐng)求一些屏幕范圍外的瓦片,進(jìn)行瓦片預(yù)請(qǐng)求,這樣地圖在平移瀏覽的時(shí)候,因?yàn)樾枰耐咂呀?jīng)從服務(wù)器端獲取了,可以避免地圖瀏覽時(shí)的地圖空白;從服務(wù)器請(qǐng)求的瓦片添加到內(nèi)存中并存儲(chǔ)到瀏覽器緩存中,下一次訪問該層級(jí)的瓦片的時(shí)候可以避免從服務(wù)器端重新請(qǐng)求。
從程序體系上說,預(yù)加載地圖瓦片的方式進(jìn)行顯示是程序的展現(xiàn)層,程序內(nèi)存緩存是位于展現(xiàn)層之上的第一級(jí)緩存,瀏覽器緩存則是位于展現(xiàn)層之上的第二級(jí)緩存,這也就形成了程序體系上的三層緩存結(jié)構(gòu)。預(yù)加載展現(xiàn)層實(shí)際上擴(kuò)大了地圖的展現(xiàn)區(qū)域,在地圖拖動(dòng)時(shí)避免了拖動(dòng)區(qū)域內(nèi)地圖瓦片的請(qǐng)求過程,減少了等待時(shí)間提升了用戶體驗(yàn)感受。而程序內(nèi)存緩存與瀏覽器緩存則是程序利用的兩個(gè)瓦片圖片的緩存池,程序內(nèi)存緩存由于在程序內(nèi)存中,獲取緩存的時(shí)間要低于通過瀏覽器緩存(文件)的獲取時(shí)間,便于存放近期瀏覽的地圖瓦片。瀏覽器緩存則作為程序外部地圖瓦片的緩存池,存儲(chǔ)著訪問過的所有瓦片圖片。這三層結(jié)構(gòu)緊密結(jié)合從下至上形成了一個(gè)有機(jī)整體,從而達(dá)到了地圖顯示優(yōu)化的目的。
2 地圖顯示優(yōu)化的實(shí)現(xiàn)策略
(1)使用瀏覽器緩存機(jī)制
瀏覽器緩存(主要就是HTTP協(xié)議定義的緩存機(jī)制)是為了加速瀏覽,瀏覽器在用戶磁盤上對(duì)最近請(qǐng)求過的文檔進(jìn)行存儲(chǔ),當(dāng)訪問者再次請(qǐng)求這個(gè)頁面時(shí),瀏覽器就可以從本地磁盤加載文檔,減少對(duì)服務(wù)器的請(qǐng)求,加速頁面的瀏覽。使用瀏覽器緩存有使用便捷、緩存空間可設(shè)置、清理緩存方便等優(yōu)點(diǎn);通過使用緩存的方式節(jié)約了網(wǎng)絡(luò)的資源,提高了網(wǎng)絡(luò)的效率。使用瀏覽器緩存的方式是通過服務(wù)器端編程的方式實(shí)現(xiàn)的,通過在服務(wù)器端返回請(qǐng)求瓦片數(shù)據(jù)的HTTP頭中添加或設(shè)置對(duì)應(yīng)的屬性值,通過HTTP協(xié)議定義的緩存機(jī)制來實(shí)現(xiàn)使用瀏覽器緩存的目的。
以下為瀏覽器緩存的處理流程:
①第一次瀏覽器(無緩存)向WEB服務(wù)器進(jìn)行請(qǐng)求,WEB服務(wù)器端生成Cache-Control與ETag等頭信息后返回瀏覽器進(jìn)行緩存,瀏覽器將內(nèi)容進(jìn)行呈現(xiàn)。
②第二次瀏覽器(有緩存)向WEB服務(wù)器進(jìn)行請(qǐng)求時(shí),首先判斷請(qǐng)求內(nèi)容是否在緩存中存在,若沒有緩存則向WEB服務(wù)器進(jìn)行請(qǐng)求。
③若有緩存則再次判斷緩存內(nèi)容是否過期(判斷Cache-Control中max-age的值),若緩存不過期則從緩存中讀取后將內(nèi)容進(jìn)行呈現(xiàn)。
④若緩存已過期則首先判斷是否存在ETag標(biāo)簽,若存在ETag標(biāo)簽則再次向WEB服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match(ETag的值)。WEB服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match則與被請(qǐng)求資源的相應(yīng)校驗(yàn)碼進(jìn)行比對(duì),決定返回200或304;若返回200則是包含消息體的響應(yīng)結(jié)果內(nèi)容,瀏覽器進(jìn)行顯示;若返回為304則瀏覽器從緩存中進(jìn)行讀取后將內(nèi)容進(jìn)行呈現(xiàn)。
⑤若不存在ETag標(biāo)簽則判斷是否存在Last-Modified標(biāo)簽,若存在Last-Modified標(biāo)簽則再次向WEB服務(wù)器請(qǐng)求時(shí)帶上頭 If-Modified-Since,表示請(qǐng)求時(shí)間。WEB服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新,說明資源又被改動(dòng)過,則響應(yīng)整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi)),返回響應(yīng)HTTP 200;若最后修改時(shí)間較舊,說明資源無新修改,則響應(yīng)HTTP 304 (不含包體,節(jié)省瀏覽),告知瀏覽器繼續(xù)使用所保存的緩存,瀏覽器讀取響應(yīng)緩存將內(nèi)容進(jìn)行顯示。
⑥若不存在Last-Modified標(biāo)簽則直接向WEB服務(wù)器進(jìn)行請(qǐng)求后將結(jié)果內(nèi)容進(jìn)行顯示。
(2)使用程序內(nèi)存緩存
程序內(nèi)存緩存是一種編程的方式,將已訪問的地圖瓦片數(shù)據(jù)緩存到內(nèi)存,則無需在每次請(qǐng)求時(shí)都訪問WEB服務(wù)器。由于從內(nèi)存中返回?cái)?shù)據(jù)的速度始終比新提供的數(shù)據(jù)速度快,因而可以大大提高應(yīng)用程序的性能,同時(shí)減輕服務(wù)器端的訪問壓力。但是地圖顯示程序工作在瀏覽器上,如果一味的增加緩存數(shù)量或容量的話,很能會(huì)對(duì)瀏覽器造成負(fù)面影響,使瀏覽效果大大降低,甚至造成程序崩潰等情況。這就需要在緩存對(duì)象容器的設(shè)計(jì)、加載處理緩存對(duì)象機(jī)制、控制緩存大小等方面進(jìn)行設(shè)計(jì)控制。
以下為程序內(nèi)存緩存的設(shè)計(jì)原則:
①以程序中增加一定數(shù)量的緩存對(duì)象的方式來實(shí)現(xiàn)程序內(nèi)存緩存,在瀏覽的狀態(tài)下預(yù)先使用程序中存儲(chǔ)的緩存對(duì)象。如果在程序內(nèi)存緩存中存在要請(qǐng)求的緩存對(duì)象則從程序內(nèi)存中獲取,若不存在則通過瀏覽器進(jìn)行請(qǐng)求從而進(jìn)入瀏覽器緩存的處理流程。
②通過配置最大(個(gè)數(shù))上限的方式控制存儲(chǔ)緩存的大小,這樣不僅可以提高程序的可伸縮性和擴(kuò)展性,而且可以便于在性能測(cè)試的時(shí)候針對(duì)不同性能配置的客戶端設(shè)置不同的緩存上限。
③當(dāng)達(dá)到緩存上限后,應(yīng)循環(huán)使用緩存,使緩存對(duì)象中保存最近瀏覽的一定量的緩存圖片,以便盡可能的提高緩存使用率。
以下為程序內(nèi)存緩存的處理流程。
①程序啟動(dòng)加載瓦片圖片,首先創(chuàng)建緩存對(duì)象容器,然后正常請(qǐng)求瓦片圖片,將加載過的瓦片圖片進(jìn)行緩存。
②當(dāng)拖動(dòng)或縮放地圖時(shí)(需要請(qǐng)求新的瓦片圖片),首先從緩存對(duì)象容器中進(jìn)行搜索,如果存在則從緩存容器中取得瓦片圖片進(jìn)行顯示,否則正常請(qǐng)求瓦片圖片。
③當(dāng)程序中緩存對(duì)象容器的最大上限(存儲(chǔ)個(gè)數(shù))到達(dá)后,首先將緩存容器對(duì)象的上限標(biāo)識(shí)設(shè)置為零,然后正常的請(qǐng)求瓦片圖片,最后將返回的第一張瓦片圖片存儲(chǔ)到緩存對(duì)象容器的末尾位置,返回的剩余的瓦片圖片將按順序存儲(chǔ)到緩存對(duì)象容器中。
④始終使緩存對(duì)象容器中保存的全部是最近訪問的一定數(shù)量的緩存圖片。從而達(dá)到在縮放或平移附近地圖區(qū)域時(shí),優(yōu)先從程序內(nèi)存的緩存對(duì)象容器中加載瓦片圖片,提高了緩存使用率,加快了程序響應(yīng)速度。
使用預(yù)加載的方式提高地圖顯示效果
目前大部分的WEB GIS組件在地圖顯示時(shí)只是展現(xiàn)了程序窗口范圍內(nèi)的地圖瓦片數(shù)據(jù),在地圖瀏覽的過程中平移拖動(dòng)地圖時(shí),由于窗口范圍內(nèi)的地圖區(qū)域發(fā)生了變化,程序就會(huì)重新加載移動(dòng)范圍內(nèi)的瓦片圖片,而地圖瓦片的加載與顯示都是需要耗時(shí)的,這樣在程序窗口中部分區(qū)域從白色(地圖移動(dòng)的范圍)到重新加載并顯示地圖瓦片后,就會(huì)在視覺上產(chǎn)生了一種有白色邊緣的過度效果,這種效果給人一種生硬的感覺,大大降低了用戶的使用感受。為了減緩這種感覺,可以采用“預(yù)加載”的方式;提前將當(dāng)前視圖范圍以外的一定區(qū)域范圍內(nèi)的瓦片圖片加載完成,這樣在進(jìn)行地圖拖動(dòng)時(shí),由于一定范圍內(nèi)的圖片已經(jīng)加載了,不會(huì)再去請(qǐng)求瓦片圖片,這樣就縮短了加載顯示拖動(dòng)區(qū)域瓦片圖片的時(shí)間,而拖動(dòng)區(qū)域內(nèi)的瓦片圖片已經(jīng)加載了,單純的將拖動(dòng)區(qū)域內(nèi)的瓦片圖片進(jìn)行顯示耗時(shí)是很少的,從視覺上感覺不到有白色邊緣的過度效果了;同時(shí)配合程序內(nèi)存緩存與瀏覽器緩存的機(jī)制在縮放地圖的時(shí)候,大部分瓦片圖片從緩存中獲得,大大減少了瓦片圖片的加載時(shí)間,使瀏覽效果達(dá)到一定的提升。
以下為預(yù)加載方式的設(shè)計(jì)原則:
預(yù)加載的方式是通過一種編程的方式,使程序窗口以外的地圖顯示區(qū)域加載地圖瓦片的方式。
由于地圖顯示瀏覽的拖動(dòng)操作可以是任意方向的,所以在設(shè)置預(yù)加載策略時(shí),要將程序窗口以外東南西北四個(gè)邊緣位置設(shè)置預(yù)加載地圖瓦片。
由于地圖瓦片是按行列進(jìn)行的,所以預(yù)加載的方式應(yīng)該以瓦片行列的形式體現(xiàn),以當(dāng)前視圖范圍向外多請(qǐng)求一定的行列數(shù)。
預(yù)加載行列的設(shè)置可以通過配置的方式實(shí)現(xiàn),這樣不僅可以提高程序的可伸縮性和擴(kuò)展性,而且可以便于在性能測(cè)試的時(shí)候針對(duì)不同性能配置的客戶端設(shè)置不同預(yù)加載行列數(shù)。
3 結(jié)語
該文介紹了一種WEB GIS地圖顯示優(yōu)化的方法,該方法可以提高瓦片的加載速度、減少服務(wù)器的壓力,并通過地圖瓦片預(yù)加載的方式減少地圖瀏覽器時(shí)的地圖空白。目前該方法已經(jīng)在多個(gè)實(shí)際項(xiàng)目中進(jìn)行了應(yīng)用,提供了良好的地圖顯示體驗(yàn),得到了用戶的一致認(rèn)可。
參考文獻(xiàn)
[1]陳俊,宮鵬.實(shí)用地理信息系統(tǒng)——成功地理信息系統(tǒng)的建設(shè)與管理[M].北京:科學(xué)出版社,1998.
[2]陳述彭,魯學(xué)軍,周成虎.地理信息系統(tǒng)導(dǎo)論[M].北京:科學(xué)出版社,1999.
[3]承繼成,李琦,易善楨.國家空間信息基礎(chǔ)設(shè)施與數(shù)字地球[M].北京:清華大學(xué)出版社,1999.
[4]龔健雅,當(dāng)代GIS的若干理論與技術(shù)[M].武漢:武漢測(cè)繪大學(xué)出版社,1999.
[5]郭德方,郭仁中.遙感圖像的計(jì)算機(jī)處理和模式識(shí)別,北京,電子工業(yè)出版社,1987.