一種地圖顯示優化的方法

摘 要：該文探討了WEB GIS應用中瓦片地圖的加載方式，提出了一種地圖顯示優化的方法，并給出了優化方法的實現策略與步驟，為封裝功能更強、用戶體驗更好的WEB GIS組件提供了技術理論依據。

關鍵詞：地圖顯示 緩存 優化

中圖分類號：TP39 文獻標識碼：A 文章編號：1674-098X（2014）05（b）-0216-02

WEB GIS是一種新型的GIS應用模式，是GIS應用在瀏覽器端的擴展，瀏覽器端GIS地圖加載的通用方式是事先在服務器上生成GIS地圖瓦片，然后在瀏覽器端動態加載瓦片。目前大部分的開源WEB GIS組件，對于瓦片地圖的顯示只提供了加載、瀏覽等最基本的功能，而對如何提高加載瓦片的效率，減少對服務器的訪問壓力與提供更加友好的地圖顯示效果等方面都沒有涉及。傳統的瓦片加載方式，可能存在瀏覽GIS地圖時地圖出現白邊，服務器訪問壓力大等問題。該文綜合瀏覽器緩存機制、內存緩存機制、瓦片預加載等方法，提出了一種地圖顯示優化方法。

1 主要機制說明

該地圖優化方法是一種多層緩存結構，綜合了瀏覽器緩存機制、內存緩存機制、瓦片預加載等方法，地圖顯示的優化順序如下。

（1）地圖瀏覽加載新的地圖時，WEB GIS地圖顯示容器首先判斷內存中是否有需要的瓦片，如果內存有，則直接從內存中獲取瓦片數據，否則執行步驟2。

（2）程序判斷瀏覽器是否有緩存請求的瓦片，如果有緩存請求的瓦片，則直接從瀏覽器緩存中獲取瓦片數據，否則執行步驟3。

（3）向服務器請求瓦片數據動態加載瓦片.在請求瓦片的時候，程序主動多請求一些屏幕范圍外的瓦片，進行瓦片預請求，這樣地圖在平移瀏覽的時候，因為需要的瓦片已經從服務器端獲取了，可以避免地圖瀏覽時的地圖空白；從服務器請求的瓦片添加到內存中并存儲到瀏覽器緩存中，下一次訪問該層級的瓦片的時候可以避免從服務器端重新請求。

從程序體系上說，預加載地圖瓦片的方式進行顯示是程序的展現層，程序內存緩存是位于展現層之上的第一級緩存，瀏覽器緩存則是位于展現層之上的第二級緩存，這也就形成了程序體系上的三層緩存結構。預加載展現層實際上擴大了地圖的展現區域，在地圖拖動時避免了拖動區域內地圖瓦片的請求過程，減少了等待時間提升了用戶體驗感受。而程序內存緩存與瀏覽器緩存則是程序利用的兩個瓦片圖片的緩存池，程序內存緩存由于在程序內存中，獲取緩存的時間要低于通過瀏覽器緩存（文件）的獲取時間，便于存放近期瀏覽的地圖瓦片。瀏覽器緩存則作為程序外部地圖瓦片的緩存池，存儲著訪問過的所有瓦片圖片。這三層結構緊密結合從下至上形成了一個有機整體，從而達到了地圖顯示優化的目的。

2 地圖顯示優化的實現策略

（1）使用瀏覽器緩存機制

瀏覽器緩存（主要就是HTTP協議定義的緩存機制）是為了加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤加載文檔，減少對服務器的請求，加速頁面的瀏覽。使用瀏覽器緩存有使用便捷、緩存空間可設置、清理緩存方便等優點；通過使用緩存的方式節約了網絡的資源，提高了網絡的效率。使用瀏覽器緩存的方式是通過服務器端編程的方式實現的，通過在服務器端返回請求瓦片數據的HTTP頭中添加或設置對應的屬性值，通過HTTP協議定義的緩存機制來實現使用瀏覽器緩存的目的。

以下為瀏覽器緩存的處理流程：

①第一次瀏覽器（無緩存）向WEB服務器進行請求，WEB服務器端生成Cache-Control與ETag等頭信息后返回瀏覽器進行緩存，瀏覽器將內容進行呈現。

②第二次瀏覽器（有緩存）向WEB服務器進行請求時，首先判斷請求內容是否在緩存中存在，若沒有緩存則向WEB服務器進行請求。

③若有緩存則再次判斷緩存內容是否過期（判斷Cache-Control中max-age的值），若緩存不過期則從緩存中讀取后將內容進行呈現。

④若緩存已過期則首先判斷是否存在ETag標簽，若存在ETag標簽則再次向WEB服務器請求時帶上頭If-None-Match（ETag的值）。WEB服務器收到請求后發現有頭If-None-Match則與被請求資源的相應校驗碼進行比對，決定返回200或304；若返回200則是包含消息體的響應結果內容，瀏覽器進行顯示；若返回為304則瀏覽器從緩存中進行讀取后將內容進行呈現。

⑤若不存在ETag標簽則判斷是否存在Last-Modified標簽，若存在Last-Modified標簽則再次向WEB服務器請求時帶上頭 If-Modified-Since，表示請求時間。WEB服務器收到請求后發現有頭If-Modified-Since 則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），返回響應HTTP 200；若最后修改時間較舊，說明資源無新修改，則響應HTTP 304 （不含包體，節省瀏覽），告知瀏覽器繼續使用所保存的緩存，瀏覽器讀取響應緩存將內容進行顯示。

