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

標籤：blog   http   ar   sp   strong   on   2014   art   問題   

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.

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