DOC-ARCGISSERVER FLEX、arcgis api for flex入门加实例教程-图文

ARCGISSERVER+FLEX、arcgisapiforflex入门加实例教程_图文

ArcGIS.Server.9.3和ArcGISAPIforFlex实现基本的地图浏览（一）目的：

1.ArcGISAPIforFlex实现在Flex程序中浏览自己的ArcGIS.Server.9.3中发布的地图，一个最基本的入门例子。

准备工作：

1.在ArcGIS.Server.9.3发布一个叫usa的MapService，并且把这个Service启动起来。

2.安装FlexBuilder3。

3.下载ArcGISAPIforFlexlibrary的开发包arcgis_flex_api_1.0-beta然后解压缩到文件夹中，地址：/arcgisserver/apis/flex/index.cfm完成后的效果图：

开始：

1.启动FlexBuilder3，点击菜单File->New->FlexProject，然后输入项目名称ProjectName:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：

2.在上面的界面中点击

Librarypath然后点击AddSWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc文件点击ok，在这里就把ArcGISAPIforFlexlibrary的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。

3.然后点击Finish按钮后就完成了工程的建立工作，工程建立后有会默认建立一个flexMapApp.mxml的文件，这个就是Flex的页面文件，查看一下代码：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute">

3

4</mx:Application>

5

4.是一个空的页面了接下来在这个页面中添加Map控件了，Flex下的Map控件支持ArcGISDynamicMapServiceLayer、ArcGISImageServiceLayer、ArcGISTiledMapServiceLayer、ArcIMSMapServiceLayer、GraphicsLayer等几种类型的layer，这些类型的layer区别其实看名字就能知道区别了，比如ArcGISDynamicMapServiceLayer就是支持ArcGISServer发布的普通的地图服务，ArcGISTiledMapServiceLayer支持ArcGIS.Server发布的切片缓存地图。。。

5.在这里采用ArcGISDynamicMapServiceLayer，因为上面在ArcGISServer中发布的USA的MapService是普通的动态生成的地图，添加Map控件可以输入代码。

代码输入可以在<mx:Appliection>标签内输入代码，具体如下：

1<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"xmlns:esri="/2008/ags">

2<esri:Map>

3<esri:ArcGISDynamicMapServiceLayerurl="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>

4</esri:Map>

5</mx:Application>

上面的代码中<esri:ArcGISDynamicMapServiceLayer>属性url就是上面发布的USA的MapService的rest服务地址。

这样就可以直接运行查看地图效果了，很简单。

6.接下来可以对Map控件的属性做一些设置，常用属性解释如下：

clickRecenterEnabled：true/false是否开启按shift键点击地图定位中心的功能。crosshairVisible：true/false是否在地图的中心显示十字。

doubleClickZoomEnabled：true/false是否开启双击地图放大的功能。

keyboardNavigationEnabled：true/false是否开启键盘进行地图导航放大缩小的功能。mapNavigationEnabled：true/false是否开启地图导航的功能。

panArrowsVisible：true/false是否在地图的四边以及4个角显示移动地图箭头按钮的功能。panEnabled：true/false是否开启拖拽地图移动的功能。

rubberBandZoomEnabled：true/false是否开启按shift+拉框放大地图的功能。scaleBarVisible：true/false是否显示放大缩小功能按钮条。

scrollWheelZoomEnabled：true/false是否开启鼠标滚轮放大缩小的功能。

logoVisible：true/false是否地图上显示logo图标。

7：本例完成后的所有代码如下：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"xmlns:esri="/2008/ags"backgroundColor="white">

3<esri:MaphorizontalCenter="-34"verticalCenter="1"width="400"height="250"logoVisible="false"borderStyle="solid"crosshairVisible="true"panArrowsVisible="true">

4<esri:ArcGISDynamicMapServiceLayerurl="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>

5</esri:Map>

6</mx:Application>

ArcGIS.Server.9.3和ArcGISAPIforFlex实现动态图层和瓦片图层叠加显示（二）

目的：

1.ArcGIS.Server.9.3和ArcGISAPIforFlex实现动态图层和瓦片图层叠加显示，在瓦片基图上显示动态图层。

准备工作：

1.在ArcGIS.Server.9.3发布一个叫USA的MapService，并且把这个Service启动起来，这个作为动态图层数据。

2.瓦片数据我这里没有现成的就采用Esri提供的rest世界地图数据服务，地址如下：

/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServ

er。

完成后的效果图：

开始：

1.启动FlexBuilder3，点击菜单File->New->FlexProject，然后输入项目名称ProjectName:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：

2.在上面的界面中点击

Librarypath

然后点击

AddSWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc文件点击ok，在这里就把ArcGISAPIforFlexlibrary的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。

