您当前的位置: 首页 > Flex

南沙当局应急系统之GIS一张图（arcgis api for flex）讲解（二）鹰眼模块

发布时间：2011-06-27 19:18:36 文章来源：www.iduyao.cn 采编人员：星星草

南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（二）鹰眼模块

讲解GIS功能模块实现之前，先大概说一下flexviewer的核心配置文件config.xml，系统额GIS功能widget菜单布局、系统的样式、地图资源等等都是在这里配置的，这里对flexviewer不熟悉的朋友，要先去flexviewer官网了解或者网上的其他资源了解才行;

鹰眼模块在config.xml文件的配置如下：

其中，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技术交流QQ群：432512093

上一篇：FLEX获取公布的GIS服务测站站点信息
下一篇：图层被覆盖解决思路

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

其他相似内容：

flex连接数据库编程解决方法

flex连接数据库编程刚学了flex。用flex写了个程序，实现和数据库连接，但是老出问题，如下：调用可能未定义的方法 deleteUser (通过 s...
AdvancedDataGrid 的节点对象如何读取

AdvancedDataGrid 的节点对象怎么读取？ <?xml version= "1.0 " encoding= "utf-8 "?> <mx:Application xmlns:mx=...
<mx:SWFLoader 加事件后卸载不干净,该怎么处理

<mx:SWFLoader 加事件后卸载不干净 <mx:SWFLoader id="tb" source="topbar.swf" complete="tb_completeHandler(event)"/> public...
flashDevelop 项目异常

flashDevelop 项目错误我创建了一个Flex项目，该项目只包含一个文件，名为Main.mxml。 XML code <?xml version="1.0" encoding="u...
类型1067:Array 类型值的隐式强制指令的目标是非相关类型,该如何解决

类型1067:Array 类型值的隐式强制指令的目标是非相关类型新下载了Flash Builder 4来学习flex。按照网上的一个例子写，但出现上面...
Flex导出Excel如何做？要详细代码和说明。多谢

Flex导出Excel怎么做？要详细代码和说明。谢谢如题。 ------解决方案-------------------- 给你一个网上的例子，希望对你有帮助，不...
flex google map有关问题

flex google map问题！最近在做flex地图，我看网上说的属性我这里都打不出来，是不是sdk版本不同啊。我实在官网下的，是map_flex_1_20....
flex4.0的spark控件不能被qtp10.00的对象查看器识别解决思路

flex4.0的spark控件不能被qtp10.00的对象查看器识别各位大侠: 我刚才qtp做flex的自动化测试,使用的flash builder是4.0版本...
Channel definition, mx.messaging.channels.RTMPChannel, can not be found.该怎么解决

Channel definition, mx.messaging.channels.RTMPChannel, can not be found. 我从CSDN上下载了一个FLEX+J2EE的教程，但是一步一步...
flex 控制键盘的响应间隔,该怎么解决

flex 控制键盘的响应间隔如有个keyboaedevent的mousedown监听,里面就一句代码 trace("a"); 怎么控制键盘按下后输出a的时间间隔 ...

南沙当局应急系统之GIS一张图（arcgis api for flex）讲解（二）鹰眼模块

其他相似内容：

热门推荐：