ArcGIS For Flex学习之Layers---控制图层的显示与否（利用DataGrid）

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3                xmlns:s="library://ns.adobe.com/flex/spark"
 4                xmlns:esri="http://www.esri.com/2008/ags"
 5                xmlns:samples="com.esri.ags.samples.*"
 6                backgroundColor="0xEEEEEE"
 7                pageTitle="Turning individual layers on/off for an dynamic ArcGIS map service" xmlns:samples1="samples.*">
 8     
 9     <s:layout>
10         <s:HorizontalLayout/>
11     </s:layout>
12     
13     <fx:Script>
14         <![CDATA[
15             import com.esri.ags.events.LayerEvent;
16             
17             import mx.controls.Alert;
18             import mx.rpc.events.FaultEvent;
19             
20             protected function myDynamicService_loadErrorHandler(event:LayerEvent):void
21             {
22                 Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail, "Layer Load Error " + event.fault.faultCode);
23             }
24             
25             protected function myDynamicService_faultHandler(event:FaultEvent):void
26             {
27                 Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail, "Layer Fault " + event.fault.faultCode);
28             }
29         ]]>
30     </fx:Script>
31     
32     <s:controlBarLayout>
33         <s:VerticalLayout gap="10"
34                           paddingBottom="7"
35                           paddingLeft="10"
36                           paddingRight="10"
37                           paddingTop="7"/>
38     </s:controlBarLayout>
39     <s:controlBarContent>
40         <s:RichText width="100%">
41             This sample demonstrates how you can use a custom Table of Contents (TOC) component
42             to allow end-users to easily turn on/off layers for any dynamic ArcGIS map service.
43         </s:RichText>
44         <s:Label fontWeight="bold" text="URL of a dynamic (not cached) Map Service:"/>
45         <s:HGroup width="100%">
46             <s:TextInput id="myURL"
47                          width="95%"
48                          creationComplete="myDynamicService.url = myURL.text"
49                          enter="myDynamicService.url = myURL.text"
50                          text="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"/>
51             <s:Button click="myDynamicService.url = myURL.text" label="Load"/>
52         </s:HGroup>
53     </s:controlBarContent>
54     
55     <esri:Map wrapAround180="true">
56         <esri:extent>
57             <esri:Extent xmin="-14408162" ymin="3592860" xmax="-11130542" ymax="5309942">
58                 <esri:SpatialReference wkid="102100"/>
59             </esri:Extent>
60         </esri:extent>
61         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"/>
62         <esri:ArcGISDynamicMapServiceLayer id="myDynamicService"
63                                            fault="myDynamicService_faultHandler(event)"
64                                            load="myDynamicService.visibleLayers = null"
65                                            loadError="myDynamicService_loadErrorHandler(event)"/>
66     </esri:Map>
67     <samples1:LayerTOC width="210" height="100%"
68                       mapLayer="{myDynamicService}"/>
69     
70 </s:Application>

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <!-- Used by ArcIMS_TOC.mxml and Dynamic_TOC.mxml -->
  3 <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
  4             xmlns:s="library://ns.adobe.com/flex/spark"
  5             width="100%" height="100%"
  6             resizableColumns="false"
  7             sortableColumns="false">
  8     
  9     <fx:Script>
 10         <![CDATA[
 11             import com.esri.ags.events.LayerEvent;
 12             import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
 13             import com.esri.ags.layers.Layer;
 14             import com.esri.ags.layers.supportClasses.LayerInfo;
 15             
 16             import mx.collections.ArrayList;
 17             import mx.collections.IList;
 18             import mx.utils.ObjectUtil;
 19             
 20             private var _layerInfos:Array;
 21             
 22             private var _layer:Layer;
 23             private var _layerChanged:Boolean;
 24             //******************这里自定义mapLayer属性*******************
 25             public function get mapLayer():Layer
 26             {
 27                 return _layer;
 28             }
 29             
 30             public function set mapLayer(value:Layer):void
 31             {
 32                 _layer = value;
 33                 _layerChanged = true;
 34                 invalidateProperties();
 35             }
 36             //**********************************************************
 37 
 38             
 39             override protected function commitProperties():void
 40             {
 41                 if (_layerChanged)
 42                 {
 43                     _layerChanged = false;
 44                     if (mapLayer)
 45                     {
 46                         mapLayer.addEventListener(LayerEvent.UPDATE_END, removeBusyCursor, false, 0, true);
 47                         if (mapLayer.loaded)
 48                         {
 49                             setDataProvider();
 50                         }
 51                         else
 52                         {
 53                             mapLayer.addEventListener(LayerEvent.LOAD, layerLoadHandler, false, 0, true);
 54                         }
 55                     }
 56                 }
 57                 
 58                 // calling this last fixes an issue when the mapLayer is set late via AS
 59                 super.commitProperties();
 60             }
 61             
 62             private function setDataProvider():void
 63             {
 64                 if (mapLayer is ArcGISDynamicMapServiceLayer)
 65                 {
 66                     _layerInfos = ArcGISDynamicMapServiceLayer(mapLayer).layerInfos;
 67                 }
 68                 if (_layerInfos)
 69                 {
 70                     // make sure copy has typed LayerInfo objects
 71                     registerClassAlias("com.esri.ags.layers.supportClasses.LayerInfo", LayerInfo);
 72                     // create a copy since it‘ll be modified
 73                     _layerInfos = ObjectUtil.copy(_layerInfos) as Array;
 74                     
 75                     // remove group layers and correct defaultVisibility
 76                     if (mapLayer is ArcGISDynamicMapServiceLayer)
 77                     {
 78                         var visibleLayers:Array = getDefaultVisibleLayers();
 79                         var layerInfos:Array = _layerInfos.concat(); // create a shallow clone
 80                         _layerInfos = [];
 81                         for each (var layerInfo:LayerInfo in layerInfos)
 82                         {
 83                             if (!layerInfo.subLayerIds) // skip group layers
 84                             {
 85                                 layerInfo.defaultVisibility = visibleLayers.indexOf(layerInfo.layerId) != -1;
 86                                 _layerInfos.push(layerInfo);
 87                             }
 88                         }
 89                     }
 90                     
 91                     dataProvider = new ArrayList(_layerInfos);  //在此设置动态地图服务的LayerInfos为DataGrid的数据源
 92                 }
 93             }
 94             
 95             private function getDefaultVisibleLayers():Array
 96             {
 97                 var result:Array = [];
 98                 
 99                 for each (var layerInfo:LayerInfo in _layerInfos)
100                 {
101                     if (layerInfo.parentLayerId >= 0 && result.indexOf(layerInfo.parentLayerId) == -1)
102                     {
103                         // layer is not visible if it‘s parent is not visible
104                         continue;
105                     }
106                     if (layerInfo.defaultVisibility)
107                     {
108                         result.push(layerInfo.layerId);
109                     }
110                 }
111                 
112                 return result;
113             }
114             
115             private function layerLoadHandler(event:LayerEvent):void
116             {
117                 setDataProvider();
118             }
119             //******************************开关图层主要代码***********************************
120             public function showLayer(layerInfo:LayerInfo):void
121             {
122                 var visibleLayers:IList;
123                 if (mapLayer is ArcGISDynamicMapServiceLayer)
124                 {
125                     var dynamicLayer:ArcGISDynamicMapServiceLayer = mapLayer as ArcGISDynamicMapServiceLayer;
126                     visibleLayers = dynamicLayer.visibleLayers;
127                     if (visibleLayers)
128                     {
129                         visibleLayers.addItem(layerInfo.layerId); // add id
130                     }
131                     else
132                     {
133                         visibleLayers = dynamicLayer.visibleLayers = getDynamicVisibleLayers();
134                     }
135                 }
136                 if (visibleLayers)
137                 {
138                     cursorManager.setBusyCursor();
139                 }
140             }
141             
142             public function hideLayer(layerInfo:LayerInfo):void
143             {
144                 var visibleLayers:IList;
145                 if (mapLayer is ArcGISDynamicMapServiceLayer)
146                 {
147                     var dynamicLayer:ArcGISDynamicMapServiceLayer = mapLayer as ArcGISDynamicMapServiceLayer;
148                     visibleLayers = dynamicLayer.visibleLayers;
149                     if (visibleLayers)
150                     {
151                         var idIndex:int = visibleLayers.getItemIndex(layerInfo.layerId);
152                         if (idIndex != -1)
153                         {
154                             visibleLayers.removeItemAt(idIndex);
155                         }
156                     }
157                     else
158                     {
159                         visibleLayers = dynamicLayer.visibleLayers = getDynamicVisibleLayers();
160                     }
161                 }
162                 if (visibleLayers)
163                 {
164                     cursorManager.setBusyCursor();
165                 }
166             }
167             //********************************************************************************************
168             
169             private function getDynamicVisibleLayers():IList
170             {
171                 var result:ArrayList = new ArrayList();
172                 
173                 for each (var layerInfo:LayerInfo in _layerInfos)
174                 {
175                     if (layerInfo.defaultVisibility)
176                     {
177                         result.addItem(layerInfo.layerId);
178                     }
179                 }
180                 return result;
181             }
182             
183             private function removeBusyCursor(event:Event):void
184             {
185                 cursorManager.removeBusyCursor();
186             }
187         ]]>
188     </fx:Script>
189     
190     <s:columns>
191         <s:ArrayList>
192             <s:GridColumn width="70"
193                           headerText="Visibility"
194                           itemRenderer="samples.LayerVizRenderer"/>
195             <s:GridColumn dataField="layerId" headerText="Layer Name"/>
196         </s:ArrayList>
197     </s:columns>
198     
199 </s:DataGrid>

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <!-- Used by LayerTOC.mxml -->
 3 <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 4                     xmlns:s="library://ns.adobe.com/flex/spark"
 5                     clipAndEnableScrolling="true">
 6     <fx:Script>
 7         <![CDATA[
 8             import com.esri.ags.layers.supportClasses.LayerInfo;
 9             
10             private function cb_clickHandler(event:MouseEvent):void
11             {
12                 var layerInfo:LayerInfo = LayerInfo(data);
13                 
14                 if (cb.selected)
15                 {
16                     layerInfo.defaultVisibility = true;
17                     LayerTOC(grid.dataGrid).showLayer(layerInfo);
18                 }
19                 else  //初始时，点击复选框，cb.selected = false,执行下面的代码
20                 {
21                     layerInfo.defaultVisibility = false;
22                     LayerTOC(grid.dataGrid).hideLayer(layerInfo);
23                 }
24             }
25         ]]>
26     </fx:Script>
27     
28     <s:CheckBox id="cb"
29                 click="cb_clickHandler(event)"
30                 horizontalCenter="0"
31                 selected="{LayerInfo(data).defaultVisibility}"/>
32     <!--defaultVisibility属性是指原始发布的地图服务所设置的图层可见性-->
33 </s:GridItemRenderer>