3.这里要显示2种地图数据一种是瓦块图、一种是动态图，这样就需要ArcGISTiledMapServiceLayer和ArcGISDynamicMapServiceLayer支持，关于这个可以看第一篇了有讲到，在这里瓦块图是作为底图显示首先要先添加ArcGISTiledMapServiceLayer，具体代码如下：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"backgroundColor="white"xmlns:esri="/2008/ags">

3<mx:Canvaswidth="500"height="300"horizontalCenter="-63"verticalCenter="-13"borderStyle="solid"borderThickness="2"borderColor="#439AD7">4<esri:MaplogoVisible="false"panArrowsVisible="true">

5<esri:ArcGISTiledMapServiceLayerurl="/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>

6</esri:Map>

7</mx:Canvas>

8

9</mx:Application>

4.上面的代码非常简单，首先是在页面上添加了一个Canvas控件用来作为地图的框，然后是在Canvas控件内添加了一个Map控件同时设置好了ArcGISTiledMapServiceLayer这样运行起来就可以浏览世界地图了。

5.接下来要在底图上显示上面在ArcGIS.Server.9.3发布一个叫USA的动态数据，添加ArcGISDynamicMapServiceLayer并且设置，具体的代码如下：1<?xmlversion="1.0"encoding="utf-8"?>2<mx:Applicationxmlns:mx="/2006/mxml"layout

="absolute"backgroundColor="white"xmlns:esri="/2008/ags">

3<mx:Canvaswidth="500"height="300"horizontalCenter="-63"verticalCenter="-13"borderStyle="solid"borderThickness="2"borderColor="#439AD7">4<esri:MaplogoVisible="false"panArrowsVisible="true">

5<esri:ArcGISTiledMapServiceLayerurl="/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>

6<esri:ArcGISDynamicMapServiceLayerurl="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer">

7</esri:ArcGISDynamicMapServiceLayer>

8</esri:Map>

9</mx:Canvas>

10

11</mx:Application>

12

6.上面的代码中添加了<esri:ArcGISDynamicMapServiceLayerurl="">

</esri:ArcGISDynamicMapServiceLayer>，这个url地址就是发布的USA的rest地址，安装好Ags9.3后可以有ArcGISServicesDirectory菜单可以浏览自己发布的所有的rest服务。这样就完成了2种地图类型的叠加显示可以运行查看一下效果。

7.通过浏览效果可以发现地图显示范围很大不是以USA为显示范围，这样可以Map控件的extent属性设置一下地图的显示视图范围，这里设置以USA的数据范围为地图默认显示范围，可以在ArcGISServicesDirectory浏览USA的MapServer查找到USA数据的最多视图范围为XMin:-127.968857954995、YMin:25.5778580720472、XMax:-65.0742781827045、YMax:51.2983251993735，根据这些参数在mx:Application内添加一个esri:Extent标签如下代码：

1<esri:Extentid="allUsa"xmin="-183.780014745329"ymin="16.2975638854873"xmax="-61.4068547410964"ymax="74.0304580085983"/>

8.然后给esri:Map添加一个extent="{allUsa}"属性，这样就设置了Map控件的默认视图范围为ID为allUsa的ectent,这样就完成了这个练习。

9.其他的还可以设置MapServiceLayer中选择自己需要显示部分的图层，比如USA的地图数据中有4个图层分别为Cities、Highways、States、Counties，现在只想显示States和Counties图层，可以加入如下代码：

1<esri:ArcGISDynamicMapServiceLayerurl="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer">

2<esri:visibleLayers>

3<mx:ArrayCollection>

4<mx:Number>2</mx:Number>

5<mx:Number>3</mx:Number>

6</mx:ArrayCollection>

7</esri:visibleLayers>

8</esri:ArcGISDynamicMapServiceLayer>

ArcGIS.Server.9.3和ArcGISAPIforFlex实现自己的Toc控件（三）目的：

1.ArcGISAPIforFlex没有提供现成的Toc控件，这里来实现自己的Toc控件。

准备工作：

1.在ArcGIS.Server.9.3发布一个叫USA的MapService，并且把这个Service启动起来。完成后的效果图：

开始：

1.启动FlexBuilder3新建工程以及引入ArcGISAPIforFlexlibrary的开发包，这个过程前面2篇都讲过了这里就不啰嗦了。

2.新建LayersOnAndOff.mxml页面，然后在页面上添加Map控件以及设置ArcGISDynamicMapServiceLayer，添加一个ComboBox控件用来地图切换显示。具体代码如下：1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"backgroundColor="white"xmlns:esri="/2008/ags">3<mx:Arrayid="arr">

4<mx:Objectlabel="USA"data="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>

