4、为地图增加浏览控制按钮——toolbar

来源：互联网发布：如何提高java水平编辑：程序博客网时间：2024/06/02 23:39

为地图增加控制按钮ToolBar

1、准备按钮图标文件并引入Flex

（1）在工程的Src文件夹下新建一个文件夹image，将工具图标文件复制进去！

（2）在Flex中注册图标，并在ToggleButtonBar按钮中使用

<mx:Script>

<![CDATA[

//图标文件

[Bindable]

//放大

[Embed(source="images/Zoomin.gif")]

public var ZoomIn:Class;

//缩小

[Bindable]

[Embed(source="images/Zoomout.gif")]

public var Zoomout:Class;

//移动

[Bindable]

[Embed(source="images/pan.gif")]

public var pan:Class;

//上一视图

[Bindable]

[Embed(source="images/lastview.gif")]

public var lastview:Class;

//下一视图

[Bindable]

[Embed(source="images/nextview.gif")]

public var nextview:Class;

]]>

</mx:Script>

（3）使用ToggleButtonBar：

在map空间的代码下部加入ToggleButtonBar的引用代码：

注意：直接在Design里面绘制时，代码可能会出现错误，因为在map控件上绘制其他控件后，程序自动将其代码加入到<ESRI:map></ESRI:map>中间，而map空间不是容器当然不可以在里面加入其他类型的控件（ESRI公司的图层控件可以支持，以服务的形式）。

完成ToggleButtonBar绘制后的代码如下：

说明：ToggleButtonBar的数据源支持Array类型，可以在其他地方定义好Array然后引用进来，也可以直接定义。

代码如下：

<mx:ToggleButtonBar x="40" y="40" id="toolbar">

<mx:dataProvider>

<mx:Array>

<mx:Object icon="{ZoomIn}"></mx:Object>

<mx:Object icon="{Zoomout}"></mx:Object>

<mx:Object icon="{pan}"></mx:Object>

<mx:Object icon="{lastview}"></mx:Object>

<mx:Object icon="{nextview}"></mx:Object>

</mx:Array>

</mx:dataProvider>

</mx:ToggleButtonBar>

至此，将ToolBar的外观创建完毕，效果如下：

2、为ToolBar设置功能事件

（1）设置Navigation（地图浏览）

Navigation集成了常用的地图浏览功能，如：放大、缩小、平移、上一视图、下一视图等。故而对地图的操作使用他很方便，直接调用其事件即可。

引用Navigation的方法为：

<esri:Navigation map="{myMap}" id="toolnavigat">

</esri:Navigation>

<esri:Map id="myMap">

...

</esri:Map>

其中map="{myMap}"即为Navigation操作配置地图对象，myMap为地图控件ID

(2）设置ToolBar的click单击事件。

单击后需获取到用户单击的是那个按钮，故而要使用ItemClickEvent监听，使用它，要在脚本程序里边增加引用： import mx.events.ItemClickEvent;

在<mx:ToggleButtonBar x="40" y="40" id="toolbar">中添加事件itemClick="Toolbar_Item_Click(event)”即当ToolBar中按钮单击时调用函数Toolbar_Item_Click（），其传入参数event存储被单击按钮的信息，该参数为固定格式，必须用event，否则出错！

（3）Toolbar_Item_Click（）脚本函数的编写

在<mx:Script></mx:Script>中编写Toolbar_Item_Click（）函数如下：

private function Toolbar_Item_Click(Event:ItemClickEvent):void

{

switch(Event.index)

{

case 0:

{

toolnavigat.activate(Navigation.ZOOM_IN);

//设定当前工具为放大

break;

}

case 1:

{

toolnavigat.activate(Navigation.ZOOM_OUT);

//设定当前工具为缩小

break;

}

case 2:

{

toolnavigat.activate(Navigation.PAN);

//设定当前工具为移动

break;

}

case 3:

{

toolnavigat.zoomToPrevExtent();

//设定当前工具为移动

break;

}

case 4:

{

toolnavigat.zoomToNextExtent()

//设定当前工具为移动

break;

}

可以看到使用Navigation后只需要简单的判断就可以完成地图的浏览功能！

3、至此，完成地图的浏览功能。完成效果：

4、程序全部代码为：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:esri="http://www.esri.com/2008/ags">

<mx:Script>

<![CDATA[

//图标文件

[Bindable]

//放大

[Embed(source="images/Zoomin.gif")]

public var ZoomIn:Class;

//缩小

[Bindable]

[Embed(source="images/Zoomout.gif")]

public var Zoomout:Class;

//移动

[Bindable]

[Embed(source="images/pan.gif")]

public var pan:Class;

//上一视图

[Bindable]

[Embed(source="images/lastview.gif")]

public var lastview:Class;

//下一视图

[Bindable]

[Embed(source="images/nextview.gif")]

public var nextview:Class;

//程序部分

//引用部分

import mx.events.ItemClickEvent;

private function Toolbar_Item_Click(Event:ItemClickEvent):void

{

switch(Event.index)

{

case 0:

{

toolnavigat.activate(Navigation.ZOOM_IN);

//设定当前工具为放大

break;

}

case 1:

{

toolnavigat.activate(Navigation.ZOOM_OUT);

//设定当前工具为缩小

break;

}

case 2:

{

toolnavigat.activate(Navigation.PAN);

//设定当前工具为移动

break;

}

case 3:

{

toolnavigat.zoomToPrevExtent();

//上一视图

break;

}

case 4:

{

toolnavigat.zoomToNextExtent()

//下一视图

break;

}

]]>

</mx:Script>

<esri:Navigation map="{myMap}" id="toolnavigat">

</esri:Navigation>

<esri:Map id="myMap">

<esri:ArcGISDynamicMapServiceLayer url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer">

</esri:ArcGISDynamicMapServiceLayer>

</esri:Map>

<mx:ToggleButtonBar x="40" y="40" id="toolbar" itemClick="Toolbar_Item_Click(event)">

<mx:dataProvider>

<mx:Array>

<mx:Object icon="{ZoomIn}"></mx:Object>

<mx:Object icon="{Zoomout}"></mx:Object>

<mx:Object icon="{pan}"></mx:Object>

<mx:Object icon="{lastview}"></mx:Object>

<mx:Object icon="{nextview}"></mx:Object>

</mx:Array>

</mx:dataProvider>

</mx:ToggleButtonBar>

</mx:Application>