WebGIS经典例子 - 图文

由天下分享时间：2024/12/17 1:50:23 加入收藏我要投稿点赞

myDynamicService。这样完成了所有功能就可以运行查询效果了。

（四）ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能

目的：

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 2345”/>

6 7 8 9

3.接下来要实现地图浏览控制就需要添加esri:Navigation控件，这个控件提供了放大、缩小、漫游、前一视图、后一视图等功能方法，在mx:Canvas标签前面添加如下代码： 1

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

backgroundColor=”white” xmlns:esri=”http://www.esri.com/2008/ags”>

borderColor=”#3691D1″ horizontalCenter=”0″ verticalCenter=”19″> logoVisible=”false” >

url=”http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer

2 3

4.首先先来引入按钮图标图片，在src目录下新建assets目录，然后放6张图片在这个文件夹里分别用于6个功能按钮，然后添加如下代码： 1 2

4 //图标图片 5 [Bindable]

6 [Embed(source=\ 7 public var ZoomIn:Class; 8

9 [Bindable]

10 [Embed(source=\11 public var ZoomOut:Class; 12

13 [Bindable]

14 [Embed(source=\

15 public var Pan:Class; 16

17 [Bindable]

18 [Embed(source=\19 public var Back:Class; 20

21 [Bindable]

22 [Embed(source=\23 public var Forward:Class; 24

25 [Bindable]

26 [Embed(source=\27 public var FullExt:Class; 28 29 ]]> 30

5.接下啦在Map控件的上方位置添加一个mx:ToggleButtonBar控件，这个控件就是切换按钮组工具条，它可以添加子按钮然后各个子按钮点击时能进行显示等切换。具体代码如下： 1

id=”toolbar1″

creationComplete=”initToolbar1()”

horizontalCenter=”-163″

itemClick=”itemClickHandler(event)” verticalCenter=”-151″>

2 3

iconField=”icon”

4 5 6 7 8 9

10 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个按钮用来显示前一视图、后一视图、全图显示，具体代码如下： 12

icon=”{Back}” icon=”{Forward}”

click=”navToolbarExtent(?Prev?)” click=”navToolbarExtent(?Next?)”

enabled=”{!navToolbar.isFirstExtent}” horizontalCenter=”-82″ verticalCenter=”-151″/> enabled=”{!navToolbar.isLastExtent}” horizontalCenter=”-41″ verticalCenter=”-151″/>

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 }