⑥若不存在Last-Modified標簽則直接向WEB服務器進行請求后將結果內容進行顯示。

（2）使用程序內存緩存

程序內存緩存是一種編程的方式，將已訪問的地圖瓦片數據緩存到內存，則無需在每次請求時都訪問WEB服務器。由于從內存中返回數據的速度始終比新提供的數據速度快，因而可以大大提高應用程序的性能，同時減輕服務器端的訪問壓力。但是地圖顯示程序工作在瀏覽器上，如果一味的增加緩存數量或容量的話，很能會對瀏覽器造成負面影響，使瀏覽效果大大降低，甚至造成程序崩潰等情況。這就需要在緩存對象容器的設計、加載處理緩存對象機制、控制緩存大小等方面進行設計控制。

以下為程序內存緩存的設計原則：

①以程序中增加一定數量的緩存對象的方式來實現程序內存緩存，在瀏覽的狀態下預先使用程序中存儲的緩存對象。如果在程序內存緩存中存在要請求的緩存對象則從程序內存中獲取，若不存在則通過瀏覽器進行請求從而進入瀏覽器緩存的處理流程。

②通過配置最大（個數）上限的方式控制存儲緩存的大小，這樣不僅可以提高程序的可伸縮性和擴展性，而且可以便于在性能測試的時候針對不同性能配置的客戶端設置不同的緩存上限。

③當達到緩存上限后，應循環使用緩存，使緩存對象中保存最近瀏覽的一定量的緩存圖片，以便盡可能的提高緩存使用率。

以下為程序內存緩存的處理流程。

①程序啟動加載瓦片圖片，首先創建緩存對象容器，然后正常請求瓦片圖片，將加載過的瓦片圖片進行緩存。

②當拖動或縮放地圖時（需要請求新的瓦片圖片），首先從緩存對象容器中進行搜索，如果存在則從緩存容器中取得瓦片圖片進行顯示，否則正常請求瓦片圖片。

③當程序中緩存對象容器的最大上限（存儲個數）到達后，首先將緩存容器對象的上限標識設置為零，然后正常的請求瓦片圖片，最后將返回的第一張瓦片圖片存儲到緩存對象容器的末尾位置，返回的剩余的瓦片圖片將按順序存儲到緩存對象容器中。

④始終使緩存對象容器中保存的全部是最近訪問的一定數量的緩存圖片。從而達到在縮放或平移附近地圖區域時，優先從程序內存的緩存對象容器中加載瓦片圖片，提高了緩存使用率，加快了程序響應速度。

使用預加載的方式提高地圖顯示效果

目前大部分的WEB GIS組件在地圖顯示時只是展現了程序窗口范圍內的地圖瓦片數據，在地圖瀏覽的過程中平移拖動地圖時，由于窗口范圍內的地圖區域發生了變化，程序就會重新加載移動范圍內的瓦片圖片，而地圖瓦片的加載與顯示都是需要耗時的，這樣在程序窗口中部分區域從白色（地圖移動的范圍）到重新加載并顯示地圖瓦片后，就會在視覺上產生了一種有白色邊緣的過度效果，這種效果給人一種生硬的感覺，大大降低了用戶的使用感受。為了減緩這種感覺，可以采用“預加載”的方式；提前將當前視圖范圍以外的一定區域范圍內的瓦片圖片加載完成，這樣在進行地圖拖動時，由于一定范圍內的圖片已經加載了，不會再去請求瓦片圖片，這樣就縮短了加載顯示拖動區域瓦片圖片的時間，而拖動區域內的瓦片圖片已經加載了，單純的將拖動區域內的瓦片圖片進行顯示耗時是很少的，從視覺上感覺不到有白色邊緣的過度效果了；同時配合程序內存緩存與瀏覽器緩存的機制在縮放地圖的時候，大部分瓦片圖片從緩存中獲得，大大減少了瓦片圖片的加載時間，使瀏覽效果達到一定的提升。

以下為預加載方式的設計原則：

預加載的方式是通過一種編程的方式，使程序窗口以外的地圖顯示區域加載地圖瓦片的方式。

由于地圖顯示瀏覽的拖動操作可以是任意方向的，所以在設置預加載策略時，要將程序窗口以外東南西北四個邊緣位置設置預加載地圖瓦片。

由于地圖瓦片是按行列進行的，所以預加載的方式應該以瓦片行列的形式體現，以當前視圖范圍向外多請求一定的行列數。

預加載行列的設置可以通過配置的方式實現，這樣不僅可以提高程序的可伸縮性和擴展性，而且可以便于在性能測試的時候針對不同性能配置的客戶端設置不同預加載行列數。

3 結語

該文介紹了一種WEB GIS地圖顯示優化的方法，該方法可以提高瓦片的加載速度、減少服務器的壓力，并通過地圖瓦片預加載的方式減少地圖瀏覽器時的地圖空白。目前該方法已經在多個實際項目中進行了應用，提供了良好的地圖顯示體驗，得到了用戶的一致認可。

參考文獻

[1]陳俊，宮鵬.實用地理信息系統——成功地理信息系統的建設與管理[M].北京：科學出版社，1998.

[2]陳述彭，魯學軍，周成虎.地理信息系統導論[M].北京：科學出版社，1999.

[3]承繼成，李琦，易善楨.國家空間信息基礎設施與數字地球[M].北京：清華大學出版社，1999.

[4]龔健雅，當代GIS的若干理論與技術[M].武漢：武漢測繪大學出版社，1999.

[5]郭德方，郭仁中.遙感圖像的計算機處理和模式識別，北京，電子工業出版社，1987.