ARCGISSERVERFLEXarcgis api for flex入门加实例教程

1、和ArcGIS API for Flex实现基本的地图浏览（一） 目的：1.ArcGIS API for Flex实现在Flex程序中浏览自己的中发布的地图，一个最基本的入门例子。准备工作：1.在发布一个叫usa的Map Service，并且把这个Service启动起来。2.安装Flex Builder3。3.下载ArcGIS API for Flex library的开发包arcgis_flex_api_1.0-beta然后解压缩到文件夹中，地址：完成后的效果图：开始：1.启动Flex Builder3，点击菜单File->New->Flex Project，然后输入项目名称Pr

2、oject Name:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。3.然后点击Finish按钮后就完成了工程的建立工作，工程建立后有会默认建立一个flexMapApp.mxml的文件，这个就是Flex的页面文件，查看一下代码：1<?xml version="1.0"&

3、#160;encoding="utf-8"?>2<mx:Application xmlns:mx="3    4</mx:Application>54.是一个空的页面了接下来在这个页面中添加Map控件了，Flex下的Map控件支持ArcGISDynamicMapServiceLayer 、ArcGISImageServiceLayer、ArcGISTiledMapServiceLayer、ArcIMSMapServiceLayer 、GraphicsLayer等几种类型的layer，这些类型

4、的layer区别其实看名字就能知道区别了，比如ArcGISDynamicMapServiceLayer就是支持ArcGIS Server发布的普通的地图服务，ArcGISTiledMapServiceLayer支持ArcGIS.Server发布的切片缓存地图。5.在这里采用ArcGISDynamicMapServiceLayer，因为上面在ArcGIS Server中发布的USA的Map Service是普通的动态生成的地图，添加Map控件可以输入代码。代码输入可以在<mx:Appliection>标签内输入代码，具体如下： 1<mx:Application xml

5、ns:mx="2    <esri:Map>3        <esri:ArcGISDynamicMapServiceLayer url="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>4    </esri:Map>5</mx:Application>上面的代码中<es

6、ri:ArcGISDynamicMapServiceLayer>属性url就是上面发布的USA的Map Service的rest服务地址。这样就可以直接运行查看地图效果了，很简单。6.接下来可以对Map控件的属性做一些设置，常用属性解释如下：clickRecenterEnabled：true/false 是否开启按shift键点击地图定位中心的功能。crosshairVisible：true/false 是否在地图的中心显示十字。doubleClickZoomEnabled：true/false 是否开启双击地图放大的功能。keyboardNavigationEnabled&#

7、160; ：true/false 是否开启键盘进行地图导航放大缩小的功能。mapNavigationEnabled ：true/false 是否开启地图导航的功能。panArrowsVisible：true/false 是否在地图的四边以及4个角显示移动地图箭头按钮的功能。panEnabled：true/false 是否开启拖拽地图移动的功能。rubberBandZoomEnabled：true/false 是否开启按shift+拉框放大地图的功能。scaleBarVisible：true/false 是否显示放大缩小功能按钮条。scrollWheelZoomEnabled：true

8、/false 是否开启鼠标滚轮放大缩小的功能。logoVisible：true/false 是否地图上显示logo图标。7：本例完成后的所有代码如下： 1<?xml version="1.0" encoding="utf-8"?>2<mx:Application xmlns:mx="3    <esri:Map horizontalCenter="-34" verticalCenter="1"

9、  width="400" height="250" logoVisible="false" borderStyle="solid" crosshairVisible="true" panArrowsVisible="true">4        <esri:ArcGISDynamicMapServiceLayer&

10、#160;url="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>5    </esri:Map>6</mx:Application>和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示（二） 目的：和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示，在瓦片基图上显示动态图层。准备工作：1.在发布一个叫USA的Map Service，并且把这个Service启动起来，这个作为动态图层数据。2.瓦片

11、数据我这里没有现成的就采用Esri提供的rest世界地图数据服务，地址如下：。完成后的效果图：开始：1.启动Flex Builder3，点击菜单File->New->Flex Project，然后输入项目名称Project Name:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。3.这里要显示

