ArcGIS API for Flex

ArcGIS.Server.9.3和ArcGIS API for Flex实现基本的地图浏览（一）

目的：

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

准备工作：

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

2.安装Flex Builder3。

3.下载ArcGIS API for Flex library的开发包arcgis_flex_api_1.0-beta然后解压缩到文件夹中，地址：http://resou https://www.360docs.net/doc/0118095428.html,/arcgisserver/apis/flex/index.cfm

完成后的效果图：

开始：

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

2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc 文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex 组件了。

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

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

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

代码输入可以在标签内输入代码，具体如下：

上面的代码中属性url就是上面发布的USA的Map Service的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：本例完成后的所有代码如下：

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

目的：

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

准备工作：

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

2.瓦片数据我这里没有现成的就采用Esri提供的rest世界地图数据服务，地址如下：https://www.360docs.net/doc/0118095428.html,/A rcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。

完成后的效果图：

开始：

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

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

5.接下来要在底图上显示上面在ArcGIS.Server.9.3发布一个叫USA的动态数据，添加ArcGISDynamicMapServiceLa yer并且设置，具体的代码如下：

6.上面的代码中添加了

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

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

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

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

ArcGIS.Server.9.3和ArcGIS API for Flex实现自己的Toc控件（三）

目的：

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

准备工作：

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

完成后的效果图：

开始：

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

2.新建LayersOnAndOff.mxml页面，然后在页面上添加Map控件以及设置ArcGISDynamicMapServiceLayer，添加一个ComboBox控件用来地图切换显示。具体代码如下：

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

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

5import mx.collections.ArrayCollection;

6import https://www.360docs.net/doc/0118095428.html,yers.ArcIMSMapServiceLayer;

7import https://www.360docs.net/doc/0118095428.html,yers.ArcGISDynamicMapServiceLayer;

8import https://www.360docs.net/doc/0118095428.html,yerEvent;

9import https://www.360docs.net/doc/0118095428.html,yer;

10import https://www.360docs.net/doc/0118095428.html,yerInfo;

11import mx.utils.ObjectUtil;

13private var layerInfos:Array;

14//图层

15private var_layer:Layer;

16//图层是否更新标识

17private var_layerChanged:Boolean;

18//获取图层

19public function get layer():Layer

20{

21return_layer;

22}

23//设置图层

24public function set layer(value:Layer):void

25{

26_layer=value;

27_layerChanged=true;

28invalidateProperties();

29}

30//设置组件属性

31override protected function commitProperties():void

32{

33if(_layerChanged)

34{

35_layerChanged=false;

36if(layer)

37{

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

39layer.addEventListener(https://www.360docs.net/doc/0118095428.html,PLETE,removeBusyCursor,fals e,0,true);

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

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

43if(layer.loaded)

44{

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

46setDataProvider();

47}

48else

49{

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

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

52}

53}

54}

https://www.360docs.net/doc/0118095428.html,mitProperties();

56}

57//设置数据源

58private function setDataProvider():void

59{

60if(layer is ArcGISDynamicMapServiceLayer)

61{

62layerInfos=ArcGISDynamicMapServiceLayer(layer).layerInfos;

63}

64else if(layer is ArcIMSMapServiceLayer)

65{

66layerInfos=ArcIMSMapServiceLayer(layer).layerInfos;

67}

68registerClassAlias("https://www.360docs.net/doc/0118095428.html,yerInfo",LayerInfo);

69//ObjectUtil.copy方法接受一个对象做为参数而返回一个在内存的新位置的此对象的深度

拷贝,类似克隆

70layerInfos=ObjectUtil.copy(layerInfos)as Array;

71dataProvider=layerInfos;

72//labelField="name";

74}

76private function layerLoadHandler(event:LayerEvent):void

77{

78setDataProvider();

79}

80//显示图层方法

81public function showLayer(layerInfo:LayerInfo):void

82{

83var visibleLayers:ArrayCollection;

84if(layer is ArcGISDynamicMapServiceLayer)

85{

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

87visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers; 88//在当前可见图层列表中加入要显示的图层

89visibleLayers.addItem(layerInfo.id);

90}

91else if(layer is ArcIMSMapServiceLayer)

92{

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

94visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;

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

96visibleLayers.addItem(layerInfo.id);

97}

98//设置鼠标显示状态

99if(visibleLayers)

100{

101cursorManager.setBusyCursor();

102}

103}

104//隐藏图层方法

105public function hideLayer(layerInfo:LayerInfo):void

106{

107var visibleLayers:ArrayCollection;

108if(layer is ArcGISDynamicMapServiceLayer)

109{

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

111visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;

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

113var index:int=visibleLayers.getItemIndex(layerInfo.id);

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

115if(index!=-1)

116{

117visibleLayers.removeItemAt(index);

118}

119}

120else if(layer is ArcIMSMapServiceLayer)

121{

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

123visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;

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

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

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

127if(index2!=-1)

128{

129visibleLayers.removeItemAt(index2);

130}

131}

132//设置鼠标显示状态

133if(visibleLayers)

134{

135cursorManager.setBusyCursor();

136}

137}

138

139private function removeBusyCursor(event:Event):void

140{

141//删除忙光标

142cursorManager.removeBusyCursor();

143}

144]]>

