文章版權(quán)由作者李曉暉和博客園共有，若轉(zhuǎn)載請于明顯處標(biāo)明出處：http://www.cnblogs.com/naaoveGIS/。

1.前言

這一章我們將詳細(xì)講解WebGIS工具欄中另一個(gè)基礎(chǔ)工具——平移工具（Pan）。在介紹命令模式時(shí)，我們已經(jīng)知道了此工具為Tool型的。

這個(gè)工具主要有如下兩個(gè)功能：

A.當(dāng)切換到此工具上時(shí)，按下鼠標(biāo)不放，移動鼠標(biāo)時(shí)可以拖動地圖。

B.當(dāng)切換到此工具上時(shí)，點(diǎn)擊鼠標(biāo)（鼠標(biāo)不做平移），可以使地圖平移，以點(diǎn)擊處為中心。

2.設(shè)計(jì)

2.1 原理

我們已經(jīng)知道，WebGIS中圖層的本質(zhì)是Canvas。平移效果的實(shí)現(xiàn)，其實(shí)質(zhì)就是改變各Canvas的左上角坐標(biāo)。

這里我給出示意圖：

? ? ? ? ? ? ? ? ? ? ? ?

2.2提一個(gè)問題

當(dāng)我把柵格圖層所對應(yīng)的canvas也平移后（事實(shí)上，所有的柵格canvas都是一個(gè)母容器（mapCanvas）中的child，平移是直接操作mapCanvas），此時(shí)我們再將屏幕地理范圍內(nèi)的瓦片請求回來時(shí)，貼到已經(jīng)平移后的canvas上，會不會出現(xiàn)瓦片顯示錯(cuò)亂呢？

答案是：不會的。下面，我大致講一下原因。

在我們做平移時(shí)，我們不是簡單的只對canvas的原點(diǎn)做了平移，我們同時(shí)還會更具平移大小換算出真實(shí)的地理平移，然后對實(shí)際的屏幕地理范圍進(jìn)行相應(yīng)的改變。這樣便會導(dǎo)致一個(gè)這樣的結(jié)果：加入柵格圖層的canvas原點(diǎn)是A，平移后變成了A1，而平移后重新請求的瓦片，其每個(gè)瓦片的原點(diǎn)所對應(yīng)的便是A1，而不再是A。這樣，我們便解決了平移柵格圖層后，重新請求瓦片而導(dǎo)致的瓦片錯(cuò)亂問題。

2.3 平移公式

mapCanvas.y=mapCanvas.y+moveY;

mapCanvas.x=mapCanvas.x+moveX;

screenGeoBounds.bottom=screenGeoBounds.bottom+(sliceLevelLength/tileSize)*(moveY);

screenGeoBounds.top=screenGeoBounds.top+(sliceLevelLength/tileSize)*(moveY);

screenGeoBounds.left=screenGeoBounds.left-(sliceLevelLength/tileSize)*(moveX);

screenGeoBounds.right=screenGeoBounds.right-(sliceLevelLength/tileSize)*(moveX);

其中，mapCanvas表示（柵格或矢量）圖層,screenGeoBounds表示屏幕地理范圍，slieceLevelLength表示地圖當(dāng)前級別中一個(gè)瓦片所代表的實(shí)際地理長度，tileSize表示的是一張瓦片的屏幕像素。

3.實(shí)現(xiàn)

3.1 拖拽平移的實(shí)現(xiàn)

A．當(dāng)鼠標(biāo)觸發(fā)mouseDown事件時(shí)，給全局變量flag賦值true，表示鼠標(biāo)已經(jīng)點(diǎn)下，記錄下startPoint。

B．當(dāng)鼠標(biāo)觸發(fā)mouseMove事件時(shí)，判斷flag是否為true，如果是，調(diào)用平移公式，使圖層出現(xiàn)移動，算出屏幕像素的移動mouseX和mouseY。

這里還可以繼續(xù)擴(kuò)展，如果有其他圖層或者功能需要監(jiān)聽到地圖平移時(shí)間，可以拋出一個(gè)地圖平移事件，拋出的參數(shù)可以設(shè)置為此時(shí)鼠標(biāo)所在的地理坐標(biāo)（通過鼠標(biāo)的屏幕坐標(biāo)轉(zhuǎn)換而得），以及鼠標(biāo)平移的地理長度（通過mouseX和mouseY轉(zhuǎn)換而得）。屏幕坐標(biāo)與地理坐標(biāo)的轉(zhuǎn)換可以參考這個(gè)系列的第十章。

C．當(dāng)鼠標(biāo)觸發(fā)mouseUp事件時(shí)，判斷屏幕地理范圍加上移動的地理長度后，是否在整個(gè)瓦片請求的容差范圍內(nèi)，如果在的話不用觸發(fā)瓦片請求；如果不在的話，則需觸發(fā)瓦片請求。請求參數(shù)即為目前的屏幕地理范圍加上容差范圍。

3.2 點(diǎn)擊平移的實(shí)現(xiàn)

A.當(dāng)鼠標(biāo)觸發(fā)mouseDown事件時(shí)，給全局變量isClick賦值true,其他操作同上。

B.當(dāng)鼠標(biāo)觸發(fā)mouseMove事件時(shí)，則將此isClick參數(shù)賦值false。

C.當(dāng)鼠標(biāo)觸發(fā)mouseClick事件時(shí)，判斷isClick是否為true，如果是true，則將地圖平移到以startPoint為中心的地方。

4. 提兩個(gè)問題

A．在地圖平移后，矢量圖層的canvas的XY都發(fā)生了變化，此時(shí)根據(jù)地理坐標(biāo)轉(zhuǎn)換為屏幕坐標(biāo)公式得出的屏幕坐標(biāo)，在canvas上能將要素正確顯示嗎？

B．矢量圖層canvas的原點(diǎn)坐標(biāo)XY有需要還原成初始的（0,0）的時(shí)候嗎？

5.總結(jié)

對于第四節(jié)中的兩個(gè)問題，我給出的答案分別是：不能和需要。解答這兩個(gè)問題，我們必須將之前給出的地理坐標(biāo)與屏幕坐標(biāo)互轉(zhuǎn)換公式和今天我們講到的平移公式合起來看，才能做很好的回答。這個(gè)內(nèi)容我們將在下一章專門進(jìn)行講解。歡迎大家持續(xù)關(guān)注。

?

??????????????????????????????????????????????? ?????????? -----歡迎轉(zhuǎn)載，但保留版權(quán)，請于明顯處標(biāo)明出處：http://www.cnblogs.com/naaoveGIS/

????????????????????????????????????????????????????????????????? 如果您覺得本文確實(shí)幫助了您，可以微信掃一掃，進(jìn)行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

?

everybody,good night.

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的(十五)WebGIS中平移功能的设计和实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。