12、2种地图数据一种是瓦块图、一种是动态图，这样就需要ArcGISTiledMapServiceLayer和ArcGISDynamicMapServiceLayer支持，关于这个可以看第一篇了有讲到，在这里瓦块图是作为底图显示首先要先添加ArcGISTiledMapServiceLayer，具体代码如下： Code1<?xml version="1.0" encoding="utf-8"?>2<mx:Application xmlns:mx="3    

13、0;   <mx:Canvas width="500" height="300" horizontalCenter="-63" verticalCenter="-13" borderStyle="solid" borderThickness="2" borderColor="#439AD7">4    &l

14、t;esri:Map logoVisible="false" panArrowsVisible="true" >5        <esri:ArcGISTiledMapServiceLayer url="6    </esri:Map>7    </mx:Canvas>8   &#

15、160;9</mx:Application>4.上面的代码非常简单，首先是在页面上添加了一个Canvas控件用来作为地图的框，然后是在Canvas控件内添加了一个Map控件同时设置好了ArcGISTiledMapServiceLayer这样运行起来就可以浏览世界地图了。5.接下来要在底图上显示上面在发布一个叫USA的动态数据，添加ArcGISDynamicMapServiceLayer并且设置，具体的代码如下： 1<?xml version="1.0" encoding="utf-8"?> 

16、2<mx:Application xmlns:mx=" 3        <mx:Canvas width="500" height="300" horizontalCenter="-63" verticalCenter="-13" borderStyle="solid" borderThickness="

17、2" borderColor="#439AD7"> 4    <esri:Map logoVisible="false" panArrowsVisible="true" > 5        <esri:ArcGISTiledMapServiceLayer url=" 6  

18、      <esri:ArcGISDynamicMapServiceLayer url="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" > 7        </esri:ArcGISDynamicMapServiceLayer> 8    </esri:M

19、ap> 9    </mx:Canvas>10    11</mx:Application>126.上面的代码中添加了<esri:ArcGISDynamicMapServiceLayer url="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" >  </esri:ArcGISDynamicMapServiceLayer>，这个url地址就是发布

20、的USA的rest地址，安装好Ags9.3后可以有ArcGIS Services Directory菜单可以浏览自己发布的所有的rest服务。这样就完成了2种地图类型的叠加显示可以运行查看一下效果。7.通过浏览效果可以发现地图显示范围很大不是以USA为显示范围，这样可以Map控件的extent属性设置一下地图的显示视图范围，这里设置以USA的数据范围为地图默认显示范围，可以在ArcGIS Services Directory浏览USA的MapServer查找到USA数据的最多视图范围为XMin: -127.968857954995、YMin: 25.5778580720472、XMax: -6

21、5.0742781827045、YMax: 51.2983251993735，根据这些参数在mx:Application内添加一个esri:Extent标签如下代码： 1<esri:Extent id="allUsa" xmin="-183.780014745329" ymin="16.2975638854873" xmax="-61.4068547410964" ymax="74.0304580085983"/>8.然后给esri:

22、Map添加一个extent="allUsa"属性，这样就设置了Map控件的默认视图范围为ID为allUsa的ectent,这样就完成了这个练习。9.其他的还可以设置MapServiceLayer中选择自己需要显示部分的图层，比如USA的地图数据中有4个图层分别为Cities、Highways、States、Counties，现在只想显示States和Counties图层，可以加入如下代码： Code1<esri:ArcGISDynamicMapServiceLayer url="http:/jh-53a435fbc0e8/ArcGIS/rest/s

23、ervices/USA/MapServer" >2            <esri:visibleLayers>3            <mx:ArrayCollection>4          

24、0; <mx:Number>2</mx:Number>5            <mx:Number>3</mx:Number>6            </mx:ArrayCollection>7       

