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

转载于:https://www.cnblogs.com/giserhome/p/4732252.html

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

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

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

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

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

  3. 基于OpenLayer完成GIS一张图的开发

    一.OpenLayer简介 OpenLayers 是一个专门为WebGIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问. 使用OpenLayer API Open ...

  4. 画了张图,总结了机房里AAU、RRU以及各模块之间的走线关系和线束规格类型

    写在前面,以下为个人在接触基站工作后自己总结的内容,如有不对请多多指正.内容主要针对我画的这张图作出说明以及扩展,不深入研究机房里的其它布线图. 机房线缆种类及相关铺垫 首先来认识以下几种线缆,单位均 ...

  5. 宜宾市放心舒心消费平台-工商GIS一张图

    宜宾市工商局以现实地图为基础,收录放心舒心商家的地理位置.交通等信息,每个商家附主体信息公示.商品服务介绍.经营承诺.信用信息等:开通投诉及处理窗口功能,政府部门.消费者.商家实时互通互动,发生投诉及 ...

  6. 36 张图详解 DNS :网络世界的导航

    上帝视角 我们平时在访问网站时,不使用 IP 地址,而是网站域名.但是抓包发现:交互报文是以 IP 地址进行的.那么 IP 地址是从哪来的呢?这是因为 DNS 把网站域名自动转换为 IP 地址. 报文 ...

  7. 如何在Ubuntu系统的顶部标题栏中增加CPU/内存/网速实时监控的小控件

    在windows系统下用360加速球用习惯了,老是不自觉的会去关注系统的CPU占用率.内存占用率.网速情况等信息,不知道大家是不是也有这种习惯.那么在linux系统(Ubuntu)下,是否也有类似的工 ...

  8. 张高兴的 Xamarin.Android 学习笔记:(四)常用控件

    示例地址 GitHub : https://github.com/ZhangGaoxing/xamarin-android-demo/tree/master/ControlsDemo 转载于:http ...

  9. 一张图告诉你什么是系统架构师

    转载自 一张图告诉你什么是系统架构师 这张图从架构师的综合能力.岗位认识.岗位职责等方面,清楚的画出了作为一个架构的基本准则.人人都想成为架构师,可作为架构你达到了上面的要求了吗? 系统架构师是个神奇 ...

最新文章

  1. do还是doing imagine加to_中学必背英语短语集合:54个doing动名词的固定搭配
  2. vue-music 音乐网站
  3. 润乾报表实现组内排序报表及改进
  4. 解决ERROR 2003 (HY000): Can't connect to MySQL server on host (111)
  5. android 图片查看动画,Android 共享动画实现点击列表图片跳转查看大图页面
  6. 关于hibernate的关联外键生成以及外键属性列的正确插入即:解决外键插入时,在关联表中除了外键列为空,其它属性均正常级联保存
  7. OC 线程操作 - GCD快速迭代
  8. 设计师为什么要学编程,开发者为什么要学设计?
  9. plotplay恢复默认设置_手把手解答win10系统potplayer经常弹出自动更新提示的还原技巧...
  10. 韭菜财经大数据:《2019年内容创业市场报告》
  11. Js+fromdata
  12. 《图书管理系统》—需求分析报告
  13. 41页工业物联网大数据平台建设方案
  14. wireshark 安装失败报错,缺少kb2999226补丁的解决方案
  15. ogg怎么转换成mp3格式?
  16. CuraEngine源码编译
  17. UVM 中的消息机制
  18. 基于ESP32的TCP服务器
  19. 深度学习和神经网络的介绍(一)
  20. 获取textarea标签中的换行符和空格

热门文章

  1. VMware vSphere 5.1 群集深入解析(二十六)- 数据存储维护模式汇总
  2. 严重: Dispatcher initialization failed java.lang.RuntimeException
  3. DLL基础——Windows核心编程学习手札之十九
  4. Leetcode 268. 缺失数字 解题思路及C++实现
  5. 异步任务AsyncTask
  6. 语法转换_语法 | 句型转换之肯定句变否定句
  7. 计算属性一般是没有set方法, 只读属性 ||计算属性的缓存
  8. Backbone集合
  9. Java的知识点19——异常机制Exception
  10. java 接口 实现和继承关系