目的：
1.ArcGIS API for Flex實現Toolbar功能，包括ZoomIn、ZoomOut、Pan、PrevExtent、NextExtent、FullExtent功能。
準備工作：
1.這次地圖數據就用Esri提供的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。
完成后的效果圖：

開始：
1.啟動Flex Builder3新建工程以及引入ArcGIS API for Flex library的開發包，這個過程前面幾篇都講過了這里就不啰嗦了。
2.新建ToolBar.mxml頁面，然后在頁面上添加Map控件以及設置ArcGISTiledMapServiceLayer，具體代碼如下：

?

1<?xml?version="1.0"?encoding="utf-8"?>
2<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?backgroundColor="white"?xmlns:esri="http://www.esri.com/2008/ags">
3<mx:Canvas?width="446"?height="300"?borderStyle="solid"?borderThickness="3"?borderColor="#3691D1"?horizontalCenter="0"?verticalCenter="19">
4????<esri:Map?id="myMap"?width="100%"?height="100%"?panArrowsVisible="true"?logoVisible="false"?>
5????????<esri:ArcGISTiledMapServiceLayer?url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
6????</esri:Map>
7</mx:Canvas>
8</mx:Application>
9

3.接下來要實現地圖瀏覽控制就需要添加esri:Navigation控件，這個控件提供了放大、縮小、漫游、前一視圖、后一視圖等功能方法，在mx:Canvas標簽前面添加如下代碼：

1
2<esri:Navigation?id="navToolbar"?map="{myMap}"/>
3<mx:Canvas?width="446"? 4.首先先來引入按鈕圖標圖片，在src目錄下新建assets目錄，然后放6張圖片在這個文件夾里分別用于6個功能按鈕，然后添加如下代碼：
?1<mx:Script>
?2????????<![CDATA[
?3
?4????????????//圖標圖片
?5????????????[Bindable]?
?6????????????[Embed(source="assets/esriZoomIn.gif")]
?7????????????public?var?ZoomIn:Class;?
?8????????????
?9????????????[Bindable]?
10????????????[Embed(source="assets/esriZoomOut.gif")]
11????????????public?var?ZoomOut:Class;?
12????????????
13????????????[Bindable]?
14????????????[Embed(source="assets/esriPan.gif")]
15????????????public?var?Pan:Class;?
16????????????
17????????????[Bindable]?
18????????????[Embed(source="assets/esriBack.gif")]
19????????????public?var?Back:Class;?
20????????????
21????????????[Bindable]?
22????????????[Embed(source="assets/esriForward.gif")]
23????????????public?var?Forward:Class;
24????????????
25????????????[Bindable]?
26????????????[Embed(source="assets/esriFullExt.gif")]
27????????????public?var?FullExt:Class;??
28????????????
29????????]]>
30????</mx:Script> 5.接下啦在Map控件的上方位置添加一個mx:ToggleButtonBar控件，這個控件就是切換按鈕組工具條，它可以添加子按鈕然后各個子按鈕點擊時能進行顯示等切換。具體代碼如下： ?1<mx:ToggleButtonBar?id="toolbar1"?creationComplete="initToolbar1()"?itemClick="itemClickHandler(event)"??iconField="icon"?horizontalCenter="-163"?verticalCenter="-151">
?2????????<mx:dataProvider>
?3????????<mx:Array>
?4????????<mx:Object?icon="{ZoomIn}"?/>
?5????????<mx:Object?icon="{ZoomOut}"?/>
?6????????<mx:Object?icon="{Pan}"?/>
?7????????</mx:Array>
?8????????</mx:dataProvider>
?9????????</mx:ToggleButtonBar>
10????<esri:Navigation?id="navToolbar"?map="{myMap}"/>
11 6.上面的代碼中ToggleButtonBar控件綁定了一個mx:Array數據源，這個數據源包含3條數據，icon分別對于3張圖標用來按鈕圖標的顯示，這3張圖片由上的script中定義，ToggleButtonBar控件定義了iconField屬性就是用來顯示圖標，同時定義了creationComplete事件、itemClick事件，分別實現ToggleButtonBar的初始化選擇以及子按鈕點擊功能，具體代碼如下： ?1//初始化toolbar1選中項為Pan
?2????????????private?function?initToolbar1():void
?3????????????{
?4????????????????toolbar1.selectedIndex?=?2;
?5????????????}
?6????????????//ToggleButtonBar的子按鈕點擊事件
?7????????????private?function?itemClickHandler(event:ItemClickEvent):void
?8????????????{
?9????????????????switch(event.index)
10????????????????{
11????????????????????case?0://選擇為zoomin
12????????????????????{
13????????????????????????//激活navToolbar的ZOOM_IN
14????????????????????????navToolbar.activate(Navigation.ZOOM_IN);
15????????????????????????break;
16????????????????????}
17????????????????????case?1://選擇為zoomout
18????????????????????{
19????????????????????????//激活navToolbar的ZOOM_OUT
20????????????????????????navToolbar.activate(Navigation.ZOOM_OUT);
21????????????????????????break;
22????????????????????}
23????????????????????case?2://選擇為pan
24????????????????????{
25????????????????????????//激活navToolbar的PAN
26????????????????????????//navToolbar.activate(Navigation.PAN);
27????????????????????????navToolbar.deactivate();
28????????????????????????break;
29????????????????????}
30????????????????}
31????????????}

7.接下在在頁面上在添加3個按鈕用來顯示前一視圖、后一視圖、全圖顯示，具體代碼如下：

1<mx:Button?icon="{Back}"?click="navToolbarExtent('Prev')"?enabled="{!navToolbar.isFirstExtent}"??horizontalCenter="-82"?verticalCenter="-151"/>
2????<mx:Button?icon="{Forward}"?click="navToolbarExtent('Next')"?enabled="{!navToolbar.isLastExtent}"?horizontalCenter="-41"?verticalCenter="-151"/>
3????<mx:Button?icon="{FullExt}"?click="navToolbarExtent('Full')"?horizontalCenter="0"?verticalCenter="-151"/> 8.上面代碼中添加了3個button，然后設置的小圖標、click事件、enabled屬性，enabled屬性屬性是針對前一視圖和后一視圖功能按鈕了。click事件代碼如下： ?1private?function?navToolbarExtent(type:String):void
?2????????????{
?3????????????????if(type=="Prev")//前一視圖
?4????????????????{
?5????????????????????navToolbar.zoomToPrevExtent();
?6????????????????}
?7????????????????else?if(type=="Next")//后一視圖
?8????????????????{
?9????????????????????navToolbar.zoomToNextExtent();
10????????????????}
11????????????????else?if(type=="Full")//
12????????????????{
13????????????????????navToolbar.zoomToFullExtent();
14????????????????}
15????????????} 9.這樣就完成了toolbar的功能，可以運行測試效果。

轉載于:https://www.cnblogs.com/xranycall/archive/2010/08/18/1802600.html

總結

以上是生活随笔為你收集整理的[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。