5<mx:Objectlabel="USA_2D"data="/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"/>6</mx:Array>

7<mx:ComboBoxid="myURL"selectedIndex="0"horizontalCenter="-329"dataProvider="{arr}"y="10">8</mx:ComboBox>9<esri:MaplogoVisible="false"panArrowsVisible="true"width="463"height="288"x="33"y="40"borderStyle="solid"borderThickness="3">

10<esri:ArcGISDynamicMapServiceLayerid="myDynamicService"url="{myURL.selectedItem.data}"load="myDynamicService.defaultVisibleLayers()"/>11</esri:Map>

12</mx:Application>

3.对上面的代码做一下解释，首先添加了一个id为arr的对象数组作为ComboBox的数据源，arr的对象数组包含2个对象：一个是上面发布的USA得rest地址，一个是Esri提供的在线的rest地址。然后在Map控件的ArcGISDynamicMapServiceLayer的url属性绑定ComboBox的选择值，这样当ComboBox选择发生变化时地图也会根据rest地址进行切换显示。

4.接下来做Toc控件了，首先在src目录下新添加一个叫uc的目录，然后在uc下新建TreeToc.mxml文件这个就是用来实现Toc功能的。Toc控件这里是用Flex提供的Tree控件的基础上实现的，具体代码如下：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Treexmlns:mx="/2006/mxml"width="100%"height="100%"fontSize="12">

3<mx:Script>

4<![CDATA[

5importmx.collections.ArrayCollection;

6importcom.esri.ags.layers.ArcIMSMapServiceLayer;

7importcom.esri.ags.layers.ArcGISDynamicMapServiceLayer;8importcom.esri.ags.events.LayerEvent;

9importcom.esri.ags.layers.Layer;

10importcom.esri.ags.layers.LayerInfo;

11importmx.utils.ObjectUtil;

12

13privatevarlayerInfos:Array;

14//图层

15privatevar_layer:Layer;

16//图层是否更新标识

17privatevar_layerChanged:Boolean;

18//获取图层

19publicfunctiongetlayer():Layer

20{

21return_layer;

22}

23//设置图层

24publicfunctionsetlayer(value:Layer):void

25{

26_layer=value;

27_layerChanged=true;

28invalidateProperties();29}30//设置组件属性31overrideprotectedfunctioncommitProperties():void32{33if(_layerChanged)34{35_layerChanged=false;36if(layer)37{

38//为layer添加完成后取消鼠标忙碌显示的监听事件

39layer.addEventListener(Event.COMPLETE,removeBusyCursor,false,0,true);

40//为layer添加发生错误后取消鼠标忙碌显示的监听事件

41layer.addEventListener(IOErrorEvent.IO_ERROR,removeBusyCursor,false,0,true);

42

43if(layer.loaded)

44{

45//如果layer载入完成为DataGrid设置数据源

46setDataProvider();

47}

48else

49{

50//如果未载入完成为layer添加载入监听事件

51layer.addEventListener(LayerEvent.LOAD,layerLoadHandler,false,0,true);

52}

53}

54}

55mitProperties();

56}

57//设置数据源

58privatefunctionsetDataProvider():void

59{

60if(layerisArcGISDynamicMapServiceLayer)

61{

62layerInfos=ArcGISDynamicMapServiceLayer(layer).layerInfos;

63}

64elseif(layerisArcIMSMapServiceLayer)

65{

66layerInfos=ArcIMSMapServiceLayer(layer).layerInfos;67}

68registerClassAlias("com.esri.ags.layers.LayerInfo",LayerInfo);69//ObjectUtil.copy方法接受一个对象做为参数而返回一个在内存的新位置的此对象的深度拷贝,类似克隆70layerInfos=ObjectUtil.copy(layerInfos)asArray;71dataProvider=layerInfos;72//labelField="name";7374}75

76privatefunctionlayerLoadHandler(event:LayerEvent):void77{

78setDataProvider();

79}

80//显示图层方法

81publicfunctionshowLayer(layerInfo:LayerInfo):void82{

83varvisibleLayers:ArrayCollection;

84if(layerisArcGISDynamicMapServiceLayer)

85{

86//获取当前可见图层列表

87visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;

88//在当前可见图层列表中加入要显示的图层

89visibleLayers.addItem(layerInfo.id);

90}

91elseif(layerisArcIMSMapServiceLayer)

92{

93//获取当前可见图层列表

94visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;

95//在当前可见图层列表中加入要显示的图层

96visibleLayers.addItem(layerInfo.id);

97}

98//设置鼠标显示状态

99if(visibleLayers)

100{

101cursorManager.setBusyCursor();

102}

103}

104//隐藏图层方法

105publicfunctionhideLayer(layerInfo:LayerInfo):void106{

107varvisibleLayers:ArrayCollection;

108if(layerisArcGISDynamicMapServiceLayer)109{110//获取当前可见图层列表111visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;112//查找要隐藏的图层的index113varindex:int=visibleLayers.getItemIndex(layerInfo.id);114//在当前可见图层列表中去除要隐藏的图层115if(index!=-1)

116{

117visibleLayers.removeItemAt(index);

118}

119}

120elseif(layerisArcIMSMapServiceLayer)

121{

122//获取当前可见图层列表

123visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;

124//查找要隐藏的图层的index

125varindex2:int=visibleLayers.getItemIndex(layerInfo.id);

126//在当前可见图层列表中去除要隐藏的图层

127if(index2!=-1)

128{

129visibleLayers.removeItemAt(index2);

130}

131}

132//设置鼠标显示状态

133if(visibleLayers)

134{

135cursorManager.setBusyCursor();

136}

137}

138

139privatefunctionremoveBusyCursor(event:Event):void140{

141//删除忙光标

142cursorManager.removeBusyCursor();

143}

144]]>

