解说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)解说(二)鹰眼模块的更多相关文章

  1. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(一)GIS一张图的系统开发环境以及flexviewer框架

    系统的GIS功能实现是基于arcgis api for flex,首先附上系统的主界面图,接下来的是对主界面的模块功能详细讲解: 一.GIS环境软件安装 (1)arcgis desktop的安装,要是 ...

  2. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十)态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

  3. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(八)资源搜索模块

    config.xml文件的配置如下: <widget label="资源搜索" icon="assets/images/public_impact_over.png ...

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

    讲解GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...

  5. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十三)台风模块

    config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config ...

  6. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十一)路径导航模块

    config.xml文件的配置如下: <widget label="路径导航" icon="assets/images/lujingdaohang.png" ...

  7. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(六)地图搜索模块

    config.xml文件的配置如下: <widget label="地图搜索" icon="assets/images/emergency_resource_ove ...

  8. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块

    config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...

  9. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(三)显示地图坐标系模块

    config.xml文件的配置如下: <widget left="3" bottom="3" config="widgets/Coordinat ...

随机推荐

  1. Lex与Yacc学习(十)之Yacc库

    Yacc库 每个实现都需要有用的例程库,在UNIX系统中,可以通过cc命令行尾端给出-ly标志(或通过其他系统下的等价物)来包含库. 库的内容在不同的实现之间是不同的,但总是包括main()和yyer ...

  2. set的应用:UVa10815-Andy's First Dictionary

    Andy's First Dictionary Andy, 8, has a dream - he wants to produce his very own dictionary. This is ...

  3. Spring 常见错误解决方案记录

    错误提示: 严重: Servlet.service() for servlet [datasync.controller.manager.SettingServlet] in context with ...

  4. B. Balanced Lineup

    B. Balanced Lineup Time Limit: 5000ms Case Time Limit: 5000ms Memory Limit: 65536KB   64-bit integer ...

  5. Educational Codeforces Round 26

    Educational Codeforces Round 26 困到不行的场,等着中午显示器到了就可以美滋滋了 A. Text Volume time limit per test 1 second ...

  6. TOJ 2596: Music Notes

    2596: Music Notes  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KByteTotal Submit: 3 ...

  7. nodemailer发送邮件遇到的一些问题

    使用nodemailer发送邮件一直困惑了我好几天,百度谷歌都没有找到的几个问题,方便大家排查. 我使用的是0.7.1版本,其他的版本好像报错,就没用. 错误信息:Mail from command ...

  8. 【Luogu】P2016战略游戏(树形DP)

    题目链接 设f[i][j]表示以节点i为根的子树在状态j的情况下的最优解. j有两种情况. j=1:i这个根节点有士兵在站岗. j=0:i这个根节点没有士兵在站岗. 转移方程很好想. f[x][]+= ...

  9. POJ 1125 Stockbroker Grapevine【floyd】

    很裸的floyd #include<cstdio> #include<string.h> #include<algorithm> #define maxn 201 ...

  10. 线程池的使用。好文。mark【http://blog.csdn.net/rwecho/article/details/21157289】

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...