隨筆檔案

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

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

??????這也是很多的朋友在群里和論壇里經(jīng)常問(wèn)到的問(wèn)題，也因?yàn)樽罱容^忙都只是做了簡(jiǎn)單的交流，今天抽空在這里把這個(gè)問(wèn)題分析一下，我想上面三個(gè)問(wèn)題也就自己解開(kāi)了。

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

??????下面我們來(lái)理解幾個(gè)更為重要的概念，主要是MapModel這個(gè)地圖核心對(duì)象的幾個(gè)屬性：

??????1. MapModel.bound 表示地圖的坐標(biāo)范圍
??????它為地圖指定了一個(gè)參考坐標(biāo)范圍，其他一些帶有坐標(biāo)信息的概念都是以它作為參考，如點(diǎn)（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對(duì)象的含義），有一個(gè)標(biāo)注的坐標(biāo)為(-180e16, 90e16)，即new Marker(new Point(-180, 90)) ，很容易看出在這個(gè)地圖坐標(biāo)系范圍中此標(biāo)注在地圖的最左上角。自然這個(gè)標(biāo)注在顯示時(shí)位置也就在地圖的最左上角。

??????2. MapModel.firstZoomTileNum 表示地圖在客戶(hù)端顯示時(shí)在第一個(gè)級(jí)別所分成的瓦片數(shù)。
??????這個(gè)值一般是一個(gè)平方數(shù)，因?yàn)槟J(rèn)地圖為正方形。如MapModel.firstZoomTileNum = 121表示在第一個(gè)級(jí)別會(huì)分成121和瓦片來(lái)顯示，即11行11列的瓦片組成的二元矩陣。

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

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

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

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

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

??????A1,A2,B1,B2即為4個(gè)瓦片，顯然A1顯示(-100,0,0,100)范圍的地圖，A2顯示(0,100,0,100)范圍，B1顯示(-100,0,-100,0)范圍，B2顯示(0,100,-100,0)范圍。這個(gè)時(shí)候我們可以結(jié)合理解row,column的概念，其實(shí)這四個(gè)代號(hào)中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時(shí)，并MapModel.scalePara=2即放大比例為2時(shí)，顯然圖片的長(zhǎng)和寬都變?yōu)樵瓉?lái)的一倍，而整個(gè)地圖的面積就變成了原來(lái)的四倍。這個(gè)時(shí)候MapEasy會(huì)用四倍的瓦片數(shù)量來(lái)顯示地圖，如上面舉的例子就變成如下顯示：

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

??????注:這里的ABCDEF并沒(méi)有任何含義，只是代號(hào)而已。

??????這個(gè)時(shí)候C1顯示(-100,-50,50,100)范圍地圖,而C2顯示(-50,0,50,100),依次類(lèi)推，見(jiàn)下表：

??????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)

??????可以看出原來(lái)由一個(gè)瓦片A1顯示的部分，現(xiàn)在由C1,C2,D1,D2四個(gè)瓦片共同顯示，其他類(lèi)推。

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

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

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

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