[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）
目的：
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![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxNi83MzE2NTU5NTRjN2JlOWQ4ODM1ZWNlNTUxYjUzODVmOC5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
<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中如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
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控件中添加：2
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
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这个控件能很方便的实现基本图形的绘制，使用代码如下：
2
3
4
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为面的显示样式，关于样式的定义可以查询一下帮助了有很多的样式等可以实现。2
3
10.最后就是编写功能代码在上面的ToggleButtonBar控件中已经给它添加了一个itemClick="itemClickHandler(event)"，这里就是编写itemClickHandler(event)这个方法的代码：
1import mx.events.ItemClickEvent;
2private function itemClickHandler(event:ItemClickEvent):void
3![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0Mi8yNGE5MjRhNTdiYTZiM2YyYjUxZmM5ZWRiN2VhNDE4Ni5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4MS85MzEwZTg1YTE0YWY5OWRlNDgxMWZmNGM3N2YxZjkxMS5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYyNS8yMjI1MzAxOTAxMzZjOWM0Y2ZkMjM3Y2MwZDVjZmY5OS5wbmc= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
{
4![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczNS8xNDA4YzUyNjBiMmYwNWU0NTBkZWU5MjlkYjliZTVmNy5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
//设置点样式
5 drawToolbar.markerSymbol=sms;
6 //设置线样式
7 drawToolbar.lineSymbol=sls;
8 //设置面样式
9 drawToolbar.fillSymbol=sfs;
10 //更加按钮的index值设置不同的绘制操作
11 switch(event.index)
12![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1Ny83MTVmMmQwNTUwM2I5OWQ0MWYzYjZiYTJjZGNjYzg0ZC5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk3My9lMDgzZGZkZTVhOTFmNTA5NzlmZTg5NzliNDAxMmI5ZC5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
{
13 case 0:
14 {
15 drawToolbar.activate(Draw.MAPPOINT);
16 break;
17![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgwOS81YmNiMTgwN2VlM2UwMGQyYjNjMjI1ZjBiM2Y1Yzc1MS5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
}
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![[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE2NC9mNDY2OTA1YTNiY2I1ZGNlZjExMGVhYjc5OTgyNTI1NC5naWY= "[转]ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面（五）")
}
11.很简单就完成了这些功能可以运行查看效果。2
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
转载于:https://www.cnblogs.com/xranycall/archive/2010/08/18/1802605.html