25、0;    </esri:visibleLayers>8        </esri:ArcGISDynamicMapServiceLayer>和ArcGIS API for Flex实现自己的Toc控件（三） 目的：1.ArcGIS API for Flex没有提供现成的Toc控件，这里来实现自己的Toc控件。准备工作：1.在发布一个叫USA的Map Service，并且把这个Service启动起来。完成后的效果图：开始：1.启动Flex Build

26、er3新建工程以及引入ArcGIS API for Flex library的开发包，这个过程前面2篇都讲过了这里就不啰嗦了。2.新建LayersOnAndOff.mxml页面，然后在页面上添加Map控件以及设置ArcGISDynamicMapServiceLayer，添加一个ComboBox控件用来地图切换显示。具体代码如下： 1<?xml version="1.0" encoding="utf-8"?> 2<mx:Application xmlns:mx=" 3&

27、#160;   <mx:Array id="arr"> 4        <mx:Object label="USA"  data="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" /> 5      

28、60; <mx:Object label="USA_2D"  data=" 6    </mx:Array> 7    <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="-329" dataProvider="arr"

29、;  y="10"> 8    </mx:ComboBox> 9    <esri:Map logoVisible="false" panArrowsVisible="true" width="463" height="288" x="33" y="40"

30、 borderStyle="solid" borderThickness="3">10    <esri:ArcGISDynamicMapServiceLayer id="myDynamicService" url="myURL.selectedItem.data" load="myDynamicService.defaultVisibleLayers()"/>11  

31、  </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.

32、mxml文件这个就是用来实现Toc功能的。Toc控件这里是用Flex提供的Tree控件的基础上实现的，具体代码如下：  1<?xml version="1.0" encoding="utf-8"?>  2<mx:Tree xmlns:mx="  3<mx:Script>  4    <!CDATA  5   &#

33、160;    import mx.collections.ArrayCollection;  6        import com.esri.ags.layers.ArcIMSMapServiceLayer;  7            import com.esri.ags.laye

34、rs.ArcGISDynamicMapServiceLayer;  8            import com.esri.ags.events.LayerEvent;  9            import com.esri.ags.layers.Layer; 10 

35、60;          import com.esri.ags.layers.LayerInfo; 11            import mx.utils.ObjectUtil; 12            

36、60;13            private var layerInfos:Array; 14            /图层 15            private var 

37、;_layer:Layer; 16            /图层是否更新标识 17            private var _layerChanged:Boolean; 18           

38、; /获取图层 19            public function get layer():Layer 20             21            

39、    return _layer; 22             23            /设置图层 24            public 

40、function set layer(value:Layer):void 25             26                _layer = value; 27      &

41、#160;         _layerChanged=true; 28                invalidateProperties(); 29             30 &

42、#160;          /设置组件属性 31            override protected function commitProperties():void 32            &#

43、160;33                if (_layerChanged) 34                 35          

44、60;         _layerChanged = false; 36                    if(layer) 37           

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

46、#160;             layer.addEventListener(Event.COMPLETE, removeBusyCursor, false, 0, true); 40                   &#

47、160;    /为layer添加发生错误后取消鼠标忙碌显示的监听事件 41                        layer.addEventListener(IOErrorEvent.IO_ERROR, removeBusyCursor, false, 0, 

48、;true); 42                         43                      &

49、#160; if(layer.loaded) 44                         45                   

50、;         /如果layer载入完成为DataGrid设置数据源 46                            setDataProvider(); 47   

51、;                      48                        else 49 

52、60;                       50                          &

53、#160; /如果未载入完成为layer添加载入监听事件 51                            layer.addEventListener(LayerEvent.LOAD, layerLoadHandler, false, 0, tru

54、e); 52                         53                     54 

55、60;               55                mitProperties(); 56             57 

56、;           /设置数据源 58            private function setDataProvider():void 59             60 

57、0;              if(layer is ArcGISDynamicMapServiceLayer) 61                 62        

58、60;           layerInfos=ArcGISDynamicMapServiceLayer(layer).layerInfos; 63                 64          &

59、#160;     else if(layer is ArcIMSMapServiceLayer) 65                 66                

