南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（四）

config.xml文件的配置如下：

源代码目录如下：

地图导航控件模块的源代码原理解析，详细的代码在下载的开源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=""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

唯有斯人面上簌簌流下的，是点点无声无行的热泪。

相关文章：

你感兴趣的文章：

标签云：