文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：

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.成果展示

 

 

                                                             -----欢迎转载，但保留版权，请于明显处标明出处：