(二十一)WebGIS中鷹眼的實現思路

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

1.背景

鷹眼功能是WebGIS中的一種常見功能，利用一些開源的框架實現起來很是方便。固然，按照博主從底層談WebGIS這套系列的風格，在這裏仍是跟你們一塊兒探討探討不借助第三方框架開發鷹眼的簡單實現思路。

2.鷹眼功能分析

                       

3.實現思路設計

3.1主圖平移時與鷹眼圖的聯動

a.主圖進行平移時，在平移完成後拋出地圖平移事件，該事件中包含真實平移地理長度（GeoPanX,GeoPanY）參數。

b.鷹眼圖監聽到該平移事件，獲取到平移地理長度後，換算出此時對應鷹眼地圖的平移屏幕座標（screenPanX,screenPanY），與鷹眼地圖canvas的XY座標進行相加，實現鷹眼地圖的聯動。

c.鷹眼地圖平移超出緩存瓦片範圍時，須要從新獲取瓦片。

3.2主圖縮放時鷹眼圖範圍重繪

a.主圖縮放時會拋出地圖縮放事件，該事件中會包含此時主圖屏幕範圍對應的真實地理範圍參數（GeoScreenLeft,GeoScreenTop,GeoScreenRight,GeoScreenBottom）以及此時的地圖級別（maplevel）。

b.鷹眼圖監聽該縮放事件，獲取到此時主圖的真實地理範圍，以及主圖地圖級別。

c.判斷此時主圖級別是否知足繪製主圖返回的參數設置，若是知足，則在鷹眼中繪製此時的主圖範圍。

d.將此時的主圖地理範圍座標轉換爲鷹眼上的屏幕座標，在鷹眼上進行繪製。

3.3鷹眼範圍框拖拽是主圖聯動

a.鷹眼的範圍框監聽鼠標事件，響應拖拽操做。

b.範圍框拖拽完畢後，會將拖拽的真實地理長度（eagleGeoPanX,eagleGeoPanY）以參數的形式隨同鷹眼平移事件一塊兒被觸發。

c.主圖監聽鷹眼平移事件，獲取到鷹眼真實平移地理長度後進行換算成與主圖對應的屏幕平移座標，對主圖進行平移。

d.主圖平移後，再次觸發主圖平移事件，如3.1中流程所描述，最後鷹眼也會進行平移聯動。

3.4注意事項

a.鷹眼上地圖不能相應鼠標事件（縮放、平移）。

b.鷹眼上的範圍框顏色應該能夠定製。

4.成果展現

 

 

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