天津政府应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块
config.xml文件的配置如下：
<widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf" />
源代码目录如下：
地图导航控件模块的源代码原理解析，详细的代码在下载的开源flexviewer自带的：
1.地图缩小
2.地图放大
3.地图漫游
4.地图缩放级别工具
5.前视图，后视图
6.向下平移
7.向右平移
8.向上平移
9.向左平移
10.全图
大概的思路如下：NavigationWidget.xml是导航控件的配置文件，NavigationWidget.mxml是widget，里面引用地图导航控件Navigation.mxml，然后Navigation.mxml控件里面具体定义界面如何布局的，布局看上面的截图，Navigation.mxml里面的布局设计引用了很多其他的皮肤组件组成，用来渲染颜色的，比如，nButtonSkin.mxml、neButtonSkin.mxml等等。
（1）NavigationWidget.xml
<?xml version="1.0" ?>
<configuration>
<!-- 地图全图属性以及的图标设置 -->
<panwheel visible="true" fullexticon="assets/images/i_globe.png" />
<!-- 地图上视图属性设置-->
<prevextbutton visible="true"/>
<!-- 地图下视图属性设置-->
<nextextbutton visible="true"/>
<!-- 地图移动属性以及图标的设置-->
<panbutton visible="true" icon="assets/images/i_pan.png" />
<!-- 地图放大属性以及图标设置-->
<zoominbutton visible="true" icon="assets/images/i_zoomin.png" />
<!-- 地图缩小属性以及图标设置-->
<zoomoutbutton visible="true" icon="assets/images/i_zoomout.png" />
</configuration>
(2)NavigationWidget.mxml
<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:viewer="com.esri.viewer.*"
xmlns:Navigation="widgets.Navigation.*"
initialize="basewidget_initializeHandler(event)"
widgetConfigLoaded="init()">
<fx:Declarations>
<!--设置动画效果，淡入的透明度-->
<s:Fade id="rollOverFade" target="{navigation}"/>
<!--设置动画效果，淡出的透明度-->
<s:Fade id="rollOutFade" target="{navigation}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.viewer.AppEvent; import mx.events.FlexEvent; private var buttonBarLastSelectedIndex:int; protected function basewidget_initializeHandler(event:FlexEvent):void
{
AppEvent.addListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);//widget加载初始化时候触发事件
} private function sharedDataUpdated(event:AppEvent):void
{
var data:Object = event.data; if (data.key == "Edit_Widget") // 在线编辑工具打开状态下，导航的工具下面按钮禁用
{
if (data.collection[0])
{
map.cursorManager.removeAllCursors();
buttonBarLastSelectedIndex = navigation.btnBar.selectedIndex;
navigation.btnBar.selectedIndex = 0;
navigation.btnBar.enabled = false;
}
else
{
navigation.btnBar.selectedIndex = buttonBarLastSelectedIndex;
navigation.btnBar.enabled = true;
}
}
} private function init():void
{
//下面是widget初始化函数，为了读取配置文件xml数据
if (configXML)
{
var rollOverAlpha:Number = configXML.rolloveralpha[0] ? parseFloat(configXML.rolloveralpha) : 1;//设置动画效果的透明度
var rollOutAlpha:Number = configXML.rolloutalpha[0] ? parseFloat(configXML.rolloutalpha) : 0.39; rollOutFade.alphaTo = rollOutAlpha;
rollOverFade.alphaTo = rollOverAlpha;
navigation.alpha = rollOutAlpha;//导航控件的透明度
navigation.visible = true;//设置导航控件可见 navigation.panwheelItem = new NavToolItem("PanWheel", "", configXML.panwheel.@visible == 'true');//导航控件的漫游菜单
navigation.zoomFullextItem = new NavToolItem(configXML.panwheel.@fullextlabel || getDefaultString("fullExtentLabel"), configXML.panwheel.@fullexticon, true);//导航控件的全图菜单
navigation.pandownItem = new NavToolItem(configXML.panwheel.@pandownlabel || getDefaultString("panDownLabel"), "", true);//导航控件的向下菜单
navigation.panleftItem = new NavToolItem(configXML.panwheel.@panleftlabel || getDefaultString("panLeftLabel"), "", true);//导航控件的向左菜单
navigation.panrightItem = new NavToolItem(configXML.panwheel.@panrightlabel || getDefaultString("panRightLabel"), "", true);//导航控件的向右菜单
navigation.panupItem = new NavToolItem(configXML.panwheel.@panuplabel || getDefaultString("panUpLabel"), "", true);//导航控件的向上菜单
navigation.prevextItem = new NavToolItem(configXML.prevextbutton.@label || getDefaultString("previousExtentLabel"), "", configXML.prevextbutton.@visible == 'true');//导航控件的前视图菜单
navigation.nextextItem = new NavToolItem(configXML.nextextbutton.@label || getDefaultString("nextExtentLabel"), "", configXML.nextextbutton.@visible == 'true');//导航控件的后视图菜单
navigation.panItem = new NavToolItem(configXML.panbutton.@label || getDefaultString("panLabel"), configXML.panbutton.@icon, configXML.panbutton.@visible == 'true');
navigation.zoominItem = new NavToolItem(configXML.zoominbutton.@label || getDefaultString("zoomInLabel"), configXML.zoominbutton.@icon, configXML.zoominbutton.@visible == 'true');//导航控件的放大菜单
navigation.zoomoutItem = new NavToolItem(configXML.zoomoutbutton.@label || getDefaultString("zoomOutLabel"), configXML.zoomoutbutton.@icon, configXML.zoomoutbutton.@visible == 'true');//导航控件的缩小菜单
navigation.initButtonBar();//加载导航控件的菜单
}
}
]]>
</fx:Script>
<!--引用自定义地图导航控件-->
<Navigation:Navigation id="navigation"
focusIn="rollOverFade.play()"
focusOut="rollOutFade.play()"
includeInLayout="false"
map="{map}"
rollOut="rollOutFade.play()"
rollOver="rollOverFade.play()"
visible="false"/>
</viewer:BaseWidget>
（3）Navigation.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:Navigation="widgets.Navigation.*"> <fx:Script>
<![CDATA[
import com.esri.ags.Map;
import com.esri.viewer.AppEvent;
import com.esri.viewer.utils.LocalizationUtil; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; [Bindable]
public var map:Map;//地图对象 [Bindable]
public var panwheelItem:NavToolItem; [Bindable]
public var zoomFullextItem:NavToolItem;//全图菜单 [Bindable]
public var panupItem:NavToolItem;//向上平移菜单
[Bindable]
public var pandownItem:NavToolItem;//向下平移菜单 [Bindable]
public var panleftItem:NavToolItem;//向左菜单 [Bindable]
public var panrightItem:NavToolItem;//向右菜单 [Bindable]
public var prevextItem:NavToolItem;//前视图菜单 [Bindable]
public var nextextItem:NavToolItem;//后视图菜单 [Bindable]
public var zoominItem:NavToolItem;//放大菜单 [Bindable]
public var zoomoutItem:NavToolItem;//缩小菜单 [Bindable]
public var panItem:NavToolItem;//漫游菜单 /*
* 导航控件菜单变化函数
*/
protected function buttonbar1_changeHandler(event:IndexChangeEvent):void
{
doNavAction(event.currentTarget.dataProvider[event.newIndex].action,
event.currentTarget.dataProvider[event.newIndex].label);
} /*
* 导航控件菜单切换函数
*/
protected function buttonbar1_valueCommitHandler(event:FlexEvent):void
{
if (event.currentTarget.selectedIndex != -1)
{
doNavAction(event.currentTarget.dataProvider[event.currentTarget.selectedIndex].action,
event.currentTarget.dataProvider[event.currentTarget.selectedIndex].label);
}
} private function doNavAction(action:String, label:String):void
{
var data:Object =
{
tool: action,
status: label
}
AppEvent.dispatch(AppEvent.SET_MAP_NAVIGATION, data);//调用flexviewer封装好的地图导航接口
} /*
* 导航控件菜单初始化函数
*/
public function initButtonBar():void
{
var navAC:ArrayCollection = new ArrayCollection(); if (panItem.toolVisible == true)
{
navAC.addItem({ label: panItem.toolName, action: "pan", imageIcon: panItem.toolIcon });
} if (zoominItem.toolVisible == true)
{
navAC.addItem({ label: zoominItem.toolName, action: "zoomin", imageIcon: zoominItem.toolIcon });
} if (zoomoutItem.toolVisible == true)
{
navAC.addItem({ label: zoomoutItem.toolName, action: "zoomout", imageIcon: zoomoutItem.toolIcon });
} if (zoominItem.toolVisible == false && zoomoutItem.toolVisible == false && panItem.toolVisible == false)
{
btnBar.visible = false;
} btnBar.dataProvider = navAC;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout gap="3" horizontalAlign="center"/>
</s:layout>
<s:filters>
<s:DropShadowFilter alpha="0.5"
blurX="10"
blurY="10"/>
</s:filters>
<!--控件的界面布局-->
<s:Group enabled="{map.loaded}"
includeInLayout="{panwheelItem.toolVisible}"
layoutDirection="ltr"
visible="{panwheelItem.toolVisible}">
<s:Button id="nwButton"
x="2" y="2"
click="map.panUpperLeft()"
skinClass="widgets.Navigation.nwButtonSkin"/>
<!--向左平移菜单的布局-->
<s:Button id="wButton"
x="0" y="19"
click="map.panLeft()"
skinClass="widgets.Navigation.wButtonSkin"
toolTip="{panleftItem.toolName}"/>
<s:Button id="swButton"
x="2" y="36"
click="map.panLowerLeft()"
skinClass="widgets.Navigation.swButtonSkin"/>
<!--向下平移菜单的布局-->
<s:Button id="sButton"
x="18" y="43"
click="map.panDown()"
skinClass="widgets.Navigation.sButtonSkin"
toolTip="{pandownItem.toolName}"/>
<s:Button id="seButton"
x="35" y="35"
click="map.panLowerRight()"
skinClass="widgets.Navigation.seButtonSkin"/>
<!--向右平移菜单的布局-->
<s:Button id="eButton"
x="43" y="18"
click="map.panRight()"
skinClass="widgets.Navigation.eButtonSkin"
toolTip="{panrightItem.toolName}"/>
<s:Button id="neButton"
x="35" y="2"
click="map.panUpperRight()"
skinClass="widgets.Navigation.neButtonSkin"/>
<!--向上平移菜单的布局-->
<s:Button id="nButton"
x="18" y="0"
click="map.panUp()"
skinClass="widgets.Navigation.nButtonSkin"
toolTip="{panupItem.toolName}"/>
<!--全图菜单的布局-->
<Navigation:IconButton id="innerButton"
x="18" y="18"
click="doNavAction('zoomfull', zoomFullextItem.toolName)"
iconUp="{zoomFullextItem.toolIcon}"
skinClass="widgets.Navigation.InnerButtonSkin"
toolTip="{zoomFullextItem.toolName}"
visible="{zoomFullextItem.toolVisible}"/>
</s:Group>
<!--前视图后视图菜单的布局-->
<s:HGroup enabled="{map.loaded}" gap="0">
<s:Button id="prevExt"
x="0" y="19"
click="doNavAction('zoomprevious', prevextItem.toolName)"
includeInLayout="{prevextItem.toolVisible}"
skinClass="widgets.Navigation.wButtonSkin"
toolTip="{prevextItem.toolName}"
visible="{prevextItem.toolVisible}"/>
<s:Button id="nextExt"
x="0" y="19"
click="doNavAction('zoomnext', nextextItem.toolName)"
includeInLayout="{nextextItem.toolVisible}"
skinClass="widgets.Navigation.eButtonSkin"
toolTip="{nextextItem.toolName}"
visible="{nextextItem.toolVisible}"/>
</s:HGroup>
<!--引用arcgis api导航控件-->
<esri:Navigation top="0"
map="{map}"
skinClass="widgets.Navigation.NavigationSkin"/>
<s:VGroup enabled="{map.loaded}" paddingTop="3">
<s:ButtonBar id="btnBar"
change="buttonbar1_changeHandler(event)"
requireSelection="true"
selectedIndex="0"
skinClass="widgets.Navigation.VerticalButtonBarSkin"
valueCommit="buttonbar1_valueCommitHandler(event)">
<s:layout>
<s:VerticalLayout gap="0"/>
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<!--漫游菜单的布局-->
<fx:Object action="pan"
imageIcon="assets/images/i_pan.png"
label="{LocalizationUtil.getDefaultString('panLabel')}"/>
<!--放大菜单的布局-->
<fx:Object action="zoomin"
imageIcon="assets/images/i_zoomin.png"
label="{LocalizationUtil.getDefaultString('zoomInLabel')}"
visible="false"/>
<!--缩小菜单的布局-->
<fx:Object action="zoomout"
imageIcon="assets/images/i_zoomout.png"
label="{LocalizationUtil.getDefaultString('zoomOutLabel')}"/>
</s:ArrayCollection>
</s:dataProvider>
</s:ButtonBar>
</s:VGroup>
</s:Group>
以上就是核心的三个文件，其他的皮肤组件可以再flexviewer框架详细的看看源代码，这里知道导航控件的思路原理就好了。
备注：
GIS技术交流QQ群：432512093
天津政府应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块的更多相关文章
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（一）GIS一张图的系统开发环境以及flexviewer框架
系统的GIS功能实现是基于arcgis api for flex,首先附上系统的主界面图,接下来的是对主界面的模块功能详细讲解: 一.GIS环境软件安装 (1)arcgis desktop的安装,要是 ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块
config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（八）资源搜索模块
config.xml文件的配置如下: <widget label="资源搜索" icon="assets/images/public_impact_over.png ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（二）鹰眼模块
讲解GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）解说（二）鹰眼模块
解说GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十三）台风模块
config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十一）路径导航模块
config.xml文件的配置如下: <widget label="路径导航" icon="assets/images/lujingdaohang.png" ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（六）地图搜索模块
config.xml文件的配置如下: <widget label="地图搜索" icon="assets/images/emergency_resource_ove ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（三）显示地图坐标系模块
config.xml文件的配置如下: <widget left="3" bottom="3" config="widgets/Coordinat ...
随机推荐
- LINQ系列：Linq to Object排序操作符
LINQ排序操作符包括:OrderBy.OrderByDescending.ThenBy.ThenByDescending及Reverse. 1. OrderBy 1>. 原型定义 public ...
- C#设计模式系列：状态模式（State）
1.状态模式简介 1.1>.定义 状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
- JavaScript 命名空间
<script type="text/javascript"> Namespace=new Object(); Namespace.register=function( ...
- jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- C#互斥体——Mutex
Mutex对象是一个同步基元,可以用来做线程间的同步. 若多个线程需要共享一个资源,可以在这些线程中使用Mutex同步基元.当某一个线程占用Mutex对象时,其他也需要占用Mutex的线程将处于挂起状 ...
- linux标准IO缓冲（apue）
为什么需要标准IO缓冲? LINUX用缓冲的地方遍地可见,不管是硬件.内核还是应用程序,内核里有页高速缓冲,内存高速缓冲,硬件更不用说的L1,L2 cache,应用程序更是多的数不清,基本写的好的软件 ...
- ASP.NET 5 单元测试中使用依赖注入
相关博文:<ASP.NET 5 使用 TestServer 进行单元测试> 在上一篇博文中,主要说的是,使用 TestServer 对 ASP.NET 5 WebApi 进行单元测试,依赖 ...
- EntityFramework 如何进行异步化（关键词：async·await·SaveChangesAsync·ToListAsync）
应用程序为什么要异步化?关于这个原因就不多说了,至于现有项目中代码异步化改进,可以参考:实际案例:在现有代码中通过async/await实现并行 这篇博文内容针对的是,EntityFramework ...
- 拨乱反正：DDD 回归具体的业务场景，Domain Model 再再重新设计
首先,把最真挚的情感送与梅西,加油! 写在前面 阅读目录: 重申业务场景 Domain Model 设计 后记 上一篇<设计窘境:来自 Repository 的一丝线索,Domain Model ...