解说GIS功能模块实现之前，先大概说一下flexviewer的核心配置文件config.xml，系统额GIS功能widget菜单布局、系统的样式、地图资源等等都是在这里配置的，这里对flexviewer不熟悉的朋友，要先去flexviewer官网了解或者网上的其它资源了解才行;
鹰眼模块在config.xml文件的配置例如以下：
<widget right="0" bottom="0" config="widgets/OverviewMap/OverviewMapWidget.xml" url="widgets/OverviewMap/OverviewMapWidget.swf" />
当中，right。left，bottom。top就是widget模块在界面的显示的位置，config是指widget模块的配置xml资源。url是指widget模块的路径。一般来说，一个widget要配置一下xml。方便这个widget读取一些配置文件xml资源。当然，xml也能够为空，widget也能够读取其它路径的xml资源。
源码文件夹例如以下：
鹰眼模块的源码原理解析，具体的鹰眼模块的代码在下载的开源flexviewer自带的：
（1）OverviewMapWidget.xml文件：
<?
xml version="1.0"?
>
<configuration> <initialstate>closed</initialstate> //默认的鹰眼窗体是不显示的状态 </configuration>（2） OverviewMapWidget.mxml文件。显示在主界面的鹰眼菜单：
xmlns:OverviewMap="widgets.OverviewMap.*" //为了引用自己定义的鹰眼组件
<OverviewMap:OverviewMapComponent id="overviewMap"/> //引用自己定义的鹰眼组件
init初始化载入函数（ init初始化函数主要是赋值一些地图对象map以及一些鹰眼控件的属性信息）：
overviewMap.expansionDirection=ExpansionDirection.UP_LEFT或ExpansionDirection.DOWN_LEFT或ExpansionDirection.UP_RIGHT或ExpansionDirection.DOWN_RIGHT（左上、左下、右上、右下方向）。默认是ExpansionDirection.DOWN_RIGHT；
overviewMap.openDefaultToolTip = getDefaultString("openToolTip"); //设置鹰眼打开时候显示的tooltip
overviewMap.closeDefaultToolTip = getDefaultString("closeToolTip"); //设置鹰眼关闭时候显示的tooltipoverviewMap.configData = configData;//获取flexviewer框架的全局数据configData
if (configXML) { overviewMap.configXML = configXML; //获取flexviewer框架的config.xml配置的信息，主要是地图信息 } overviewMap.map = map; //地图对象赋值（3）OverviewMapComponent.mxml文件，核心的实现鹰眼功能的组件
代码核心的部分列举一下：
1、地图对象map定义，方便从OverviewMapWidget.mxml传值map对象过来
private var _map:Map;
[Bindable]
public function get map():Map { return _map; }
public function set map(value:Map):void
{ _map = value; if (_map) { if (map.loaded) //推断map对象是否已经载入了没 { startTrackingIfMapsLoaded(); //map对象载入进来之后，開始跟踪map对象变化状态，比方缩放时候，鹰眼相应的也缩放等； } else //没有载入的话，又一次载入地图map { map.addEventListener(MapEvent.LOAD, map_loadHandler); } } }/
private function startTrackingIfMapsLoaded():void
{ if (map && map.loaded && overviewMap && overviewMap.loaded)//map对象和鹰眼地图overviewMap同一时候存在的情况下运行 { map.addEventListener(ExtentEvent.EXTENT_CHANGE, map_extentChangeHandler);//监听map地图范围变化事件 overviewMap.addEventListener(MouseEvent.ROLL_OUT, overviewMap_mouseRollOutHandler); overviewGraphic.addEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);//监听鼠标左键鹰眼图画矩形框事件updateOverviewExtentFromMap();//更新鹰眼地图范围的事件
overviewMap.defaultGraphicsLayer.add(overviewGraphic);//画矩形框的graphic加入到鹰眼地图
} }2、画矩形框而且拖动矩形框的几个鼠标事件函数:
private function overviewGraphic_mouseDownHandler(event:MouseEvent):void //鼠标按下開始画
{ overviewGraphic.removeEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler); overviewMap.addEventListener(MouseEvent.MOUSE_UP, overviewMap_mouseUpHandler);//鼠标松开监听事件 overviewMap.addEventListener(MouseEvent.MOUSE_MOVE, overviewMap_mouseMoveHandler);//鼠标移动监听事件var mouseMapPoint:MapPoint = overviewMap.toMapFromStage(event.stageX, event.stageY);//屏幕坐标转换地图坐标
lastMouseMapX = mouseMapPoint.x; //获取到鼠标按下位置的点 lastMouseMapY = mouseMapPoint.y; }
private function overviewMap_mouseUpHandler(event:MouseEvent):void //鼠标松开，结束画矩形框
{ overviewMap.removeEventListener(MouseEvent.MOUSE_MOVE, overviewMap_mouseMoveHandler); overviewMap.removeEventListener(MouseEvent.MOUSE_UP, overviewMap_mouseUpHandler); overviewGraphic.addEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);if (hasOverviewGraphicBeenMoved)
{ hasOverviewGraphicBeenMoved = false; updateMapExtentFromOverview(); } }
private function overviewMap_mouseMoveHandler(event:MouseEvent):void //画矩形框的过程中事件
{ hasOverviewGraphicBeenMoved = true;var overviewPolygon:Polygon = overviewGraphic.geometry as Polygon;
var mouseMapPoint:MapPoint = overviewMap.toMapFromStage(event.stageX, event.stageY); var deltaMapX:Number = mouseMapPoint.x - lastMouseMapX; var deltaMapY:Number = mouseMapPoint.y - lastMouseMapY; lastMouseMapX = mouseMapPoint.x; lastMouseMapY = mouseMapPoint.y;var ring:Array = overviewPolygon.removeRing(0)[0];
for (var iMapPoint:int = 4; iMapPoint >= 0; iMapPoint--) { ring[iMapPoint].x += deltaMapX; ring[iMapPoint].y += deltaMapY; } overviewPolygon.addRing(ring);overviewGraphic.refresh();
}3、地图范围变化函数
private function map_extentChangeHandler(event:ExtentEvent):void
{ updateOverviewExtentFromMap(); }private function updateOverviewExtentFromMap():void
{ overviewMap.extent = map.extent.expand(3);//底图和鹰眼地图的不同范围设置 overviewGraphic.geometry = map.visibleArea;//画的矩形框几何属性 overviewGraphic.visible = overviewMap.extent.contains(overviewGraphic.geometry); //画的矩形框的可见范围 }
4._configXML属性定义，主要是为了使鹰眼地图可以载入从config.xml配置文件获取到的layer。OverviewMapWidget.mxml传值configXML对象过来
private var _configXML:XML;
public function get configXML():XML
{ return _configXML; }public function set configXML(value:XML):void
{ _configXML = value;if (configXML)
{ openToolTip = configXML.labels.opentooltip || openDefaultToolTip; closeToolTip = configXML.labels.closetooltip || closeDefaultToolTip;var layerToAdd:Layer;
if (configXML.layer[0])//推断config.xml配置文件是否存在layer { useBaseMapLayer = false; layerToAdd = LayerCreator.createLayerFromLayerObject( LayerObjectUtil.getLayerObject(configXML.layer[0], -1, false, configData.bingKey, null, configData.proxyUrl));if (layerToAdd)
{ overviewMap.addLayer(layerToAdd);//存在layerToAd。就加入到鹰眼地图里面 } } else //不存在的情况下运行。又一次读取config.xml文件{
useBaseMapLayer = true; basemapLayerObjectToLayer = new Dictionary();// get the base map layers
for each (var basemapLayerObject:Object in configData.basemaps)//仅仅获取config.xml里面的底图layer { layerToAdd = LayerCreator.createLayerFromLayerObject(basemapLayerObject); if (layerToAdd) { overviewMap.addLayer(layerToAdd); basemapLayerObjectToLayer[basemapLayerObject] = layerToAdd; } } AppEvent.addListener(AppEvent.BASEMAP_SWITCH, viewContainer_basemapSwitchHandler); } if (configXML.collapsible.length() > 0) { isCollapsible = configXML.collapsible == "true"; } if (isCollapsible) { currentState = configXML.initialstate == "open" ? "expanded" : "collapsed"; } else { currentState = "noncollapsible"; } if (currentState == "collapsed") { for each (var layer:Layer in overviewMap.layers) { layer.visible = false; } } viewBox.visible = true; borderRect1.visible = true; } }/
界面设计核心部分：
map地图的布局
<esri:Map id="overviewMap"
width="250" height="250" attributionVisible="false"//属性不可见 clickRecenterEnabled="false" doubleClickZoomEnabled="false"//禁用鹰眼地图的双击 keyboardNavigationEnabled="false"//禁用鹰眼地图的键盘方向 load="overviewMap_loadHandler(event)"//鹰眼地图载入事件 logoVisible="false"//鹰眼地图logo设置不可见 mask="{mapMask}" panArrowsVisible="false" panEnabled="false"//禁用鹰眼地图移动 rubberbandZoomEnabled="false" scaleBarVisible="false" scrollWheelZoomEnabled="false" wrapAround180="{map.wrapAround180}" zoomSliderVisible="false"/>//鹰眼地图缩放条不可见备注：
GIS之家论坛（推荐）：
GIS之家GitHub:
GIS之家作品：
GIS之家兴趣部落：
GIS项目交流群：238339408
GIS之家交流群一：432512093