讲解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技术交流QQ群: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. Distributed4:SQL Server 分布式数据库性能测试

    我使用三台SQL Server 2012 搭建分布式数据库,将一年的1.4亿条数据大致均匀存储在这三台Server中,每台Server 存储4个月的数据,Physical Server的配置基本相同, ...

  2. DAC Usage2:通过DAC实现DB Schema的Migration和Upgrade

    一,Introduce Extract DAC 是从现存的DB中创建DAC,抽取DB Object的definition 和 与之相关的实例级别的元素,比如Login,以及Login 和User之间的 ...

  3. Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器

    今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...

  4. JavaScript变量声明提前

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有做mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行 ...

  5. MySQL学习笔记六:基本DML操作

    1.查询语句,语法如下: SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [STRAIGHT_JOIN] [SQL_SMALL_RESUL ...

  6. MySQL学习笔记四:字符集

    1.字符集就是字符和其编码的集合,查看数据库支持的字符集 show character set 2.查看服务端启动时默认的字符集 mysql> show variables like 'char ...

  7. spring笔记--事务管理之声明式事务

    事务简介: 事务管理是企业级应用开发中必不可少的技术,主要用来确保数据的完整性和一致性, 事务:就是一系列动作,它们被当作一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. Spring中使 ...

  8. 解析C#类中的构造函数

    <解析C#类中的构造函数> 一.  C#中的构造函数概述: C#中类包含数据成员和函数成员.函数成员提供了操作类中数据的某些功能,包括方法.属性.构造器和终结器.运算符和索引器. 构造函数 ...

  9. css常用的特效代码

    一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...

  10. 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...