天津*应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块

时间：2023-03-08 17:05:02

config.xml文件的配置如下：

<widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf" />

源代码目录如下：

天津*应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块

地图导航控件模块的源代码原理解析，详细的代码在下载的开源flexviewer自带的：

天津*应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块

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

相关文章