ArcGIS.Server.9.3和ArcGIS API for Flex实现Identify的功能图查属性(六)

时间:2008-10-22 19:34:00 来源:互联网 作者: 神秘的大神 字体:

目的:
1.ArcGIS API for Flex实现Identify的功能,进行图查属性的功能,这样选择图层然后进行点、线、面的查询最好查到的地理元素高亮显示同时在右边的Grid中显示查到的数据
准备工作:
1.在ArcGIS.Server.9.3发布一个叫usa的Map Service,并且把这个Service启动起来
完成后的效果图:


开始:
1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包
2.新建IdentifyTest.mxml页面,然后在页面上添加esri:Map控件设置esri:ArcGISDynamicMapServiceLayer等,这里还需要高亮显示被查询到的元素所以还需要esri:GraphicsLayer,具体代码如下:
1 < mx:Canvas  width ="490"  height ="311"  borderStyle ="solid"  borderThickness ="3"  borderColor ="#425DE2"  verticalCenter ="-20"  x ="11" >
2      < esri:Map  id ="myMap" >
3          < mx:Panel  x ="209"  y ="-10"  width ="250"  height ="200"  layout ="absolute" >
4          </ mx:Panel >
5          < esri:ArcGISDynamicMapServiceLayer  id ="myMapServiceLayer"  url ="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"  complete ="mapHandler(event)" />
6          < esri:GraphicsLayer  id ="myGraphicsLayer"  symbolFunction ="{mySymbolFunction}" />
7      </ esri:Map >
8      </ mx:Canvas >
3.上面的代码中给ArcGISDynamicMapServiceLayer添加了一个complete事件用来当地图载入完成后获取地图的图层名称显示在地图上方的mx:ComboBox上,代码如下:
 1 // 获取地图图层名称和index到ComboBox上
 2             private  function  mapHandler(event:Event): void
 3              {
 4                //获取图层信息数组
 5                var layerInfos:Array;
 6                layerInfos=myMapServiceLayer.layerInfos;
 7                var layers:Array = new Array();
 8                //遍历图层信息数组然后把图层的名称和index值添加到新的数组中
 9                for(var i:int=0;i<layerInfos.length;i++)
10                {
11                    layers.push({label:layerInfos[i].name ,data:i}); 
12                }

13                //给ComboBox设定数据源
14                layerList.dataProvider=layers;
15            }
mx:ComboBox显示代码:
1 < mx:ComboBox  id ="layerList"  verticalCenter ="-195"  x ="139" ></ mx:ComboBox >
4.上面的GraphicsLayer也添加了一个symbolFunction的功能,这个功能是当有元素添加到
GraphicsLayer时进行元素显示样式的设置,这样分别对点、线、面进行样式设定,代码如下:
 1 private  function  mySymbolFunction(graphic:Graphic):Symbol
 2              {
 3                var result:Symbol;
 4                //根据元素的类型进行显示样式的设定
 5                switch(graphic.geometry.type)
 6                {
 7                    case Geometry.GEOMETRY_POINT:
 8                    {
 9                        result=sms;
10                        break;
11                    }

12                    case Geometry.GEOMETRY_POLYLINE:
13                    {
14                        result=sls;
15                        break;
16                    }

17                    case Geometry.GEOMETRY_POLYGON:
18                    {
19                        result=sfs;
20                        break;
21                    }

22                }

23                return result;
24            }
5.上面代码中的sms、sls、sfs是定义好的Symbol的id,具体定义如下:
1 < esri:SimpleLineSymbol  id ="sls"  style ="solid"  color ="0x00FF00"  width ="2"  alpha ="1" />
2      < esri:SimpleMarkerSymbol  id ="sms"  style ="diamond"  color ="0x00FF00"  size ="15" />
3      < esri:SimpleFillSymbol  id ="sfs" />
6.要画图肯定还需要esri:Draw这个控件了,上一篇有比较详细的讲了这里就不说了,代码如下:
1 < esri:Draw  id ="drawToolbar"  map ="{myMap}"  graphicsLayer ="{myGraphicsLayer}"  drawEnd ="drawEndHandler(event)"   />
7.接着添加mx:ToggleButtonBar了,添加3个子按钮分别是点、线、面的操作,具体代码如下:
1 < mx:ToggleButtonBar  verticalCenter ="-195"   itemClick ="itemClickHandler(event)"  x ="11"  toggleOnClick ="true" >
2          < mx:dataProvider >
3          < mx:Array >
4          < mx:Object  icon ="{point}"   />
5          < mx:Object  icon ="{polyline}"   />
6          < mx:Object  icon ="{polygon}"   />
7          </ mx:Array >
8          </ mx:dataProvider >
9      </ mx:ToggleButtonBar >
8.ToggleButtonBar的itemClickHandler事件代码:
 1 private  function  itemClickHandler(event:ItemClickEvent): void
 2              {
 3                switch(event.index)
 4                {
 5                    case 0:
 6                    {
 7                        drawToolbar.activate(Draw.MAPPOINT);
 8                        break;
 9                    }

10                    case 1:
11                    {
12                        drawToolbar.activate(Draw.POLYLINE);
13                        break;
14                    }

15                    case 2:
16                    {
17                        drawToolbar.activate(Draw.POLYGON);
18                        break;
19                    }

20                }

21            }
9.这样就实现了能在GraphicsLayer上画点、线、面的功能,接下来就是今天主要的代码就是在上面添加esri:Draw的时候给它添加了一个drawEnd="drawEndHandler(event)",这个就是当绘图完成后执行drawEndHandler(event)这个方法了,主要功能就是在这个方法里实现Identify的功能的,要实现Identify的功能还需要添加一个esri:IdentifyTask控件,这个就是实现Identify的功能的控件,添加控件代码如下:
1 < esri:IdentifyTask  id ="identifyTask"  identifyComplete ="identifyCompleteHandler(event)"  url ="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" />
mx:DataGrid的显示代码:
1 < mx:DataGrid  id ="datalist"  height ="311"  borderStyle ="solid"  borderThickness ="3"  verticalCenter ="-20"  borderColor ="#1B67D9"  left ="509" >
drawEndHandler(event)
的代码如下:
 1 private  function  drawEndHandler(event:DrawEvent): void
 2              {
 3                //获取绘图结果Geometry
 4                var geometry:Geometry=event.geometry;
 5                var identifyParams:IdentifyParameters=new IdentifyParameters();
 6                //查询结果需要返回Geometry
 7                identifyParams.returnGeometry=true;
 8                //查询冗余范围
 9                identifyParams.tolerance=3;
10                //
11                identifyParams.width = myMap.width;
12                //
13                identifyParams.height = myMap.height;
14                //设置查询的Geometry
15                identifyParams.geometry=geometry;
16                //从ComboBox获取选择的图层index设置要查询的图层
17                var layers:Array=new Array();
18                layers.push(layerList.value);
19                identifyParams.layerIds=layers;
20                //查询可见图层
21                identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE;
22                
23                identifyParams.mapExtent=myMap.extent;
24                //进行查询
25                identifyTask.execute(identifyParams);
26            }

27             
28              // 查询完成后执行的事件
29             private  function  identifyCompleteHandler(event:IdentifyEvent): void
30              {
31                var datas:Array=new Array();
32                //myGraphicsLayer.clear();
33                //遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示
34                //同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用
35                for each (var result:IdentifyResult in event.identifyResults)
36                {
37                    myGraphicsLayer.add(result.feature);
38                    //datas.push(result.feature.attributes);    
39                    datas.push({"value":result.value});
40                }

41                //设置mx:DataGrid的数据源
42                datalist.dataProvider=datas;
43            }
10.这样就完成了所有的代码可以运行测试效果了。