目的: 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;
}
}
}

ArcGIS API for Flex实现GraphicsLayer上画点、线、面。的更多相关文章

  1. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十)态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

  2. arcgis api for flex之专题图制作(饼状图,柱状图等)

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  3. Clustering with the ArcGIS API for Flex

    Clustering is an excellent technique for visualizing lotss of point data. We've all seen application ...

  4. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(一)GIS一张图的系统开发环境以及flexviewer框架

    系统的GIS功能实现是基于arcgis api for flex,首先附上系统的主界面图,接下来的是对主界面的模块功能详细讲解: 一.GIS环境软件安装 (1)arcgis desktop的安装,要是 ...

  5. arcgis api for flex 开发入门(一)环境搭建

    http://www.cnblogs.com/wenjl520/archive/2009/06/02/1494514.html arcgis api for flex 开发入门(一)环境搭建arcgi ...

  6. ArcGIS API for Silverlight 地图元素点闪烁,线流动显示的处理方式

    原文:ArcGIS API for Silverlight 地图元素点闪烁,线流动显示的处理方式 <Grid x:Name="LayoutRoot" Background=& ...

  7. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十三)台风模块

    config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config ...

  8. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十一)路径导航模块

    config.xml文件的配置如下: <widget label="路径导航" icon="assets/images/lujingdaohang.png" ...

  9. ArcGIS API Reference & Flex API samples学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________学习资源: 1.http://help.arcgis.com/en/webapi/flex/apiref/index.html ...

随机推荐

  1. POJ 2533 动态规划入门 (LIS)

    Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 42914 Accepte ...

  2. mm/memory

    /* *  linux/mm/memory.c * *  Copyright (C) 1991, 1992  Linus Torvalds */ /* * demand-loading started ...

  3. 将Controller抛出的异常转到特定View

    <!-- 将Controller抛出的异常转到特定View --> <bean class="org.springframework.web.servlet.handler ...

  4. 一个简单的linux线程池(转-wangchenxicool)

    线程池:简单地说,线程池 就是预先创建好一批线程,方便.快速地处理收到的业务.比起传统的到来一个任务,即时创建一个线程来处理,节省了线程的创建和回收的开销,响应更快,效率更高. 在linux中,使用的 ...

  5. CE 文件读写操作

    写入字符到文件中: // TODO: 写字符到文件 // 参数: CString类型的文件名FileName;char *类型的数据内容;unsigned int类型内容长度 // 返回: 成功返回T ...

  6. uva 11582

    #include <iostream> #include <map> #include <cmath> #include <vector> #inclu ...

  7. python built-in delattr()

    delattr(object,name) 使用此函数必须保证name是可以被删除,即先调用setattr(object,name,value) name必须是字符串并且是object的属性. 函数的作 ...

  8. C语言中的 extern 关键字

    今天在 BLE 中看到很多 extern 关键字,现在总结一下: extern 关键字主要用于在一个c文件中要用到另一个c文件中的变量或者函数. example: #extern_base.c ; # ...

  9. 【python】删除1~100的素数

    def delPrime(x): if x==1: return True for y in range(2,x): if x%y==0: return True return False x1=ra ...

  10. Swagger使用总结

    Swagger使用总结 1. Swagger是什么? 官方说法:Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作 ...