60、60;   layerInfos = ArcIMSMapServiceLayer(layer).layerInfos; 67                 68                register

61、ClassAlias("com.esri.ags.layers.LayerInfo", LayerInfo); 69                /ObjectUtil.copy方法接受一个对象做为参数而返回一个在内存的新位置的此对象的深度拷贝,类似克隆 70          

62、0;     layerInfos = ObjectUtil.copy(layerInfos) as Array; 71                dataProvider = layerInfos; 72        &#

63、160;       /labelField="name" 73                 74             75     

64、0;       76            private function layerLoadHandler(event:LayerEvent):void 77             78    

65、0;           setDataProvider(); 79             80            /显示图层方法 81      

66、60;     public function showLayer(layerInfo:LayerInfo):void 82             83                var visibleLayers

67、:ArrayCollection; 84                if(layer is ArcGISDynamicMapServiceLayer) 85                 86  

68、0;                 /获取当前可见图层列表 87                    visibleLayers=ArcGISDynamicMapServiceLayer(layer).visible

69、Layers; 88                    /在当前可见图层列表中加入要显示的图层 89                    visibleLayers.addI

70、tem(layerInfo.id); 90                 91                else if(layer is ArcIMSMapServiceLayer) 92  

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

72、60;        visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers; 95                    /在当前可见图层列表中加入要显示的图层 96      &

73、#160;             visibleLayers.addItem(layerInfo.id); 97                 98           

74、60;    /设置鼠标显示状态 99                if (visibleLayers)100                101      

75、;              cursorManager.setBusyCursor();102                103            104 &#

76、160;          /隐藏图层方法105            public function hideLayer(layerInfo:LayerInfo):void106            107  

77、60;             var visibleLayers:ArrayCollection;108                if(layer is ArcGISDynamicMapServiceLayer)109    

78、60;           110                    /获取当前可见图层列表111               

79、0;    visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;112                    /查找要隐藏的图层的index113           

80、60;        var index:int=visibleLayers.getItemIndex(layerInfo.id);114                    /在当前可见图层列表中去除要隐藏的图层115       &#

81、160;            if (index != -1)116                    117           &

82、#160;            visibleLayers.removeItemAt(index);118                    119          

83、60;     120                else if(layer is ArcIMSMapServiceLayer)121                122  

84、                  /获取当前可见图层列表123                    visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;1

85、24                    /查找要隐藏的图层的index125                    var index2:int=visibleLayers.getIte

86、mIndex(layerInfo.id);126                    /在当前可见图层列表中去除要隐藏的图层127                    if (index

87、2 != -1)128                    129                        visibleLayer

88、s.removeItemAt(index2);130                    131                132        

89、0;       /设置鼠标显示状态133                if (visibleLayers)134                135    

90、;                cursorManager.setBusyCursor();136                137            

91、;138            139            private function removeBusyCursor(event:Event):void140            141 

92、0;              /删除忙光标142                cursorManager.removeBusyCursor();143            1

93、44    >145</mx:Script>146<mx:itemRenderer>147    uc.TreeRenderer148</mx:itemRenderer>149</mx:Tree>1505.对上面的代码做一下解释，首先Toc控件是在Tree控件的基础上实现的，这个Tree控件获取Layers数据作为数据源进行绑定显示，同时提供了显示图层隐藏图层等方法。最后这个Tree添加了一个叫uc.TreeRenderer的itemRenderer（项渲染器）

94、，也就是说Tree的每一个节点都是由这个itemRenderer来负责显示。那也就是说还需要实现uc.TreeRenderer的功能。6.在uc目录下新增加TreeRenderer.mxml的文件，这个因为是itemRenderer所以需要implements="mx.controls.listClasses.IDropInListItemRenderer"，具体代码如下： 1<?xml version="1.0" encoding="utf-8"?> 2<mx:HBox

95、60;xmlns:mx=" 3    <mx:Script> 4        <!CDATA 5            import com.esri.ags.layers.LayerInfo; 6       

96、;     import mx.controls.listClasses.BaseListData; 7             8            /图标图片 9        &#

