南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块

sinna

config.xml文件的配置如下：
1 <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()">
    <fxeclarations>
        <!--设置动画效果，淡入的透明度-->
        <s:Fadeid="rollOverFade" target="{navigation}"/>
        <!--设置动画效果，淡出的透明度-->
        <s:Fadeid="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("anWheel", "",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:Navigationid="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:VerticalLayoutgap="3" horizontalAlign="center"/>
    </s:layout>
    <s:filters>
        <s:DropShadowFilteralpha="0.5"
                            blurX="10"
                            blurY="10"/>
    </s:filters>
    <!--控件的界面布局-->
    <s:Groupenabled="{map.loaded}"
             includeInLayout="{panwheelItem.toolVisible}"
             layoutDirection="ltr"
             visible="{panwheelItem.toolVisible}">      
        <s:Buttonid="nwButton"
                  x="2" y="2"
                  click="map.panUpperLeft()"
                  skinClass="widgets.Navigation.nwButtonSkin"/>
        <!--向左平移菜单的布局-->
        <s:Buttonid="wButton"
                  x="0" y="19"
                  click="map.panLeft()"
                  skinClass="widgets.Navigation.wButtonSkin"
                  toolTip="{panleftItem.toolName}"/>
        <s:Buttonid="swButton"
                  x="2" y="36"
                  click="map.panLowerLeft()"
                  skinClass="widgets.Navigation.swButtonSkin"/>
        <!--向下平移菜单的布局-->
        <s:Buttonid="sButton"
                  x="18" y="43"
                  click="map.panDown()"
                  skinClass="widgets.Navigation.sButtonSkin"
                  toolTip="{pandownItem.toolName}"/>
        <s:Buttonid="seButton"
                  x="35" y="35"
                  click="map.panLowerRight()"
                  skinClass="widgets.Navigation.seButtonSkin"/>
        <!--向右平移菜单的布局-->
        <s:Buttonid="eButton"
                  x="43" y="18"
                  click="map.panRight()"
                  skinClass="widgets.Navigation.eButtonSkin"
                  toolTip="{panrightItem.toolName}"/>
        <s:Buttonid="neButton"
                  x="35" y="2"
                  click="map.panUpperRight()"
                  skinClass="widgets.Navigation.neButtonSkin"/>
        <!--向上平移菜单的布局-->
        <s:Buttonid="nButton"
                  x="18" y="0"
                  click="map.panUp()"
                  skinClass="widgets.Navigation.nButtonSkin"
                  toolTip="{panupItem.toolName}"/>
        <!--全图菜单的布局-->
        <Navigation:IconButtonid="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:HGroupenabled="{map.loaded}" gap="0">
        <s:Buttonid="prevExt"
                  x="0" y="19"
                  click="doNavAction('zoomprevious',prevextItem.toolName)"
                  includeInLayout="{prevextItem.toolVisible}"
                  skinClass="widgets.Navigation.wButtonSkin"
                  toolTip="{prevextItem.toolName}"
                  visible="{prevextItem.toolVisible}"/>
        <s:Buttonid="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:Navigationtop="0"
                     map="{map}"
                     skinClass="widgets.Navigation.NavigationSkin"/>
    <s:VGroupenabled="{map.loaded}" paddingTop="3">
        <s:ButtonBarid="btnBar"
                     change="buttonbar1_changeHandler(event)"
                     requireSelection="true"
                     selectedIndex="0"
                     skinClass="widgets.Navigation.VerticalButtonBarSkin"
                     valueCommit="buttonbar1_valueCommitHandler(event)">
            <s:layout>
                <s:VerticalLayoutgap="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技术交流群：432512093
GIS二次开发入门培训群：238339408

359732265

谢谢分享，搞开发的都是高手