文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/