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

楼主^#

更多发布于：2016-02-03 10:47

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}"/>
</fxeclarations>
<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>

<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

喜欢1 评分0

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

最新喜欢：