当前位置:首页 > Windows程序 > 正文

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

2021-03-28 Windows程序

讲解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/> //引用自定义的鹰眼组件

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);//鼠标移动监听事件

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/68954.html