145

146

147uc.TreeRenderer

148

149

150

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

6.在uc目录下新增加TreeRenderer.mxml的文件，这个因为是itemRenderer所以需要implements="mx.controls. listClasses.IDropInListItemRenderer"，具体代码如下：

5import https://www.360docs.net/doc/0118095428.html,yerInfo;

6import mx.controls.listClasses.BaseListData;

8//图标图片

9[Bindable]

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

11public var layericon:Class;

13private var_listData:BaseListData;

15public function get listData():BaseListData

16{

17return_listData;

18}

20public function set listData(value:BaseListData):void

21{

22_listData=value;

23}

24//checkbox的点击事件

25private function clickHandler(event:MouseEvent):void

26{

27var layerInfo:LayerInfo=LayerInfo(data);

29if(cb.selected)

30{

31layerInfo.defaultVisibility=true;

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

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

34}

35else

36{

37layerInfo.defaultVisibility=false;

38//调用TreeToc隐藏图层方法

39TreeToc(listData.owner).hideLayer(layerInfo);

40}

41}

42]]>

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

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

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

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

目的：

1.ArcGIS API for Flex实现Toolbar功能，包括ZoomIn、ZoomOut、Pan、PrevExtent、NextExtent、FullExtent 功能。

准备工作：

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

https://www.360docs.net/doc/0118095428.html,/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。

完成后的效果图：

开始：

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

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

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

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

4//图标图片

5[Bindable]

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

7public var ZoomIn:Class;

9[Bindable]

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

11public var ZoomOut:Class;

13[Bindable]

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

15public var Pan:Class;

17[Bindable]

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

19public var Back:Class;

21[Bindable]

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

23public var Forward:Class;

25[Bindable]

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

27public var FullExt:Class;

29]]>

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

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

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

2private function initToolbar1():void

4toolbar1.selectedIndex=2;

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

7private function itemClickHandler(event:ItemClickEvent):void

9switch(event.index)

10{

11case0://选择为zoomin

12{

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

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

1private function navToolbarExtent(type:String):void

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

5navToolbar.zoomToPrevExtent();

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

9navToolbar.zoomToNextExtent();

10}

11else if(type=="Full")//

12{

13navToolbar.zoomToFullExtent();

14}

15}

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

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

目的：

1.ArcGIS API for Flex实现GraphicsLayer上画点、线、面。

准备工作：

1.这次地图数据就用Esri提供的https://www.360docs.net/doc/0118095428.html,/ArcGIS/rest/services/NPS_Physical_World_2D/ MapServer。

完成后的效果图：

开始：

1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包。

2.新建DrawTool.mxml页面，然后在页面上添加esri:Map控件设置esri:ArcGISTiledMapServiceLayer等。

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

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

1//图标图片

2[Bindable]

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

4public var point:Class;

6[Bindable]

7[Embed(source="assets/point2.gif")]

8public var point2:Class;

10[Bindable]

11[Embed(source="assets/polyline.gif")]

12public var polyline:Class;

14[Bindable]

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

16public var polyline3:Class;

18[Bindable]

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

20public var polyline2:Class;

22[Bindable]

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

24public var polygon:Class;

26[Bindable]

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

28public var polygon2:Class;

30[Bindable]

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

32public var polygon3:Class;

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

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

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

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

9.上面的sls为线的显示样式；sms为点的显示样式；sfs为面的显示样式，关于样式的定义可以查询一下帮助了有很多的样式等可以实现。

10.最后就是编写功能代码在上面的ToggleButtonBar控件中已经给它添加了一个itemClick="itemClickHandler(even t)"，这里就是编写itemClickHandler(event)这个方法的代码：

1import mx.events.ItemClickEvent;

2private function itemClickHandler(event:ItemClickEvent):void

4//设置点样式

5drawToolbar.markerSymbol=sms;

6//设置线样式

7drawToolbar.lineSymbol=sls;

8//设置面样式

9drawToolbar.fillSymbol=sfs;

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

11switch(event.index)

12{

13case0:

14{

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和ArcGIS API for Flex实现Identify的功能图查属性（六）

目的：

1.ArcGIS API for Flex实现Identify的功能，进行图查属性的功能，这样选择图层然后进行点、线、面的查询最好查到的