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）讲解（四）地图导航控件模块...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。