WebGIS经典例子 - 图文

34 {

35 _layerChanged = false; 36 if(layer) 37 {

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

layer.addEventListener(Event.COMPLETE, removeBusyCursor, false, 0, true);

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

layer.addEventListener(IOErrorEvent.IO_ERROR, removeBusyCursor, false, 0, true); 42

43 if(layer.loaded) 44 {

45 //如果layer载入完成为DataGrid设置数据源 46 setDataProvider(); 47 } 48 else 49 {

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

layer.addEventListener(LayerEvent.LOAD, layerLoadHandler, false, 0, true); 52 } 53 } 54 }

55 super.commitProperties(); 56 }

57 //设置数据源

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(\ 69 //ObjectUtil.copy方法接受一个对象做为参数而返回一个在内存的新位置的此对象的深度拷贝,类似克隆

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

72 //labelField=\ 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 //获取当前可见图层列表 87

visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers; 88 //在当前可见图层列表中加入要显示的图层 89 visibleLayers.addItem(layerInfo.id); 90 }

91 else if(layer is ArcIMSMapServiceLayer) 92 {

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

94 visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers; 95 //在当前可见图层列表中加入要显示的图层 96 visibleLayers.addItem(layerInfo.id); 97 }

98 //设置鼠标显示状态 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 //获取当前可见图层列表 111

visibleLayers=ArcGISDynamicMapServiceLayer(layer).visibleLayers;

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

113 var index:int=visibleLayers.getItemIndex(layerInfo.id); 114 //在当前可见图层列表中去除要隐藏的图层 115 if (index != -1) 116 {

117 visibleLayers.removeItemAt(index); 118 } 119 }

120 else if(layer is ArcIMSMapServiceLayer) 121 {

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

123 visibleLayers=ArcIMSMapServiceLayer(layer).visibleLayers; 124 //查找要隐藏的图层的index

125 var index2:int=visibleLayers.getItemIndex(layerInfo.id); 126 //在当前可见图层列表中去除要隐藏的图层 127 if (index2 != -1) 128 {

129 visibleLayers.removeItemAt(index2); 130 } 131 }

132 //设置鼠标显示状态 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 146 147 uc.TreeRenderer 148 149 150

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

一个节点都是由这个itemRenderer来负责显示。那也就是说还需要实现uc.TreeRenderer的功能。

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

xmlns:mx=”http://www.adobe.com/2006/mxml”

horizontalAlign=”left”

implements=”mx.controls.listClasses.IDropInListItemRenderer”> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

import com.esri.ags.layers.LayerInfo; import mx.controls.listClasses.BaseListData;

//图标图片 [Bindable]

[Embed(source=\ public var layericon:Class;

private var _listData:BaseListData;

public function get listData():BaseListData {

return _listData; }

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

_listData = value; }

//checkbox的点击事件

private function clickHandler(event:MouseEvent):void {

var layerInfo:LayerInfo = LayerInfo(data);

if (cb.selected) {

layerInfo.defaultVisibility = true; //调用TreeToc显示图层方法

TreeToc(listData.owner).showLayer(layerInfo); } else {

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

39 TreeToc(listData.owner).hideLayer(layerInfo); 40 } 41 } 42 ]]> 43 44

id=”cb”

selected=”{data.defaultVisibility}”

click=”clickHandler(event)”/>

45 46 47 48 49

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

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

1 2

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

backgroundColor=”white” xmlns:esri=”http://www.esri.com/2008/ags” xmlns:uc=”uc.*” > 3 4 5

label=”USA” label=”USA_2D”

data=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” />

data=”http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer” /> 6 7

8

9 10

id=”myDynamicService”

url=”{myURL.selectedItem.data}” load=”myDynamicService.defaultVisibleLayers()”/> 11

12 13 14

9.上面代码的红色部分添加了TreeToc，并且设置了一个layer的属性值是绑定