目的: 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. Nagios NSclient Failed to get CPU value: \238(_total)\6: Failed to get mutex :(

    一台Windows Server 2012的nsclient出现以下的错误,表示无法获得CPU信息 2016-08-08 10:31:33: e:..\..\..\..\trunk\modules\C ...

  2. 如何在JBoss WildFly 8 自定义log4j日志

    最近在 JBoss WildFly 8 下部署 Web应用,自定义的 log4j 日志不工作.console下无日志输出,用System.out.println都不输出内容到console. 原因是J ...

  3. JAVA中精确计算金额BigDecimal

    package com.chauvet.utils; import java.math.BigDecimal; import java.text.DecimalFormat; import java. ...

  4. 什么是JavaEE

    Java技术不仅是一门编程语言而且是一个平台.同时Java语言是一门有着特定语法和风格的高级的面向对象的语言,Java平台是Java语言编写的特定应用程序运行的环境.Java平台有很多种,很多的Jav ...

  5. 有向图强连通分量 Tarjan算法

    [有向图强连通分量] 在有向图G中,如果两个顶点间至少存在一条路径,称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极 ...

  6. VS2013添加使用lib的方法

    使用第三方厂家的库,一般都会有三个文件: xxx.h xxx.lib xxx.dll 头文件很明显,就在需要用到的文件里面include就好. lib文件,可以直接在IDE中添加,具体步骤有两个: 1 ...

  7. LNMP编译安装教程

    LNMP编译安装教程 此次安装在Centos上,我采用的CentOS的版本是:CentOS release 6.5 (Final) 可以通过以下命令查看:lsb_release -a 一.准备工作: ...

  8. C# 操作Word知识汇总

    转自:http://blog.csdn.net/jiutao_tang/article/details/6574740 1. 微软官方实例: 段落.表格.图表 HOW TO:利用 Visual C# ...

  9. .NET异常问题总结

    输入字符串的格式不正确. 有格式化字符替换符号{0}等,“{”和“}”作为特殊符号出现,如果有多余的“{”和“}”就会出错 GZIP压缩出现FF-F0-F1…是无效的输入流 要解压的字节流无效,可能是 ...

  10. 【MySQL】探究之常用SQL

    一些SQL命令(不断更新,我总记不住,哭) List 建库建表 表的重命名(不区分大小写) 列的重命名 编码 修改结构 添加删除索引 大批量删除 binlog相关 select相关 数据库备份和恢复 ...