解說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");?//設置鷹眼關閉時候顯示的tooltip

? ? ?overviewMap.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之家論壇（推薦）：http://www.gishome.online

GIS之家GitHub:https://github.com/gishome/arcgis-for-js

GIS之家作品：https://shop116521643.taobao.com/shop/view_shop.htm

GIS之家興趣部落：http://buluo.qq.com/p/barindex.html?bid=327395

GIS項目交流群：238339408

GIS之家交流群一：432512093

總結

以上是生活随笔為你收集整理的天津政府应急系统之GIS一张图（arcgis api for flex）解说（二）鹰眼模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。