ArcGIS.Server.9.3和ArcGIS API for Flex的GeometryService和buffer分析(十)
目的:
1.ArcGIS API for Flex用GeometryService实现点、线、面的buffer分析。
准备工作:
1.在ArcGIS.Server.9.3发布一个叫USA的Map Service。
2.在ArcGIS.Server.9.3发布一个叫Geometry的Geometry Service,默认设置就可以了。
完成后的效果图:
开始:
0.首先介绍一下Geometry Service,Geometry Service是给程序提供几何计算如 buffering, simplifying, calculating areas 、lengths, projecting等功能,Geometry Service可以用来代替ArcObjects 或geoprocessing service等做的这些几何计算,它是ArcGIS Server 9.3提供的新功能,本篇就是用它来实现buffer的分析。
1.启动Flex Builder3新建工程以及引入1.0正式版的ArcGIS API for Flex library的开发包。
2.新建bufferTest.mxml页面,添加Map、ArcGISDynamicMapServiceLayer、GraphicsLayer等。具体代码如下:
9.按照上面的过程首先添加ToggleButtonBar的itemClick事件方法itemClickHandler(event),代码如下:
1.ArcGIS API for Flex用GeometryService实现点、线、面的buffer分析。
准备工作:
1.在ArcGIS.Server.9.3发布一个叫USA的Map Service。
2.在ArcGIS.Server.9.3发布一个叫Geometry的Geometry Service,默认设置就可以了。
完成后的效果图:
开始:
0.首先介绍一下Geometry Service,Geometry Service是给程序提供几何计算如 buffering, simplifying, calculating areas 、lengths, projecting等功能,Geometry Service可以用来代替ArcObjects 或geoprocessing service等做的这些几何计算,它是ArcGIS Server 9.3提供的新功能,本篇就是用它来实现buffer的分析。
1.启动Flex Builder3新建工程以及引入1.0正式版的ArcGIS API for Flex library的开发包。
2.新建bufferTest.mxml页面,添加Map、ArcGISDynamicMapServiceLayer、GraphicsLayer等。具体代码如下:
1<mx:Canvas width="490" height="401" borderStyle="solid" borderThickness="3" verticalCenter="16" left="10">
2 <esri:Map id="myMap" crosshairVisible="true">
3 <esri:ArcGISDynamicMapServiceLayer url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" />
4 <esri:GraphicsLayer id="myGraphicsLayer" />
5 </esri:Map>
6 </mx:Canvas>
3. 然后在Map控件的右边在添加一个Grid用来显示buffer分析后的数据,代码如下:
2 <esri:Map id="myMap" crosshairVisible="true">
3 <esri:ArcGISDynamicMapServiceLayer url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer" />
4 <esri:GraphicsLayer id="myGraphicsLayer" />
5 </esri:Map>
6 </mx:Canvas>
1<mx:DataGrid id="datalist" height="398" verticalCenter="14" borderStyle="solid" borderThickness="3" left="508">
2 </mx:DataGrid>
4.这里既然是用Geometry Service实现buffer的当然还需要添加esri:GeometryService控件,它的url属性就是上面发布的叫Geometry的Geometry Service的地址,代码如下:
2 </mx:DataGrid>
1<esri:GeometryService id="myGeometryService" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/Geometry/GeometryServer"/>
5.这里采用在地图上画点、线、面然后根据画的几何图进行buffer,所以还需要ToggleButtonBar按钮组控件、Draw控件以及图形显示样式的定义,具体代码如下:
1<esri:SimpleFillSymbol id="sfs" color="0xFF0000" alpha="0.6">
2 </esri:SimpleFillSymbol>
3 <esri:Draw id="drawToolbar" map="{myMap}" graphicsLayer="{myGraphicsLayer}" drawEnd="drawEndHandler(event)" />
4 <mx:ToggleButtonBar verticalCenter="-203" itemClick="itemClickHandler(event)" toggleOnClick="true" left="11">
5 <mx:dataProvider>
6 <mx:Array>
7 <mx:Object icon="{point}" />
8 <mx:Object icon="{polyline}" />
9 <mx:Object icon="{polygon}" />
10 </mx:Array>
11 </mx:dataProvider>
12 </mx:ToggleButtonBar>
6.point、polyline、polygon的icon定义如下:
2 </esri:SimpleFillSymbol>
3 <esri:Draw id="drawToolbar" map="{myMap}" graphicsLayer="{myGraphicsLayer}" drawEnd="drawEndHandler(event)" />
4 <mx:ToggleButtonBar verticalCenter="-203" itemClick="itemClickHandler(event)" toggleOnClick="true" left="11">
5 <mx:dataProvider>
6 <mx:Array>
7 <mx:Object icon="{point}" />
8 <mx:Object icon="{polyline}" />
9 <mx:Object icon="{polygon}" />
10 </mx:Array>
11 </mx:dataProvider>
12 </mx:ToggleButtonBar>
1<mx:Script>
2 <![CDATA[
3
4 [Bindable]
5 [Embed(source="assets/point.gif")]
6 public var point:Class;
7
8 [Bindable]
9 [Embed(source="assets/polyline.gif")]
10 public var polyline:Class;
11
12 [Bindable]
13 [Embed(source="assets/polygon.gif")]
14 public var polygon:Class;
15
16 ]]>
17 </mx:Script>
7.进行buffer后得到的图形然后用来查询相关结果了所以还需要添加IdentifyTask控件,代码如下:
2 <![CDATA[
3
4 [Bindable]
5 [Embed(source="assets/point.gif")]
6 public var point:Class;
7
8 [Bindable]
9 [Embed(source="assets/polyline.gif")]
10 public var polyline:Class;
11
12 [Bindable]
13 [Embed(source="assets/polygon.gif")]
14 public var polygon:Class;
15
16 ]]>
17 </mx:Script>
1<esri:IdentifyTask id="identifyTask" identifyComplete="identifyCompleteHandler(event)" url="http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer"/>
8.接下来开始编写功能代码,过程首先是用Draw工具在GraphicsLayer上画几何图形,然后用GeometryService对几何图形进行buffer,然后用分析得到的结果图形进行IdentifyTask出结果显示在DataGrid中。9.按照上面的过程首先添加ToggleButtonBar的itemClick事件方法itemClickHandler(event),代码如下:
1private 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 }
10.接着是Draw控件的drawEnd时间方法drawEndHandler(event),代码如下:
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 }
1private function drawEndHandler(event:DrawEvent):void
2 {
3 var myGraphic:Graphic=event.graphic;
4 //设置buffer参数
5 var bufferParameters : BufferParameters = new BufferParameters();
6 bufferParameters.features=[myGraphic];
7 //buffer距离半径
8 bufferParameters.distances = [100000];
9 //buffer单位
10 bufferParameters.unit = BufferParameters.UNIT_METER;
11 //buffer空间参照系,102113为WKID是REST API定义好的空间参照系的id
12 bufferParameters.bufferSpatialReference = new SpatialReference(102113);
13 //添加BUFFER_COMPLETE监听
14 myGeometryService.addEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler);
15 //进行buffer分析
16 myGeometryService.buffer( bufferParameters );
17 }
11.上面的代码中用GeometryService进行buffer已经有详细注释了,执行buffer方法后会执行bufferCompleteHandler方法,代码如下:
2 {
3 var myGraphic:Graphic=event.graphic;
4 //设置buffer参数
5 var bufferParameters : BufferParameters = new BufferParameters();
6 bufferParameters.features=[myGraphic];
7 //buffer距离半径
8 bufferParameters.distances = [100000];
9 //buffer单位
10 bufferParameters.unit = BufferParameters.UNIT_METER;
11 //buffer空间参照系,102113为WKID是REST API定义好的空间参照系的id
12 bufferParameters.bufferSpatialReference = new SpatialReference(102113);
13 //添加BUFFER_COMPLETE监听
14 myGeometryService.addEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler);
15 //进行buffer分析
16 myGeometryService.buffer( bufferParameters );
17 }
1//buffer完成后调用方法
2 private function bufferCompleteHandler( event : GeometryServiceEvent ) : void
3 {
4 myGraphicsLayer.clear();
5 //移除BUFFER_COMPLETE监听
6 myGeometryService.removeEventListener(GeometryServiceEvent.BUFFER_COMPLETE,bufferCompleteHandler);
7 //获取buffer结果Graphic
8 for each (var graphic : Graphic in event.graphics )
9 {
10 //设置显示样式
11 graphic.symbol = sfs;
12 //添加到GraphicsLayer进行显示
13 myGraphicsLayer.add( graphic );
14
15 var identifyParams:IdentifyParameters=new IdentifyParameters();
16 //查询结果需要返回Geometry
17 identifyParams.returnGeometry=true;
18 //查询冗余范围
19 identifyParams.tolerance=1;
20 //宽
21 identifyParams.width = myMap.width;
22 //高
23 identifyParams.height = myMap.height;
24 //设置查询的Geometry
25 identifyParams.geometry=graphic.geometry;
26 //从ComboBox获取选择的图层index设置要查询的图层
27 //查询图层id为2的图层,就是States层
28 identifyParams.layerIds=[2];
29 //查询可见图层
30 //identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE;
31 identifyParams.mapExtent=myMap.extent;
32 //进行查询
33 identifyTask.execute(identifyParams);
34 }
35 }
12.上面的代码中在最后执行了IdentifyTask的execute方法进行Identify查询,查询结束后会调用identifyCompleteHandler方法把结果显示在DataGrid中,代码如下:
2 private function bufferCompleteHandler( event : GeometryServiceEvent ) : void
3 {
4 myGraphicsLayer.clear();
5 //移除BUFFER_COMPLETE监听
6 myGeometryService.removeEventListener(GeometryServiceEvent.BUFFER_COMPLETE,bufferCompleteHandler);
7 //获取buffer结果Graphic
8 for each (var graphic : Graphic in event.graphics )
9 {
10 //设置显示样式
11 graphic.symbol = sfs;
12 //添加到GraphicsLayer进行显示
13 myGraphicsLayer.add( graphic );
14
15 var identifyParams:IdentifyParameters=new IdentifyParameters();
16 //查询结果需要返回Geometry
17 identifyParams.returnGeometry=true;
18 //查询冗余范围
19 identifyParams.tolerance=1;
20 //宽
21 identifyParams.width = myMap.width;
22 //高
23 identifyParams.height = myMap.height;
24 //设置查询的Geometry
25 identifyParams.geometry=graphic.geometry;
26 //从ComboBox获取选择的图层index设置要查询的图层
27 //查询图层id为2的图层,就是States层
28 identifyParams.layerIds=[2];
29 //查询可见图层
30 //identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE;
31 identifyParams.mapExtent=myMap.extent;
32 //进行查询
33 identifyTask.execute(identifyParams);
34 }
35 }
1//查询完成后执行的事件
2 private function identifyCompleteHandler(event:IdentifyEvent):void
3 {
4 myNav.activate(Navigation.PAN);
5 var datas:Array=new Array();
6 //myGraphicsLayer.clear();
7 //遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示
8 //同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用
9 for each (var result:IdentifyResult in event.identifyResults)
10 {
11 myGraphicsLayer.add(result.feature);
12 //datas.push(result.feature.attributes);
13 datas.push({"value":result.value});
14 }
15 //设置mx:DataGrid的数据源
16 datalist.dataProvider=datas;
17 }
13.这样就完成了buffer的功能,运行测试效果。2 private function identifyCompleteHandler(event:IdentifyEvent):void
3 {
4 myNav.activate(Navigation.PAN);
5 var datas:Array=new Array();
6 //myGraphicsLayer.clear();
7 //遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示
8 //同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用
9 for each (var result:IdentifyResult in event.identifyResults)
10 {
11 myGraphicsLayer.add(result.feature);
12 //datas.push(result.feature.attributes);
13 datas.push({"value":result.value});
14 }
15 //设置mx:DataGrid的数据源
16 datalist.dataProvider=datas;
17 }