145</mx:Script>

146<mx:itemRenderer>

147uc.TreeRenderer

148</mx:itemRenderer>149</mx:Tree>1505.对上面的代码做一下解释，首先Toc控件是在Tree控件的基础上实现的，这个Tree控件获取Layers数据作为数据源进行绑定显示，同时提供了显示图层隐藏图层等方法。最后这个Tree添加了一个叫uc.TreeRenderer的itemRenderer（项渲染器），也就是说Tree的每一个节点都是由这个itemRenderer来负责显示。那也就是说还需要实现uc.TreeRenderer的功能。

6.在uc目录下新增加TreeRenderer.mxml的文件，这个因为是itemRenderer所以需要implements="mx.controls.listClasses.IDropInListItemRenderer"，具体代码如下：1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:HBoxxmlns:mx="/2006/mxml"horizontalAlign="left"implements="mx.controls.listClasses.IDropInListItemRenderer">

3<mx:Script>

4<![CDATA[

5importcom.esri.ags.layers.LayerInfo;

6importmx.controls.listClasses.BaseListData;

7

8//图标图片

9[Bindable]

10[Embed(source="assets/Dataframe.GIF")]

11publicvarlayericon:Class;

12

13privatevar_listData:BaseListData;

14

15publicfunctiongetlistData():BaseListData

16{

17return_listData;

18}

19

20publicfunctionsetlistData(value:BaseListData):void21{

22_listData=value;

23}

24//checkbox的点击事件

25privatefunctionclickHandler(event:MouseEvent):void26{

27varlayerInfo:LayerInfo=LayerInfo(data);

28

29if(cb.selected)

30{

31layerInfo.defaultVisibility=true;

32//调用TreeToc显示图层方法

33TreeToc(listData.owner).showLayer(layerInfo);

34}35else36{37layerInfo.defaultVisibility=false;38//调用TreeToc隐藏图层方法39TreeToc(listData.owner).hideLayer(layerInfo);40}

41}

42]]>

43</mx:Script>

44<mx:CheckBoxid="cb"selected="{data.defaultVisibility}"click="clickHandler(event)"/>

45<mx:Imagesource="{layericon}"/>

46<mx:Labeltext="{}"/>

47

48</mx:HBox>

49

7.上面的代码中主要是在HBox控件中放了一个CheckBox、一个Image、一个Label，并且为CheckBok添加了点击事件可以控制图层的隐藏显示。

8.这样完成了Toc控件的开发，接下来是要在LayersOnAndOff.mxml页面使用这个控件，增加如下代码（红色部分）：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"backgroundColor="white"xmlns:esri="/2008/ags"xmlns:uc="uc.*">

3<mx:Arrayid="arr">

4<mx:Objectlabel="USA"data="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>

5<mx:Objectlabel="USA_2D"data="/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"/>6</mx:Array>

7<mx:ComboBoxid="myURL"selectedIndex="0"horizontalCenter="-329"dataProvider="{arr}"y="10">

8</mx:ComboBox>

9<esri:MaplogoVisible="false"panArrowsVisible="true"width="463"height="288"x="33"y="40"borderStyle="solid"borderThickness="3">

10<esri:ArcGISDynamicMapServiceLayerid="myDynamicService"url="{myURL.selectedItem.data}"load="myDynamicService.defaultVisibleLayers()"/>11</esri:Map>

1213</mx:Application>

14

9.上面代码的红色部分添加了TreeToc，并且设置了一个layer的属性值是绑定myDynamicService。这样完成了所有功能就可以运行查询效果了。

ArcGIS.Server.9.3和ArcGISAPIforFlex实现Toolbar功能（四）目的：

1.ArcGISAPIforFlex实现Toolbar功能，包括ZoomIn、ZoomOut、Pan、PrevExtent、NextExtent、FullExtent功能。

准备工作：

1.这次地图数据就用Esri提供的/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。

完成后的效果图：开始：

1.启动FlexBuilder3新建工程以及引入ArcGISAPIforFlexlibrary的开发包，这个过程前面几篇都讲过了这里就不啰嗦了。

2.新建ToolBar.mxml页面，然后在页面上添加Map控件以及设置ArcGISTiledMapServiceLayer，具体代码如下：

1<?xmlversion="1.0"encoding="utf-8"?>

2<mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"backgroundColor="white"xmlns:esri="/2008/ags">

3<mx:Canvaswidth="446"height="300"borderStyle="solid"borderThickness="3"borderColor="#3691D1"horizontalCenter="0"verticalCenter="19">

4<esri:Mapid="myMap"width="100%"height="100%"panArrowsVisible="true"logoVisible="false">

5<esri:ArcGISTiledMapServiceLayerurl="/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>

6</esri:Map>

7</mx:Canvas>8</mx:Application>93.接下来要实现地图浏览控制就需要添加esri:Navigation控件，这个控件提供了放大、缩小、漫游、前一视图、后一视图等功能方法，在mx:Canvas标签前面添加如下代码：12<esri:Navigationid="navToolbar"map="{myMap}"/>3<mx:Canvaswidth="446"

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

1<mx:Script>

2<![CDATA[

3

4//图标图片

5[Bindable]

6[Embed(source="assets/esriZoomIn.gif")]

7publicvarZoomIn:Class;

8

9[Bindable]

10[Embed(source="assets/esriZoomOut.gif")]

11publicvarZoomOut:Class;

12

13[Bindable]

14[Embed(source="assets/esriPan.gif")]

15publicvarPan:Class;

16

17[Bindable]

18[Embed(source="assets/esriBack.gif")]

19publicvarBack:Class;

20

21[Bindable]

22[Embed(source="assets/esriForward.gif")]

23publicvarForward:Class;

24

25[Bindable]

26[Embed(source="assets/esriFullExt.gif")]

27publicvarFullExt:Class;

28

29]]>

30</mx:Script>

5.接下啦在Map控件的上方位置添加一个mx:ToggleButtonBar控件，这个控件就是切换按钮组工具条，它可以添加子按钮然后各个子按钮点击时能进行显示等切换。具体代码如下：1<mx:ToggleButtonBarid="toolbar1"creationComplete="initToolbar1()"itemClick="itemClickHandler(event)"iconField="icon"horizontalCenter="-163"ver

ticalCenter="-151">2<mx:dataProvider>3<mx:Array>4<mx:Objecticon="{ZoomIn}"/>5<mx:Objecticon="{ZoomOut}"/>6<mx:Objecticon="{Pan}"/>

7</mx:Array>

8</mx:dataProvider>

9</mx:ToggleButtonBar>

10<esri:Navigationid="navToolbar"map="{myMap}"/>

11

6.上面的代码中ToggleButtonBar控件绑定了一个mx:Array数据源，这个数据源包含3条数据，icon分别对于3张图标用来按钮图标的显示，这3张图片由上的script中定义，ToggleButtonBar控件定义了iconField属性就是用来显示图标，同时定义了creationComplete事件、itemClick事件，分别实现ToggleButtonBar的初始化选择以及子按钮点击功能，具体代码如下：

1//初始化toolbar1选中项为Pan

2privatefunctioninitToolbar1():void

3{

4toolbar1.selectedIndex=2;

5}

6//ToggleButtonBar的子按钮点击事件

7privatefunctionitemClickHandler(event:ItemClickEvent):void8

10

12{{{9switch(event.index)11case0://选择为zoomin

13//激活navToolbar的ZOOM_IN

14navToolbar.activate(Navigation.ZOOM_IN);15break;

16}

17case1://选择为zoomout

18{

19//激活navToolbar的ZOOM_OUT

20navToolbar.activate(Navigation.ZOOM_OUT);21break;

22}

23case2://选择为pan

24{

25//激活navToolbar的PAN

26//navToolbar.activate(Navigation.PAN);

27navToolbar.deactivate();

28break;

29}30}31}7.接下在在页面上在添加3个按钮用来显示前一视图、后一视图、全图显示，具体代码如下：1<mx:Buttonicon="{Back}"click="navToolbarExtent('Prev')"enabled="{!navToolbar.isFirstExtent}"horizontalCenter="-82"verticalCenter="-151"/>

2<mx:Buttonicon="{Forward}"click="navToolbarExtent('Next')"enabled="{!navToolbar.isLastExtent}"horizontalCenter="-41"verticalCenter="-151"/>3<mx:Buttonicon="{FullExt}"click="navToolbarExtent('Full')"horizontalCenter="0"verticalCenter="-151"/>

8.上面代码中添加了3个button，然后设置的小图标、click事件、enabled属性，enabled属性属性是针对前一视图和后一视图功能按钮了。click事件代码如下：

1privatefunctionnavToolbarExtent(type:String):void

2

4{{3if(type=="Prev")//前一视图

5navToolbar.zoomToPrevExtent();

6}

7elseif(type=="Next")//后一视图

8{

9navToolbar.zoomToNextExtent();

10}

11elseif(type=="Full")//

12{

13navToolbar.zoomToFullExtent();

14}

15}

9.这样就完成了toolbar的功能，可以运行测试效果。

ArcGIS.Server.9.3和ArcGISAPIforFlex实现GraphicsLayer上画点、线、面（五）

目的：

1.ArcGISAPIforFlex实现GraphicsLayer上画点、线、面。

准备工作：

1.这次地图数据就用Esri提供的。

完成后的效果图：

开始：1.

启动FlexBuilder3新建工程以及引入ArcGISAPIforFlexlibrary的开发包。2.新建DrawTool.mxml页面，然后在页面上添加esri:Map控件设置esri:ArcGISTiledMapServiceLayer等。

3.和上一篇一样仍旧用mx:ToggleButtonBar来实现功能按钮，mx:ToggleButtonBar需要包含6个按钮分别实现6种不一样的操作，具体代码如下：

1<mx:ToggleButtonBariconField="icon"horizontalCenter="-47"verticalCenter="-151"itemClick="itemClickHandler(event)"toggleOnClick="true">2<mx:dataProvider>

3<mx:Array>

4<mx:Objecticon="{point}"/>

5<mx:Objecticon="{point2}"/>

6<mx:Objecticon="{polyline3}"/>

7<mx:Objecticon="{polyline}"/>

8<mx:Objecticon="{polyline2}"/>

9<mx:Objecticon="{polygon}"/>

10<mx:Objecticon="{polygon2}"/>

11<mx:Objecticon="{polygon3}"/>

12</mx:Array>

13</mx:dataProvider>

14</mx:ToggleButtonBar>

4.上面的代码中icon对应的图标定义在mx:Script中如下：

1//图标图片

2[Bindable]

3[Embed(source="assets/point.gif")]

4publicvarpoint:Class;

5

6[Bindable]7[Embed(source="assets/point2.gif")]8publicvarpoint2:Class;910[Bindable]11[Embed(source="assets/polyline.gif")]12publicvarpolyline:Class;1314[Bindable]

15[Embed(source="assets/polyline3.gif")]

16publicvarpolyline3:Class;

17

18[Bindable]

19[Embed(source="assets/polyline2.gif")]

20publicvarpolyline2:Class;

21

22[Bindable]

23[Embed(source="assets/polygon.gif")]

24publicvarpolygon:Class;

25

26[Bindable]

27[Embed(source="assets/polygon2.gif")]

28publicvarpolygon2:Class;

29

30[Bindable]

31[Embed(source="assets/polygon3.gif")]

32publicvarpolygon3:Class;

5.现在要实现在地图上画点、线等就需要esri:GraphicsLayer的功能，实际上点、线、面都是画在GraphicsLayer的所以需要在Map控件中添加：

1<esri:Mapid="myMap"extent="{allMap}"logoVisible="false">

2<esri:ArcGISTiledMapServiceLayerurl="/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer"/>

3<esri:GraphicsLayerid="myGraphicsLayer"/>

4</esri:Map>

6.要进行绘制功能esri已经提供了esri:Draw这个控件能很方便的实现基本图形的绘制，使用代码如下：

1<esri:Drawid="drawToolbar"map="{myMap}"graphicsLayer="{myGraphicsLayer}"/>

7.esri:Draw有2个属性一个是要进行画图操作的地图控件，一个是画图的容器GraphicsLayer。

8.接下来定义一下画出来的点、线、面的显示样式，代码如下：

1<esri:SimpleLineSymbolid="sls"style="solid"color="0xFF0000"width="2"alpha="1"/>

2<esri:SimpleMarkerSymbolid="sms"style="square"color="0xFF0000"size="10

"/>3<esri:SimpleFillSymbolid="sfs"style="solid"color="0xFF0000"alpha="0.5"/>9.上面的sls为线的显示样式；sms为点的显示样式；sfs为面的显示样式，关于样式的定义可以查询一下帮助了有很多的样式等可以实现。10.最后就是编写功能代码在上面的ToggleButtonBar控件中已经给它添加了一个itemClick="itemClickHandler(event)"，这里就是编写itemClickHandler(event)这个方法的代码：1importmx.events.ItemClickEvent;

2privatefunctionitemClickHandler(event:ItemClickEvent):void

3{

4//设置点样式

5drawToolbar.markerSymbol=sms;

6//设置线样式

7drawToolbar.lineSymbol=sls;

8//设置面样式

9drawToolbar.fillSymbol=sfs;

10//更加按钮的index值设置不同的绘制操作

11switch(event.index)

12

14{{13case0:

15drawToolbar.activate(Draw.MAPPOINT);

16break;

17}

18case1:

19{

20drawToolbar.activate(Draw.MULTIPOINT);

21break;

22}

23case2:

24{

25drawToolbar.activate(Draw.LINE);

26break;

27}

28case3:

29{

30drawToolbar.activate(Draw.POLYLINE);

31break;

32}

33case4:

34{

35drawToolbar.activate(Draw.FREEHAND_POLYLINE);36break;

37}

38case5:39{40drawToolbar.activate(Draw.POLYGON);41break;42}

43case6:

44{

45drawToolbar.activate(Draw.FREEHAND_POLYGON);46break;

47}

48case7:

49{

50drawToolbar.activate(Draw.EXTENT);

51break;

52}

53}

54}

11.很简单就完成了这些功能可以运行查看效果。

ArcGIS.Server.9.3和ArcGISAPIforFlex实现Identify的功能图查属性（六）

目的：

1.ArcGISAPIforFlex实现Identify的功能，进行图查属性的功能，这样选择图层然后进行点、线、面的查询最好查到的地理元素高亮显示同时在右边的Grid中显示查到的数据。准备工作：

1.在ArcGIS.Server.9.3发布一个叫usa的MapService，并且把这个Service启动起来。完成后的效果图：

开始：

1.启动FlexBuilder3新建工程以及引入ArcGISAPIforFlexlibrary的开发包。2.新建IdentifyTest.mxml页面，然后在页面上添加esri:Map控件设置esri:ArcGISDynamicMapServiceLayer等，这里还需要高亮显示被查询到的元素所以还需要esri:GraphicsLayer，具体代码如下：

1<mx:Canvaswidth="490"height="311"borderStyle="solid"borderThickness="3"borderColor="#425DE2"verticalCenter="-20"x="11">

2<esri:Mapid="myMap">

3<mx:Panelx="209"y="-10"width="250"height="200"layout="absolute">

4</mx:Panel>

5<esri:ArcGISDynamicMapServiceLayerid="myMapServiceLayer"url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"complete="mapHandler(event)"/>

6<esri:GraphicsLayerid="myGraphicsLayer"symbolFunction="{mySymbolFunction}"/>

7</esri:Map>

8</mx:Canvas>

3.上面的代码中给ArcGISDynamicMapServiceLayer添加了一个complete事件用来当地图载入完成后获取地图的图层名称显示在地图上方的mx:ComboBox上，代码如下：1//获取地图图层名称和index到ComboBox上

2privatefunctionmapHandler(event:Event):void

3{

4//获取图层信息数组

5varlayerInfos:Array;

6layerInfos=myMapServiceLayer.layerInfos;7varlayers:Array=newArray();8//遍历图层信息数组然后把图层的名称和index值添加到新的数组中9for(vari:int=0;i<layerInfos.length;i++)1011{layers.push({label:layerInfos[i].name,data:i});12}13//给ComboBox设定数据源

14layerList.dataProvider=layers;

15}

mx:ComboBox显示代码：

1<mx:ComboBoxid="layerList"verticalCenter="-195"x="139"></mx:ComboBox>

4.上面的GraphicsLayer也添加了一个symbolFunction的功能，这个功能是当有元素添加到GraphicsLayer时进行元素显示样式的设置，这样分别对点、线、面进行样式设定，代码如下：

1privatefunctionmySymbolFunction(graphic:Graphic):Symbol

2{

3varresult:Symbol;

4//根据元素的类型进行显示样式的设定

5switch(graphic.geometry.type)

6

8{{7caseGeometry.GEOMETRY_POINT:

9result=sms;

10break;

11}

12caseGeometry.GEOMETRY_POLYLINE:

13{

14result=sls;

15break;

16}

17caseGeometry.GEOMETRY_POLYGON:

18{

19result=sfs;

20break;

21}

22}

23returnresult;

24}

5.上面代码中的sms、sls、sfs是定义好的Symbol的id,具体定义如下：

1<esri:SimpleLineSymbolid="sls"style="solid"color="0x00FF00"width="2"alpha="1"/>

2<esri:SimpleMarkerSymbolid="sms"style="diamond"color="0x00FF00"siz

e="15"/>3<esri:SimpleFillSymbolid="sfs"/>6.要画图肯定还需要esri:Draw这个控件了，上一篇有比较详细的讲了这里就不说了，代码如下：1<esri:Drawid="drawToolbar"map="{myMap}"graphicsLayer="{myGraphicsLayer}"drawEnd="drawEndHandler(event)"/>7.接着添加mx:ToggleButtonBar了，添加3个子按钮分别是点、线、面的操作，具体代码如下：

1<mx:ToggleButtonBarverticalCenter="-195"itemClick="itemClickHandler(event)"x="11"toggleOnClick="true">

2<mx:dataProvider>

3<mx:Array>

4<mx:Objecticon="{point}"/>

5<mx:Objecticon="{polyline}"/>

6<mx:Objecticon="{polygon}"/>

7</mx:Array>

8</mx:dataProvider>

9</mx:ToggleButtonBar>

8.ToggleButtonBar的itemClickHandler事件代码：

1privatefunctionitemClickHandler(event:ItemClickEvent):void

2

4

6{{{3switch(event.index)5case0:

7drawToolbar.activate(Draw.MAPPOINT);

8break;

9}

10case1:

11{

12drawToolbar.activate(Draw.POLYLINE);

13break;

14}

15case2:

16{

17drawToolbar.activate(Draw.POLYGON);

18break;

19}

20}

21}

9.这样就实现了能在GraphicsLayer上画点、线、面的功能，接下来就是今天主要的代码就是在上面添加esri:Draw的时候给它添加了一个drawEnd="drawEndHandler(event)"，这个就是当绘图完成后执行drawEndHandler(event)这个方法了，主要功能就是在这个方法里实

现Identify的功能的，要实现Identify的功能还需要添加一个esri:IdentifyTask控件，这个就是实现Identify的功能的控件，添加控件代码如下：1<esri:IdentifyTaskid="identifyTask"identifyComplete="identifyCompleteHandler(event)"url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>mx:DataGrid的显示代码：1<mx:DataGridid="datalist"height="311"borderStyle="solid"borderThickness="3"verticalCenter="-20"borderColor="#1B67D9"left="509">

drawEndHandler(event)的代码如下：

1privatefunctiondrawEndHandler(event:DrawEvent):void

2{

3//获取绘图结果Geometry

4vargeometry:Geometry=event.geometry;

5varidentifyParams:IdentifyParameters=newIdentifyParameters();

6//查询结果需要返回Geometry

7identifyParams.returnGeometry=true;

8//查询冗余范围

9identifyParams.tolerance=3;

10//宽

11identifyParams.width=myMap.width;

12//高

13identifyParams.height=myMap.height;

14//设置查询的Geometry

15identifyParams.geometry=geometry;

16//从ComboBox获取选择的图层index设置要查询的图层

17varlayers:Array=newArray();

18layers.push(layerList.value);

19identifyParams.layerIds=layers;

20//查询可见图层

21identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE;

22

23identifyParams.mapExtent=myMap.extent;

24//进行查询

25identifyTask.execute(identifyParams);

26}

27

28//查询完成后执行的事件

29privatefunctionidentifyCompleteHandler(event:IdentifyEvent):void

30{

31vardatas:Array=newArray();

32//myGraphicsLayer.clear();

33//遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示34//同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用35foreach(varresult:IdentifyResultinevent.identifyResults)

36{

37myGraphicsLayer.add(result.feature);

38//datas.push(result.feature.attributes);

39datas.push({"value":result.value});

40}

41//设置mx:DataGrid的数据源

42datalist.dataProvider=datas;

43}

10.这样就完成了所有的代码可以运行测试效果了。

ArcGIS.Server.9.3和ArcGISAPIforFlex实现Query查询定位中心功能（七）

目的：

1.ArcGISAPIforFlex实现Query查询定位中心功能，进行属性查图的功能，选择图层然后输入查询语句进行查询把查到的地理元素高亮显示同时在右边的Grid中显示查到的数据，然后点击Grid中的数据进行对该条数据进行定位中心的显示。

准备工作：

1.在ArcGIS.Server.9.3发布一个叫usa的MapService，并且把这个Service启动起来。

2.采用Esri在线数据

完成后的效果图：

开始：

1.启动FlexBuilder3新建工程以及引入ArcGISAPIforFlexlibrary的开发包。

2.新建QueryTest.mxml页面，这里显示的地图采用Esri提供的在线的NPS_Physical_World_2D的地图比较的漂亮，但是Tiled图没有图层以及字段等数据没有办法进行查询定位，所以在Tiled图的基础上在叠加一个DynamicMap图层就是上面发布的usa的数据，我们对usa的数据进行查询然后结果显示在NPS_Physical_World_2D的地图上面。由于是2个Layer的