隨筆檔案

?????作者：施偉，原文出處： http://www.tkk7.com/crespo9907/archive/2007/03/02/mapeasy_answer3_level_row_column.html，轉載請保留。
??????
???????cyg_gis在我的博里留言，問到如下三個問題：

??????1.請問level不同時如何分割圖片，是否根據坐標來？?
??????2.level變動時，function NewMapType() {}函數如何實現？?
??????3.可否說說MapEasy的執(zhí)行流程。?

??????這也是很多的朋友在群里和論壇里經常問到的問題，也因為最近比較忙都只是做了簡單的交流，今天抽空在這里把這個問題分析一下，我想上面三個問題也就自己解開了。

??????首先需要搞清楚row,column,level分別是什么意思，我想大家英文對付它們應該綽綽有余，呵呵。row表示行、column表示列而level表示級別，在MapEasy中row表示瓦片（tile）所在的行數、column表示瓦片所在的列數而level表示地圖縮放的級別。

??????下面我們來理解幾個更為重要的概念，主要是MapModel這個地圖核心對象的幾個屬性：

??????1. MapModel.bound 表示地圖的坐標范圍
??????它為地圖指定了一個參考坐標范圍，其他一些帶有坐標信息的概念都是以它作為參考，如點（Point）、地物標注（Marker）等。如設置當前坐標范圍為(-180e16, 180e16, -90e16, 90e16)，即MapModel.bound = new Bound(-180e16, 180e16, -90e16, 90e16)（在這里默認你已經了解Bound對象的含義），有一個標注的坐標為(-180e16, 90e16)，即new Marker(new Point(-180, 90)) ，很容易看出在這個地圖坐標系范圍中此標注在地圖的最左上角。自然這個標注在顯示時位置也就在地圖的最左上角。

??????2. MapModel.firstZoomTileNum 表示地圖在客戶端顯示時在第一個級別所分成的瓦片數。
??????這個值一般是一個平方數，因為默認地圖為正方形。如MapModel.firstZoomTileNum = 121表示在第一個級別會分成121和瓦片來顯示，即11行11列的瓦片組成的二元矩陣。

??????3. MapModel.scalePara 表示地圖每一層縮放之間的縮放比例
??????這個比較容易理解，如果MapModel.scalePara=2，那么每個級別之間就以2倍的比例放大或者縮小。

??????4. MapModel.tileSize 表示每個瓦片的尺寸大小，單位為象素
??????如MapModel.tileSize=256，那么瓦片即為256*256的DIV，地圖圖片相應也為256*256。注意此處單位為象素。

??????5. MapModel.maxZoomLevel 表示地圖能放大的最大級別
??????如MapModel.maxZoomLevel=5，那么地圖能放大的最大級別為5，相應在滑塊工具上你也只能看到放大到5。

??????
??????我想理解了上面幾個概念要回答那三個甚至是相關的問題都不會太難，首先我們來分析問題一：請問level不同時如何分割圖片，是否根據坐標來？ MapEasy這種地圖顯示方式就是把地圖分成一個個大小相等小的瓦片，我們可以把的地圖看作是又我們生成的這些瓦片所拼接起來，其實一個瓦片在瀏覽器中就是一個DIV，里面包含一個圖片。我們舉一個比較典型的例子來說明。
?????
??????如果地圖坐標范圍為(-100,100,-100,100)，我們把它看左一個長寬均為200的大圖片，我們設置MapModel.firstZoomTileNum=4，即在第一級用4個瓦片來顯示，顯示如下：

??????A1 A2
??????B1 B2

??????A1,A2,B1,B2即為4個瓦片，顯然A1顯示(-100,0,0,100)范圍的地圖，A2顯示(0,100,0,100)范圍，B1顯示(-100,0,-100,0)范圍，B2顯示(0,100,-100,0)范圍。這個時候我們可以結合理解row,column的概念，其實這四個代號中A,B即代表row，下標1，2即代表column。

??????為方便閱讀把圖片與地圖范圍列表如下：

??????A1－(-100,0,0,100)
??????A2－(0,100,0,100)

??????B1－(-100,0,-100,0)
??????B2－(0,100,-100,0)

??????同樣舉最典型的例子當地圖由level=1變?yōu)閘evel=2時，并MapModel.scalePara=2即放大比例為2時，顯然圖片的長和寬都變?yōu)樵瓉淼囊槐叮麄€地圖的面積就變成了原來的四倍。這個時候MapEasy會用四倍的瓦片數量來顯示地圖，如上面舉的例子就變成如下顯示：

???C1 C2 C3 C4
???D1 D2 D3 D4
???E1? E2 E3 E4
???F1? F2 F3 F4

??????注:這里的ABCDEF并沒有任何含義，只是代號而已。

??????這個時候C1顯示(-100,-50,50,100)范圍地圖,而C2顯示(-50,0,50,100),依次類推，見下表：

??????C1－(-100,-50,50,100)
??????C2－(-50,0,50,100)
??????C3－(0,50,50,100)
??????C4－(50,100,50,100)

??????D1－(-100,-50,0,50)
??????D2－(-50,0,0,50)
??????D3－(0,50,0,50)
??????D4－(50,100,0,50)

??????E1－(-100,-50,-50,0)
??????E2－(-50,0,-50,0)
??????E3－(0,50,-50,0)
??????E4－(50,100,-50,0)

??????F1－(-100,-50,-100,-50)
??????F2－(-50,0,-100,-50)
??????F3－(0,50,-100,-50)
??????F4－(50,100,-100,-50)

??????可以看出原來由一個瓦片A1顯示的部分，現在由C1,C2,D1,D2四個瓦片共同顯示，其他類推。

??????當level不同時MapEasy就是這樣分割圖片來形成瓦片顯示的，我想第一個問題應該解決了吧。下面我們來看第二個問題：level變動時，function NewMapType() {}函數如何實現？在自定義一個新的地圖類型時，主要就是需要重載getSrc()方法來跟特定的地圖服務器配合取得對應瓦片的圖片數據。這個在以前也討論過，getSrc方法通過level, row, column三個參數來確定現在需要請求哪個瓦片的圖片數據。即表示在level級別下第row行第column列的瓦片地圖數據的地址(在MapEasy中row,column的索引是從0開始的)。再結合第一個問題的解釋第二個問題也就自然不成問題了。如上面的例子當level為1第二行第二列的瓦片圖片數據為B2即(0,100,-100,0)范圍的圖片數據，二當level為2時同樣第二行第二列的瓦片圖片數據為D2即(-50,0,0,50)的圖片數據。

??????不管你的地圖服務器(或者稱為數據源)是使用按圖片名稱編好號碼的靜態(tài)圖片還是動態(tài)的WMS服務等，都沒有任何關系，按照上面的規(guī)律實現getSrc方法按對應的level,row,column取得對應的地圖數據就可以享受MapEasy帶來的樂趣了。如果你知道了這些還問我怎么去取圖片呢，那我只能說仁者見仁，智者見智。呵呵

??????對于第三個問題，我能說的就是在開源項目文檔不全的客觀條件下，靜下心來研讀一遍代碼是最好的方法。MapEasy的代碼即使在JavaScript基礎不是太好的情況下我想抽一個星期的空余時間應該可以完整的讀一遍了。不知道我這樣回答cyg_gis兄是否能滿意，不過這確實是肺腑直言，讀源代碼才是王道，強烈推薦！

??????確實有好多好多的朋友提到這幾個相關的問題，希望這篇文章能幫大家一解困惑，共同享受MapEasy！