隨筆檔案

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

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

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

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

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

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

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

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

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

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

??????
??????我想理解了上面幾個概念要回答那三個甚至是相關(guān)的問題都不會太難，首先我們來分析問題一：請問level不同時如何分割圖片，是否根據(jù)坐標(biāo)來？ MapEasy這種地圖顯示方式就是把地圖分成一個個大小相等小的瓦片，我們可以把的地圖看作是又我們生成的這些瓦片所拼接起來，其實一個瓦片在瀏覽器中就是一個DIV，里面包含一個圖片。我們舉一個比較典型的例子來說明。
?????
??????如果地圖坐標(biāo)范圍為(-100,100,-100,100)，我們把它看左一個長寬均為200的大圖片，我們設(shè)置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)范圍。這個時候我們可以結(jié)合理解row,column的概念，其實這四個代號中A,B即代表row，下標(biāo)1，2即代表column。

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

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

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

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

???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顯示的部分，現(xiàn)在由C1,C2,D1,D2四個瓦片共同顯示，其他類推。

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

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

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

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