97、160;   Bindable 10            Embed(source="assets/Dataframe.GIF")11            public var layericon:Class; 12    &

98、#160;       13            private var _listData:BaseListData;14            15         

99、0;  public function get listData():BaseListData16            17                return _listData;18     &#

100、160;      19            20            public function set listData(value:BaseListData):void21       

101、     22                _listData = value;23            24           &#

102、160;/checkbox的点击事件25            private function clickHandler(event:MouseEvent):void26            27           

103、0;    var layerInfo:LayerInfo = LayerInfo(data);28                29                if (cb.selected)

104、30                31                    layerInfo.defaultVisibility = true;32     

105、60;              /调用TreeToc显示图层方法33                    TreeToc(listData.owner).showLayer(layerInfo);34    

106、0;           35                else36                37     

107、               layerInfo.defaultVisibility = false;38                    /调用TreeToc隐藏图层方法39    

108、                TreeToc(listData.owner).hideLayer(layerInfo);40                41          

109、;  42        >43    </mx:Script>44    <mx:CheckBox id="cb" selected="data.defaultVisibility" click="clickHandler(event)"/>45    &l

110、t;mx:Image source="layericon"/>46    <mx:Label text=""/>47    48</mx:HBox>497.上面的代码中主要是在HBox控件中放了一个CheckBox、一个Image、一个Label，并且为CheckBok添加了点击事件可以控制图层的隐藏显示。8.这样完成了Toc控件的开发，接下来是要在LayersOnAndOff.mxml页面使用这个控件，增加

111、如下代码（红色部分）：  1<?xml version="1.0" encoding="utf-8"?> 2<mx:Application xmlns:mx=" > 3    <mx:Array id="arr"> 4        <mx:Object label="

112、;USA"  data="http:/jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" /> 5        <mx:Object label="USA_2D"  data=" 6    </mx:Array> 7   

113、 <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="-329" dataProvider="arr"  y="10"> 8    </mx:ComboBox> 9    <esri:Map logoVisible=&qu

114、ot;false" panArrowsVisible="true" width="463" height="288" x="33" y="40" borderStyle="solid" borderThickness="3">10    <esri:ArcGISDynamicMapServiceLayer id=&q

115、uot;myDynamicService" url="myURL.selectedItem.data" load="myDynamicService.defaultVisibleLayers()"/>11    </esri:Map>12    <uc:TreeToc layer="myDynamicService" height="288" width

116、="210" x="504" y="40" borderThickness="3"/>13</mx:Application> 149.上面代码的红色部分添加了TreeToc，并且设置了一个layer的属性值是绑定myDynamicService。这样完成了所有功能就可以运行查询效果了。和ArcGIS API for Flex实现Toolbar功能（四） 目的：1.ArcGIS API for Flex实现Toolbar功能，包括ZoomIn、ZoomOut、

117、Pan、PrevExtent、NextExtent、FullExtent功能。准备工作：1.这次地图数据就用Esri提供的。完成后的效果图：开始：1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包，这个过程前面几篇都讲过了这里就不啰嗦了。2.新建ToolBar.mxml页面，然后在页面上添加Map控件以及设置ArcGISTiledMapServiceLayer，具体代码如下：1<?xml version="1.0" encoding="utf-8"?>2<

118、mx:Application xmlns:mx="3<mx:Canvas width="446" height="300" borderStyle="solid" borderThickness="3" borderColor="#3691D1" horizontalCenter="0" verticalCenter="19">4  &

119、#160; <esri:Map id="myMap" width="100%" height="100%" panArrowsVisible="true" logoVisible="false" >5        <esri:ArcGISTiledMapServiceLayer url="6    </esri:Map>7</mx:Canvas>8</mx:Application>93.接下来要实现地图浏览控制就需要添加esri:Navigation控件，这个控件提供了放大、缩小、漫游、前一视图、后一视图等功能方法，在mx:Canvas标签前面添加如下代码： 12<esri:Navigation id="navToolbar" map="