(十五)WebGIS中平移功能的設計和實現

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1.前言

這一章咱們將詳細講解WebGIS工具欄中另外一個基礎工具——平移工具（Pan）。在介紹命令模式時，咱們已經知道了此工具爲Tool型的。

這個工具主要有以下兩個功能：

A.當切換到此工具上時，按下鼠標不放，移動鼠標時能夠拖動地圖。

B.當切換到此工具上時，點擊鼠標（鼠標不作平移），可使地圖平移，以點擊處爲中心。

2.設計

2.1 原理

咱們已經知道，WebGIS中圖層的本質是Canvas。平移效果的實現，其實質就是改變各Canvas的左上角座標。

這裏我給出示意圖：

                       

2.2提一個問題

當我把柵格圖層所對應的canvas也平移後（事實上，全部的柵格canvas都是一個母容器（mapCanvas）中的child，平移是直接操做mapCanvas），此時咱們再將屏幕地理範圍內的瓦片請求回來時，貼到已經平移後的canvas上，會不會出現瓦片顯示錯亂呢？

答案是：不會的。下面，我大體講一下緣由。

在咱們作平移時，咱們不是簡單的只對canvas的原點作了平移，咱們同時還會更具平移大小換算出真實的地理平移，而後對實際的屏幕地理範圍進行相應的改變。這樣便會致使一個這樣的結果：加入柵格圖層的canvas原點是A，平移後變成了A1，而平移後從新請求的瓦片，其每一個瓦片的原點所對應的即是A1，而再也不是A。這樣，咱們便解決了平移柵格圖層後，從新請求瓦片而致使的瓦片錯亂問題。

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表示地圖當前級別中一個瓦片所表明的實際地理長度，tileSize表示的是一張瓦片的屏幕像素。

3.實現

3.1 拖拽平移的實現

A．當鼠標觸發mouseDown事件時，給全局變量flag賦值true，表示鼠標已經點下，記錄下startPoint。

B．當鼠標觸發mouseMove事件時，判斷flag是否爲true，若是是，調用平移公式，使圖層出現移動，算出屏幕像素的移動mouseX和mouseY。

這裏還能夠繼續擴展，若是有其餘圖層或者功能須要監聽到地圖平移時間，能夠拋出一個地圖平移事件，拋出的參數能夠設置爲此時鼠標所在的地理座標（經過鼠標的屏幕座標轉換而得），以及鼠標平移的地理長度（經過mouseX和mouseY轉換而得）。屏幕座標與地理座標的轉換能夠參考這個系列的第十章。

C．當鼠標觸發mouseUp事件時，判斷屏幕地理範圍加上移動的地理長度後，是否在整個瓦片請求的容差範圍內，若是在的話不用觸發瓦片請求；若是不在的話，則需觸發瓦片請求。請求參數即爲目前的屏幕地理範圍加上容差範圍。

3.2 點擊平移的實現

A.當鼠標觸發mouseDown事件時，給全局變量isClick賦值true,其餘操做同上。

B.當鼠標觸發mouseMove事件時，則將此isClick參數賦值false。

C.當鼠標觸發mouseClick事件時，判斷isClick是否爲true，若是是true，則將地圖平移到以startPoint爲中心的地方。

4. 提兩個問題

A．在地圖平移後，矢量圖層的canvas的XY都發生了變化，此時根據地理座標轉換爲屏幕座標公式得出的屏幕座標，在canvas上能將要素正確顯示嗎？

B．矢量圖層canvas的原點座標XY有須要還原成初始的（0,0）的時候嗎？

5.總結

對於第四節中的兩個問題，我給出的答案分別是：不能和須要。解答這兩個問題，咱們必須將以前給出的地理座標與屏幕座標互轉換公式和今天咱們講到的平移公式合起來看，才能作很好的回答。這個內容咱們將在下一章專門進行講解。歡迎你們持續關注。

 

                                                           -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                  若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 

everybody,good night.