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

本文介绍如何使用 ArcGIS API for Flex 实现地理信息系统中的Identify功能,即通过点击地图上的点、线、面来查询并高亮显示地理元素及其属性。文章详细阐述了从创建项目、加载地图服务到实现查询功能的具体步骤。

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

mapiiiid.jpg
开始:
1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包
2.新建IdentifyTest.mxml页面,然后在页面上添加esri:Map控件设置esri:ArcGISDynamicMapServiceLayer等,这里还需要高亮显示被查询到的元素所以还需要esri:GraphicsLayer,具体代码如下:

1None.gif<mx:Canvas width="490" height="311" borderStyle="solid" borderThickness="3" borderColor="#425DE2" verticalCenter="-20" x="11">
2None.gif    <esri:Map id="myMap">
3None.gif        <mx:Panel x="209" y="-10" width="250" height="200" layout="absolute">
4None.gif        </mx:Panel>
5None.gif        <esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" complete="mapHandler(event)"/>
6None.gif        <esri:GraphicsLayer id="myGraphicsLayer" symbolFunction="{mySymbolFunction}"/>
7None.gif    </esri:Map>
8None.gif    </mx:Canvas>
3.上面的代码中给ArcGISDynamicMapServiceLayer添加了一个complete事件用来当地图载入完成后获取地图的图层名称显示在地图上方的mx:ComboBox上,代码如下:
 1None.gif//获取地图图层名称和index到ComboBox上
 2None.gif            private function mapHandler(event:Event):void
 3ExpandedBlockStart.gifContractedBlock.gif            dot.gif{
 4InBlock.gif                //获取图层信息数组
 5InBlock.gif                var layerInfos:Array;
 6InBlock.gif                layerInfos=myMapServiceLayer.layerInfos;
 7InBlock.gif                var layers:Array = new Array();
 8InBlock.gif                //遍历图层信息数组然后把图层的名称和index值添加到新的数组中
 9InBlock.gif                for(var i:int=0;i<layerInfos.length;i++)
10ExpandedSubBlockStart.gifContractedSubBlock.gif                dot.gif{
11ExpandedSubBlockStart.gifContractedSubBlock.gif                    layers.push(dot.gif{label:layerInfos[i].name ,data:i}); 
12ExpandedSubBlockEnd.gif                }

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

12InBlock.gif                    case Geometry.GEOMETRY_POLYLINE:
13ExpandedSubBlockStart.gifContractedSubBlock.gif                    dot.gif{
14InBlock.gif                        result=sls;
15InBlock.gif                        break;
16ExpandedSubBlockEnd.gif                    }

17InBlock.gif                    case Geometry.GEOMETRY_POLYGON:
18ExpandedSubBlockStart.gifContractedSubBlock.gif                    dot.gif{
19InBlock.gif                        result=sfs;
20InBlock.gif                        break;
21ExpandedSubBlockEnd.gif                    }

22ExpandedSubBlockEnd.gif                }

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

10InBlock.gif                    case 1:
11ExpandedSubBlockStart.gifContractedSubBlock.gif                    dot.gif{
12InBlock.gif                        drawToolbar.activate(Draw.POLYLINE);
13InBlock.gif                        break;
14ExpandedSubBlockEnd.gif                    }

15InBlock.gif                    case 2:
16ExpandedSubBlockStart.gifContractedSubBlock.gif                    dot.gif{
17InBlock.gif                        drawToolbar.activate(Draw.POLYGON);
18InBlock.gif                        break;
19ExpandedSubBlockEnd.gif                    }

20ExpandedSubBlockEnd.gif                }

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

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

41InBlock.gif                //设置mx:DataGrid的数据源
42InBlock.gif                datalist.dataProvider=datas;
43ExpandedBlockEnd.gif            }

10.这样就完成了所有的代码可以运行测试效果了。

转载于:https://www.cnblogs.com/xranycall/archive/2010/08/18/1802606.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值