这个例子演示的是通过右侧DataGrid中的复选框来控制相应图层的可见性，由于ArcGISDynamicMapServiceLayer的defaultVisibility属性在地图发布时均为可见（true），所以开始时复选框均为选中状态，注意一下几点：（1）DataGrid的数据源为图层的LayerInfos（其中包括defaultVisibility、layerId、name等，可以用作某些控件的dataField属性）；（2）复选框的select以及click属性；（3）复选框在选中状态时，visibleLayers = dynamicLayer.visibleLayers，visibleLayers.addItem(layerInfo.layerId)将该图层的Id号传过去，具体效果图及代码如下所示：
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>
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>
LayerTOC.mxml
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>
LayerVizRenderer.mxml
转载地址：https://developers.arcgis.com/flex/sample-code/dynamic-map-layers-on-off.htm
时间： 2024-10-29 19:10:09