（八）WebGIS中柵格圖層的設計

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1.    前言

咱們在上一章裏瞭解到WebGIS中柵格圖層的本質——地圖圖片。而從以前的第二章到第五章，咱們詳細的介紹了地圖圖片的獲取原理和方法。因此在設計柵格圖層前，咱們已經知道了柵格圖層中數據是如何得到的，剩下的即是怎樣將這個過程用一種符合面向對象的設計原則來進行實現。

2.柵格數據得到的流程

這裏我再次將柵格數據得到的流程描述一遍：

首先，獲得屏幕範圍內的地圖四角座標，根據此四角座標算出屏幕範圍內地圖最靠近的地圖級別，以及此時瓦片的行號範圍以及列號範圍，而後按照行號和列號拼接出瓦片請求，進行瓦片加載。最後將獲得的瓦片按照順序拼接成一整塊地圖，進而在前端顯示出來。

3.實際中的問題

設計前咱們提出這樣一個問題：

咱們柵格數據的來源可能有不少種，好比在線地圖和離線地圖。同時，在線地圖多是由不一樣的請求方式而得到的數據，離線地圖也一樣多是來自於不一樣的切圖格式。

咱們自己是不能肯定用戶使用哪種數據來源，或者用戶是否會中途改變數據來源。

4.思路

仔細分析上面提出的問題，結合面向對象設計中的繼承、封裝、多態三個特性，咱們能夠抽象出這樣的一種設計思路：

（1）設計一個類，此類爲全部的柵格圖層最高的父類——BaseLayer。在該類中定義一些全部類皆須要的要素，同時提供最基礎的方法，好比事件監聽方法。

（2）設計一個過分的類——ImageLayer，此類繼承於BaseLayer，可是在此類中對部分共同的方法進行實現。好比瓦片的請求中，行號和列號是每一種柵格圖層均須要有的，而且瓦片的拼接方式也是通用的。因此由這幾個共同點，能夠定義一些與此相關的方法。

（3）設計具體的柵格圖層類，好比設計針對於ArcGIS在線地圖的類、針對於超圖在線地圖的類、針對於WMS請求方式的類等等。而這些具體類均繼承於ImageLayer。

5.UML圖

根據第4節中的思路，咱們這裏給出一種柵格圖層的設計方式：

 

6.對柵格圖層設計的詳解

從UML圖中能夠看出，咱們首先提煉出了每種瓦片圖層所共有的一個基類，即BaseLayer，在這個基類中包括了組成每一種圖層所必須有的幾個屬性，例如瓦片圖層的本質-Canvas,以及每個瓦片圖層的幾何邊境範圍還有對地圖事件的監聽和移除方法等。

而全部瓦片圖層涉及到的核心算法，即獲取瓦片的行列號、瓦片在屏幕中的座標等均是首先在繼承於BaseLayer中的ImageLayer裏進行定義以及部分共同算法的編寫。其中getMapByGeoExtent是核心的算法，此算法的功能是將範圍內的瓦片的url進行換算以及經過url進行瓦片請求和加載。

每個具體的瓦片圖層類均是直接繼承於ImageLayer，而後在具體瓦片圖層中實現對瓦片行列號的換算，以及瓦片的URL的換算。在地圖加載事件觸發後，進行execTileRequest方法進而調用基類父類ImageLayer中的geoMapByExtent方法。

7.優化柵格圖層的設計

 根據柵格圖層設計的原理，能夠在兩個方面進行優化。一個是瓦片請求時，請求的地圖範圍的優化；一個是對請求獲得的瓦片按照必定的規則緩存到內存中。

7.1瓦片請求範圍的優化

若是地圖每次只請求屏幕範圍內的瓦片，那麼每當地圖平移被觸發就會進行瓦片請求，這樣會讓前端常常處於瓦片請求狀態。可是一樣，瓦片請求的範圍也不能過大，過大會形成請求瓦片時用戶等待時間成正比。因此，在屏幕範圍外設置一個合理的緩存範圍，使每次請求時請求的地圖範圍爲屏幕範圍加上緩存範圍之和。（screenBoundary+toleranceBoundary）是很必要的。

7.2瓦片的緩存

若是每次請求的瓦片均須要從服務器或者瀏覽器的瓦片緩存中獲取，這勢必將延長前端地圖的展示時間，若是能直接將瓦片緩存到內存中，而後遇到相同瓦片時直接從內存中讀取，這比上述兩種方式都要快，能加快前端地圖的顯示。可是一樣，瓦片不能緩存太多，這樣對內存來講負荷太大，而且不少瓦片用過一次後，可能後來很長時間都不會用到，因此須要用必定的調度規則以及合理的內存容器大小來放置和管理瓦片。

8.優化的實現

8.1請求範圍優化的實現

在實際項目中，有的項目是默認在屏幕範圍所對應的瓦片範圍上，另外在四周擴充一個或多個瓦片的寬度範圍。而有的項目，對此不作任何處理，由於咱們實際上得到的瓦片範圍，其自己就是大於屏幕所對應的地理範圍的。

對於想人爲擴充一個或多個瓦片寬度範圍的讀者，能夠在本系列第三章中，計算瓦片實際起始號時，人爲的將瓦片起始號進行變更。在變更瓦片起始號後，後面計算出來的請求瓦片的實際地理範圍等參數均需做出相關調整。

固然，最簡單的是不人爲作此優化，由於如我上面所說，咱們經過公式算出來的瓦片範圍自己就是比屏幕地理範圍要大的。優化在基本算法中就已經實現了。

8.2瓦片緩存機制的實現

咱們能夠定義一個大小固定的容器，其中內容是經過鍵值對來存儲。每一個瓦片的URL是獨一無二的，能夠當作Key。而容器中瓦片的調度規則爲使用頻率排序加先進先出原則。詳細流程以下：

（1）容器中新添加的瓦片放在全部瓦片的上面，Max(index)。

（2）容器中被調用的瓦片從新放在全部瓦片的上面（Max(index)），而其餘瓦片均自動向前進一位（index-1）

（3）當容器裝滿時，將最低層的瓦片刪除，即index爲0的瓦片被刪除。

9.總結

基於以前章節的知識，咱們在這一章裏沒有多描述柵格數據的獲取原理和方法，而是把重點都放在了柵格圖層的設計上面，在最後咱們介紹了兩個優化柵格圖層設計的思路。柵格圖層做爲WebGIS中地形圖的顯示核心，設計一個好的柵格圖層組織方式是相當重要的，不然會照成地形圖顯示過慢，或者不能很好的支持多種地形圖來源。而且若是設計的不合理，會照成大量的代碼冗餘，致使任何擴展或者維護均會很是困難。固然，這裏給出的這種設計框架確定不是最好的，但願我能給讀者拋磚迎玉。下一章開始，要開始連續幾個篇章來說解矢量圖層的設計了。我會從矢量圖層的數據來源、座標轉換和最後的設計實現來跟你們一塊兒全面的探索WebGIS中的矢量圖層。歡迎你們持續關注。

                                                                                      ------歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS

 

 

若是咱們留戀，或者感到遺憾，都是由於咱們懼怕讓咱們留戀的遺憾的東西，不會再次經歷。

而經歷是能夠經過汗水創造的。咱們要作的不是去懼怕，而是去創造。