文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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
如果我們留戀，或者感到遺憾，都是因為我們害怕讓我們留戀的遺憾的東西，不會再次經歷。
而經歷是可以通過汗水創造的。我們要做的不是去害怕，而是去創造。