目的: 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. 深入分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  2. poj2369 Permutations ——置换群

    link:http://poj.org/problem?id=2369 置换群,最简单的那种. 找所有数字循环节的最小公倍数. /* ID: zypz4571 LANG: C++ TASK: perm ...

  3. appserv升级php

    安装thinkphp的时候提示必须要php5.3及以上 本地测试服务器使用的是appserv集成环境 所以要单独升级php 首先到官网下载http://php.net/downloads.php wi ...

  4. java消息推送与接收

    package com.zl; import java.net.ServerSocket; import java.net.Socket; import org.apache.commons.mvc. ...

  5. JS教程:获取当前地址栏URL

    URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成:scheme://host:port/path?query#fragment s ...

  6. python反射的妙用

    反射的简单含义: 通过类名获得类的实例对象 通过方法名得到方法,实现调用 实例: import sys class Webserver(object): def __init__(self,host, ...

  7. 07 Linux su和sudo命令的区别

    一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,beinan用 ...

  8. <<google软件测试之道>>读书笔记

    以前一直从开发的角度来看待测试,看完这本书以后感觉错了,难怪之前公司的测试一直搭建不起来 1.开发人员,开发测试人员,测试人员 * 开发人员负责开发 * 开发测试人员近距离接触代码,负责编写测试用例, ...

  9. HTML 全局属性_02

    New : HTML5 新属性. 属性 描述 accesskey 设置访问元素的键盘快捷键. class 规定元素的类名(classname) contenteditableNew 规定是否可编辑元素 ...

  10. 写MYSQL存储过程遇到的一个小BUG

    DELIMITER $$ USE `income_new`$$ DROP PROCEDURE IF EXISTS `a`$$ CREATE DEFINER=`income_new`@`%` PROCE ...