ArcGIS API for Flex实现GraphicsLayer上画点、线、面。

目的： ArcGIS API for Flex实现GraphicsLayer上画点、线、面。

准备工作： 1.这次地图数据就用Esri提供的http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer。完成后的效果图：
ArcGIS.Server.9.3 ArcGIS API for Flex zclmj
21 / 80
开始： 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">

<mx:dataProvider>

<mx:Array>

<mx:Object icon="{point}" />

 <mx:Object icon="{point2}" />

 <mx:Object icon="{polyline3}" />

<mx:Object icon="{polyline}" />

<mx:Object icon="{polyline2}" />

<mx:Object icon="{polygon}" />

<mx:Object icon="{polygon2}" />

<mx:Object icon="{polygon3}" />

 </mx:Array>

</mx:dataProvider>

</mx:ToggleButtonBar>

4.上面的代码中icon对应的图标定义在mx:Script中如下：
//图标图片

[Bindable]

[Embed(source="assets/point.gif")]

public var point:Class;

 

[Bindable]

[Embed(source="assets/point2.gif")]

public var point2:Class;

 

[Bindable]

[Embed(source="assets/polyline.gif")]

public var polyline:Class;

 

[Bindable]

[Embed(source="assets/polyline3.gif")]

public var polyline3:Class;

 

[Bindable]

[Embed(source="assets/polyline2.gif")]

 public var polyline2:Class;

 

[Bindable]

[Embed(source="assets/polygon.gif")]

 public var polygon:Class;

 

[Bindable]

[Embed(source="assets/polygon2.gif")]

public var polygon2:Class;

 

[Bindable]

[Embed(source="assets/polygon3.gif")]

 public var polygon3:Class;

 

5.现在要实现在地图上画点、线等就需要esri:GraphicsLayer 的功能，实际上点、线、面都是画在GraphicsLayer的所以需要在Map控件中添加：

<esri:Map id="myMap" extent="{allMap}" logoVisible="false"> 
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer" /> 
<esri:GraphicsLayer id="myGraphicsLayer"/> 
</esri:Map>

6.要进行绘制功能esri已经提供了esri:Draw这个控件能很方便的实现基本图形的绘制，使用代码如下：

<esri:Draw id="drawToolbar" map="{myMap}" graphicsLayer="{myGraphicsLayer}" />

7.esri:Draw有2个属性一个是要进行画图操作的地图控件，一个是画图的容器GraphicsLayer 。

8.接下来定义一下画出来的点、线、面的显示样式，代码如下：

<esri:SimpleLineSymbol id="sls" style="solid" color="0xFF0000" width="2" alpha="1"/> 
<esri:SimpleMarkerSymbol id="sms" style="square" color="0xFF0000" size="10" />
 <esri:SimpleFillSymbol id="sfs" style="solid" color="0xFF0000" alpha="0.5"/>

 9.上面的sls为线的显示样式；sms为点的显示样式；sfs为面的显示样式，关于样式的定义可以查询一下帮助了有很多的样式等可以实现。

10.最后就是编写功能代码在上面的ToggleButtonBar控件中已经给它添加了一个itemClick="itemClickHandler(event)"，这里就是编写itemClickHandler(event)这个方法的代码：

 

import mx.events.ItemClickEvent; 
private function itemClickHandler(event:ItemClickEvent):void 
 { 
      //设置点样式
    drawToolbar.markerSymbol=sms;
      //设置线样式
    drawToolbar.lineSymbol=sls;
     //设置面样式
   drawToolbar.fillSymbol=sfs;
    //更加按钮的index值设置不同的绘制操作
   switch(event.index) 
        { 
             case 0: 
                { 
                    drawToolbar.activate(Draw.MAPPOINT); 
                    break; 
               } 
            case 1: 
              { 
                   drawToolbar.activate(Draw.MULTIPOINT); 
                   break; 
             } 
            case 2: 
            { 
                  drawToolbar.activate(Draw.LINE); 
                  break; 
            }
            case 3: 
           { 
                 drawToolbar.activate(Draw.POLYLINE); 
                 break; 
           } 
           case 4: 
            {
                drawToolbar.activate(Draw.FREEHAND_POLYLINE);
                break; 
            } 
           case 5:
            { 
                drawToolbar.activate(Draw.POLYGON); 
                break; 
            }
         case 6:
           { 
               drawToolbar.activate(Draw.FREEHAND_POLYGON); 
               break; 
           } 
         case 7: 
          { 
               drawToolbar.activate(Draw.EXTENT); 
               break; 
          }
      } 
 }