目的：
1.ArcGIS API for Flex沒有提供現(xiàn)成的Toc控件，這里來實現(xiàn)自己的Toc控件。
準備工作：
1.在ArcGIS.Server.9.3發(fā)布一個叫USA的Map Service，并且把這個Service啟動起來。
完成后的效果圖：
開始：
1.啟動Flex Builder3新建工程以及引入ArcGIS API for Flex library的開發(fā)包，這個過程前面2篇都講過了這里就不啰嗦了。
2.新建LayersOnAndOff.mxml頁面，然后在頁面上添加Map控件以及設(shè)置ArcGISDynamicMapServiceLayer，添加一個ComboBox控件用來地圖切換顯示。具體代碼如下：
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:Array id="arr">
4 <mx:Object label="USA" data="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" />
5 <mx:Object label="USA_2D" data="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer" />
6 </mx:Array>
7 <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="-329" dataProvider="{arr}" y="10">
8 </mx:ComboBox>
9 <esri:Map logoVisible="false" panArrowsVisible="true" width="463" height="288" x="33" y="40" borderStyle="solid" borderThickness="3">
10 <esri:ArcGISDynamicMapServiceLayer id="myDynamicService" url="{myURL.selectedItem.data}" load="myDynamicService.defaultVisibleLayers()"/>
11 </esri:Map>
12</mx:Application> 3.對上面的代碼做一下解釋，首先添加了一個id為arr的對象數(shù)組作為ComboBox的數(shù)據(jù)源，arr的對象數(shù)組包含2個對象：一個是上面發(fā)布的USA得rest地址，一個是Esri提供的在線的rest地址。然后在Map控件的ArcGISDynamicMapServiceLayer的url屬性綁定ComboBox的選擇值，這樣當(dāng)ComboBox選擇發(fā)生變化時地圖也會根據(jù)rest地址進行切換顯示。
4.接下來做Toc控件了，首先在src目錄下新添加一個叫uc的目錄，然后在uc下新建TreeToc.mxml文件這個就是用來實現(xiàn)Toc功能的。Toc控件這里是用Flex提供的Tree控件的基礎(chǔ)上實現(xiàn)的，具體代碼如下：
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Tree xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" fontSize="12">
3<mx:Script>
4 <![CDATA[
5 import mx.collections.ArrayCollection;
6 import com.esri.ags.layers.ArcIMSMapServiceLayer;
7 import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
8 import com.esri.ags.events.LayerEvent;
9 import com.esri.ags.layers.Layer;
10 import com.esri.ags.layers.LayerInfo;
11 import mx.utils.ObjectUtil;
12
13 private var layerInfos:Array;
14 //圖層
15 private var _layer:Layer;
16 //圖層是否更新標識
17 private var _layerChanged:Boolean;
18 //獲取圖層
19 public function get layer():Layer
20 {
21 return _layer;
22 }
23 //設(shè)置圖層
24 public function set layer(value:Layer):void
25 {
26 _layer = value;
27 _layerChanged=true;
28 invalidateProperties();
29 }
30 //設(shè)置組件屬性
31 override protected function commitProperties():void
32 {
33 if (_layerChanged)
34 {
35 _layerChanged = false;
36 if(layer)
37 {
38 //為layer添加完成后取消鼠標忙碌顯示的監(jiān)聽事件
39 layer.addEventListener(Event.COMPLETE, removeBusyCursor, false, 0, true);
40 //為layer添加發(fā)生錯誤后取消鼠標忙碌顯示的監(jiān)聽事件
41 layer.addEventListener(IOErrorEvent.IO_ERROR, removeBusyCursor, false, 0, true);
42
43 if(layer.loaded)
44 {
45 //如果layer載入完成為DataGrid設(shè)置數(shù)據(jù)源
46 setDataProvider();
47 }
48 else
49 {
50 //如果未載入完成為layer添加載入監(jiān)聽事件
51 layer.addEventListener(LayerEvent.LOAD, layerLoadHandler, false, 0, true);
52 }
53 }
54 }
55 super.commitProperties();
56 }
57 //設(shè)置數(shù)據(jù)源
58 private function setDataProvider():void
59 {
60 if(layer is ArcGISDynamicMapServiceLayer)
61 {
62 layerInfos=ArcGISDynamicMapServiceLayer(layer).layerInfos;
63 }
64 else if(layer is ArcIMSMapServiceLayer)
65 {
66 layerInfos = ArcIMSMapServiceLayer(layer).layerInfos;
67 }
68 registerClassAlias("com.esri.ags.layers.LayerInfo", LayerInfo);
69 //ObjectUtil.copy方法接受一個對象做為參數(shù)而返回一個在內(nèi)存的新位置的此對象的深度拷貝,類似克隆
70 layerInfos = ObjectUtil.copy(layerInfos) as Array;
71 dataProvider = layerInfos;
72 //labelField="name";
73
74 }
75
76 private function layerLoadHandler(event:LayerEvent):void
77 {
78 setDataProvider();
79 }
80 //顯示圖層方法
81 public function showLayer(layerInfo:LayerInfo):void
82 {
83 var visibleLayers:ArrayCollection;
84 if(layer is ArcGISDynamicMapServiceLayer)
85 {
86 //獲取當(dāng)前可見圖層列表
87 visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;
88 //在當(dāng)前可見圖層列表中加入要顯示的圖層
89 visibleLayers.addItem(layerInfo.id);
90 }
91 else if(layer is ArcIMSMapServiceLayer)
92 {
93 //獲取當(dāng)前可見圖層列表
94 visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;
95 //在當(dāng)前可見圖層列表中加入要顯示的圖層
96 visibleLayers.addItem(layerInfo.id);
97 }
98 //設(shè)置鼠標顯示狀態(tài)
99 if (visibleLayers)
100 {
101 cursorManager.setBusyCursor();
102 }
103 }
104 //隱藏圖層方法
105 public function hideLayer(layerInfo:LayerInfo):void
106 {
107 var visibleLayers:ArrayCollection;
108 if(layer is ArcGISDynamicMapServiceLayer)
109 {
110 //獲取當(dāng)前可見圖層列表
111 visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;
112 //查找要隱藏的圖層的index
113 var index:int=visibleLayers.getItemIndex(layerInfo.id);
114 //在當(dāng)前可見圖層列表中去除要隱藏的圖層
115 if (index != -1)
116 {
117 visibleLayers.removeItemAt(index);
118 }
119 }
120 else if(layer is ArcIMSMapServiceLayer)
121 {
122 //獲取當(dāng)前可見圖層列表
123 visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers;
124 //查找要隱藏的圖層的index
125 var index2:int=visibleLayers.getItemIndex(layerInfo.id);
126 //在當(dāng)前可見圖層列表中去除要隱藏的圖層
127 if (index2 != -1)
128 {
129 visibleLayers.removeItemAt(index2);
130 }
131 }
132 //設(shè)置鼠標顯示狀態(tài)
133 if (visibleLayers)
134 {
135 cursorManager.setBusyCursor();
136 }
137 }
138
139 private function removeBusyCursor(event:Event):void
140 {
141 //刪除忙光標
142 cursorManager.removeBusyCursor();
143 }
144 ]]>
145</mx:Script>
146<mx:itemRenderer>
147 uc.TreeRenderer
148</mx:itemRenderer>
149</mx:Tree>
150 5.對上面的代碼做一下解釋，首先Toc控件是在Tree控件的基礎(chǔ)上實現(xiàn)的，這個Tree控件獲取Layers數(shù)據(jù)作為數(shù)據(jù)源進行綁定顯示，同時提供了顯示圖層隱藏圖層等方法。最后這個Tree添加了一個叫uc.TreeRenderer的itemRenderer（項渲染器），也就是說Tree的每一個節(jié)點都是由這個itemRenderer來負責(zé)顯示。那也就是說還需要實現(xiàn)uc.TreeRenderer的功能。
6.在uc目錄下新增加TreeRenderer.mxml的文件，這個因為是itemRenderer所以需要implements="mx.controls.listClasses.IDropInListItemRenderer"，具體代碼如下：
1<?xml version="1.0" encoding="utf-8"?>
2<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" implements="mx.controls.listClasses.IDropInListItemRenderer">
3 <mx:Script>
4 <![CDATA[
5 import com.esri.ags.layers.LayerInfo;
6 import mx.controls.listClasses.BaseListData;
7
8 //圖標圖片
9 [Bindable]
10 [Embed(source="assets/Dataframe.GIF")]
11 public var layericon:Class;
12
13 private var _listData:BaseListData;
14
15 public function get listData():BaseListData
16 {
17 return _listData;
18 }
19
20 public function set listData(value:BaseListData):void
21 {
22 _listData = value;
23 }
24 //checkbox的點擊事件
25 private function clickHandler(event:MouseEvent):void
26 {
27 var layerInfo:LayerInfo = LayerInfo(data);
28
29 if (cb.selected)
30 {
31 layerInfo.defaultVisibility = true;
32 //調(diào)用TreeToc顯示圖層方法
33 TreeToc(listData.owner).showLayer(layerInfo);
34 }
35 else
36 {
37 layerInfo.defaultVisibility = false;
38 //調(diào)用TreeToc隱藏圖層方法
39 TreeToc(listData.owner).hideLayer(layerInfo);
40 }
41 }
42 ]]>
43 </mx:Script>
44 <mx:CheckBox id="cb" selected="{data.defaultVisibility}" click="clickHandler(event)"/>
45 <mx:Image source="{layericon}"/>
46 <mx:Label text="{data.name}"/>
47
48</mx:HBox>
49 7.上面的代碼中主要是在HBox控件中放了一個CheckBox、一個Image、一個Label，并且為CheckBok添加了點擊事件可以控制圖層的隱藏顯示。
8.這樣完成了Toc控件的開發(fā)，接下來是要在LayersOnAndOff.mxml頁面使用這個控件，增加如下代碼（紅色部分）： 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" xmlns:uc="uc.*" >
3 <mx:Array id="arr">
4 <mx:Object label="USA" data="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" />
5 <mx:Object label="USA_2D" data="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer" />
6 </mx:Array>
7 <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="-329" dataProvider="{arr}" y="10">
8 </mx:ComboBox>
9 <esri:Map logoVisible="false" panArrowsVisible="true" width="463" height="288" x="33" y="40" borderStyle="solid" borderThickness="3">
10 <esri:ArcGISDynamicMapServiceLayer id="myDynamicService" url="{myURL.selectedItem.data}" load="myDynamicService.defaultVisibleLayers()"/>
11 </esri:Map>
12 <uc:TreeToc layer="{myDynamicService}" height="288" width="210" x="504" y="40" borderThickness="3"/>
13</mx:Application>
14 9.上面代碼的紅色部分添加了TreeToc，并且設(shè)置了一個layer的屬性值是綁定myDynamicService。這樣完成了所有功能就可以運行查詢效果了。
