ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面(五)

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

目的:
1.ArcGIS API for Flex实现GraphicsLayer上画点、线、面
准备工作:
1.这次地图数据就用Esri提供的http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer
完成后的效果图:


开始:
1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包
2.新建DrawTool.mxml页面,然后在页面上添加esri:Map控件设置esri:ArcGISTiledMapServiceLayer等。
3.和上一篇一样仍旧用mx:ToggleButtonBar来实现功能按钮,mx:ToggleButtonBar需要包含6个按钮分别实现6种不一样的操作,具体代码如下:
 1 < mx:ToggleButtonBar  iconField ="icon"   horizontalCenter ="-47"  verticalCenter ="-151"  itemClick ="itemClickHandler(event)"  toggleOnClick ="true" >
 2          < mx:dataProvider >
 3          < mx:Array >
 4          < mx:Object  icon ="{point}"   />
 5          < mx:Object  icon ="{point2}"   />
 6          < mx:Object  icon ="{polyline3}"   />
 7          < mx:Object  icon ="{polyline}"   />
 8          < mx:Object  icon ="{polyline2}"   />
 9          < mx:Object  icon ="{polygon}"   />
10          < mx:Object  icon ="{polygon2}"   />
11          < mx:Object  icon ="{polygon3}"   />
12          </ mx:Array >
13          </ mx:dataProvider >
14          </ mx:ToggleButtonBar >
4.上面的代码中icon对应的图标定义在mx:Script中如下:
 1 // 图标图片
 2             [Bindable] 
 3             [Embed(source = " assets/point.gif " )]
 4             public  var  point:Class; 
 5             
 6             [Bindable] 
 7             [Embed(source = " assets/point2.gif " )]
 8             public  var  point2:Class; 
 9             
10             [Bindable] 
11             [Embed(source = " assets/polyline.gif " )]
12             public  var  polyline:Class; 
13             
14             [Bindable] 
15             [Embed(source = " assets/polyline3.gif " )]
16             public  var  polyline3:Class; 
17             
18             [Bindable] 
19             [Embed(source = " assets/polyline2.gif " )]
20             public  var  polyline2:Class; 
21             
22             [Bindable] 
23             [Embed(source = " assets/polygon.gif " )]
24             public  var  polygon:Class; 
25             
26             [Bindable] 
27             [Embed(source = " assets/polygon2.gif " )]
28             public  var  polygon2:Class; 
29             
30             [Bindable] 
31             [Embed(source = " assets/polygon3.gif " )]
32             public  var  polygon3:Class; 
5.现在要实现在地图上画点、线等就需要esri:GraphicsLayer 的功能,实际上点、线、面都是画在GraphicsLayer的所以需要在Map控件中添加:
1 < esri:Map  id ="myMap"  extent ="{allMap}"  logoVisible ="false" >
2          < esri:ArcGISTiledMapServiceLayer  url ="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer"   />
3          < esri:GraphicsLayer  id ="myGraphicsLayer" />  
4      </ esri:Map >
6.要进行绘制功能esri已经提供了esri:Draw这个控件能很方便的实现基本图形的绘制,使用代码如下:
1 < esri:Draw  id ="drawToolbar"  map ="{myMap}"  graphicsLayer ="{myGraphicsLayer}"   />
7.esri:Draw有2个属性一个是要进行画图操作的地图控件,一个是画图的容器GraphicsLayer
8.接下来定义一下画出来的点、线、面的显示样式,代码如下:
1 < esri:SimpleLineSymbol  id ="sls"  style ="solid"  color ="0xFF0000"  width ="2"  alpha ="1" />
2 < esri:SimpleMarkerSymbol  id ="sms"  style ="square"  color ="0xFF0000"  size ="10"   />
3 < esri:SimpleFillSymbol  id ="sfs"  style ="solid"  color ="0xFF0000"  alpha ="0.5" />
9.上面的sls为线的显示样式;sms为点的显示样式;sfs为面的显示样式,关于样式的定义可以查询一下帮助了有很多的样式等可以实现。
10.最后就是编写功能代码在上面的ToggleButtonBar控件中已经给它添加了一个itemClick="itemClickHandler(event)",这里就是编写itemClickHandler(event)这个方法的代码:
 1 import mx.events.ItemClickEvent;
 2 private  function  itemClickHandler(event:ItemClickEvent): void
 3              {
 4                //设置点样式
 5                drawToolbar.markerSymbol=sms;
 6                //设置线样式
 7                drawToolbar.lineSymbol=sls;
 8                //设置面样式
 9                drawToolbar.fillSymbol=sfs;
10                //更加按钮的index值设置不同的绘制操作
11                switch(event.index)
12                {
13                    case 0:
14                    {
15                        drawToolbar.activate(Draw.MAPPOINT);
16                        break;
17                    }

18                    case 1:
19                    {
20                        drawToolbar.activate(Draw.MULTIPOINT);
21                        break;
22                    }

23                    case 2:
24                    {
25                        drawToolbar.activate(Draw.LINE);
26                        break;
27                    }

28                    case 3:
29                    {
30                        drawToolbar.activate(Draw.POLYLINE);
31                        break;
32                    }

33                    case 4:
34                    {
35                        drawToolbar.activate(Draw.FREEHAND_POLYLINE);
36                        break;
37                    }

38                    case 5:
39                    {
40                        drawToolbar.activate(Draw.POLYGON);
41                        break;
42                    }

43                    case 6:
44                    {
45                        drawToolbar.activate(Draw.FREEHAND_POLYGON);
46                        break;
47                    }

48                    case 7:
49                    {
50                        drawToolbar.activate(Draw.EXTENT);
51                        break;
52                    }

53                }

54            }
11.很简单就完成了这些功能可以运行查看效果。