2024年4月8日发(作者:)

ArcGIS - RIA开发Flex超强应用

ArcGIS RIA开发实践【Flex篇】 I、 ArcGIS Flex API 基础 一 Flex的历史和现状

Flex的前身是Flash,Flash是极为流行的互联网矢量动画解决方案,目前据统计97%

的浏览器都安装有Flash Player插件用以播放swf动画,其中未安装的3%还有很多是因

为某些场合的安全限制导致的,可以说Flash是极为普及的RIA平台。

但是由于Flash是一个动画制作软件,其中有很多比如时间轴、影片剪辑等程序员不

容易理解的概念,因此Macromedia公司推出了Flex。Flex抛弃了许多动画设计术语,转

而使用程序员喜欢的方式开发RIA应用,并且Flex能编译生成可以在Flash Player中运

行的swf文件,这无疑吸引了大量程序员,并且实现了和Flash平台的无缝拼接,从而利

用Flash平台多年积累的大量素材、美工和设计者。

Adobe公司在2021年收购了Macromedia公司,并在第一时间将Flex/Flash冠以

Adobe的商标推向市场,可见其对RIA市场和Flex/Flash的重视。

目前,可以说Adobe Flex/Flash是最流行且最成熟的RIA平台。

二 ArcGIS Flex API概述

ArcGIS Flex API是我自己使用的ArcGIS API for Flex的简称,在本文中将一直使

用这个名称。

ArcGIS Flex API是ArcGIS在RIA领域的第一个产品,因此选择了最为成熟的

Flex/Flash平台。使用ArcGIS Flex API可以开发运行于浏览器中的Web应用或者运行于

桌面的AIR应用,它基于ArcGIS Server的REST接口,所有的功能都可以在REST SDK中

找到影子。

使用ArcGIS Flex API开发的Flex应用可以非常便捷地使用地图功能和REST接口提

供的GIS查询及分析功能;同时,ArcGIS Flex API专注于GIS功能的实现而不重复地创

造组件,因此可以让你的业务和GIS方便地结合起来。

具体关于ArcGIS Flex API可以实现哪些功能,我们在下面的章节中将进行详细的讲

解。

三 一些基本概念

首先,让我们先来了解一些ArcGIS Flex API中的基本概念。事实上你会发现这里的

概念和桌面或ADF开发都有相通之处,不过为了强调一些重点,顺便介绍些ArcGIS Flex

API中的特殊之处,这里还是先对这些内容做点介绍。

1 MapServiceLayer

MapServiceLayer对应的是ArcGIS发布的地图服务,它们是一对一的关系,每个地图

服务在ArcGIS Flex API中都会以一个图层的形式出现。不同种类的地图服务将会对应不

同的MapServiceLayer,ArcGIS Flex API中主要有以下几种MapServiceLayer:

ArcGISDynamicMapServiceLayer ArcGIS Server发布的动态地图服务

ArcGISTiledMapServiceLayer

ArcGIS Server发布的切片地图服务

ArcGISImageServiceLayer

ArcGIS Image Server发布的影像服务

ArcIMSMapServiceLayer ArcIMS发布的地图服务

2 GraphicLayer与Graphic

GraphicLayer并不对应到服务器端的某个地图服务,它完全是客户端的图层。因此,

GraphicLayer在客户端数据表达方面有非常重要的作用,它可以根据各种情况动态地在客

户端显示一些符号化的几何对象――Graphic。

ArcGIS Flex API中的Graphic是一个继承于UIComponent的类,因此它的表现和

Canvas、Button等普通的Flex组件一样,在地图中Graphic就是一个可视化的、可响应

鼠标事件的客户端要素。

Graphic有3个很重要的属性:geometry、symbol和attributes。其中geometry属

性定义的是一个几何对象,它是Graphic的基础,因为Graphic要表达的就是这个几何对

象;symbol属性则定义了这个几何对象通过什么符号表现出来;attributes则可以存放

一系列与空间信息无关的属性数据。从上面可以发现,Graphic可以被理解成是一个在客

户端符号化的要素。关于Graphic的geometry和symbol属性所对应的Geometry类和

Symbol类,接下来在这里做一点更详细的说明。

3 Geometry

Geometry是GIS中很基本的概念,ArcGIS Flex API中定义了如下几何对象:

MapPoint 点

Multipoint 多点

Polyline 多段线

Polygon 多边形

Extent 边界范围

我们可以发现ArcGIS Flex API主要定义了点、线、面这些简单对象,事实上这和

REST SDK中的几何对象是一一对应的,当ArcGIS Flex API和服务器交互的时候,这些几

何对象都会被转化成字符串形式的JSON格式发送到服务器。

4 Symbol

Symbol定义了Geometry使用什么符号表现出来。在ArcGIS Flex API中,一般使用

MarkerSymbol定义点的符号、LineSymbol定义线的符号、FillSymbol定义填充的符号,

另外还有TextSymbol、InfoSymbol等其它符号帮助进行其它信息的辅助表达。下面列出

的是ArcGIS Flex API中提供的常用的Symbol:

SimpleMarkerSymbol 简单点符号

SimpleLineSymbol 简单线符号

SimpleFillSymbol 简单填充符号

CartographicLineSymbol

制图线符号,可定义端点、折点样式

PictureMarkerSymbol 图片[1]点符号

PictureFillSymbol 图片填充符号

TextSymbol 文字符号

InfoSymbol 信息提示符号

CompositeSymbol 复合符号[2]

下面是上面这些符号的预览:

四 地图功能组件

在这小节中,我们主要介绍ArcGIS Flex API中对于一般地图功能的实现和使用。在

这里让

我们暂时先抛开“GIS”,去熟悉一下“地图”,毕竟地图是GIS可视化和功能交互

的基石。

1 Map组件

Map是ArcGIS Flex API中唯一的可视化组件,它可以直接被放置到Flex应用中进行

布局、展现。

Map可以被看作是一个地图, ArcGIS Flex API中所有的操作和功能都会在Map中进

行,因此Map是一个特别重要的对象。如果在应用中有别的业务组件或模块需要和地图交

互(比如把业务数据标到图上),那么只要它们可以获得Map对象的引用就可以了(比如

一种做法就是在它们的构造函数中设置),所有和GIS相关的功能都可以通过Map来实现。

Map中包含各种Layer,这在GIS中非常容易理解――地图中需要加入若干个图层。

在ArcGIS Flex API中,Map中的Layer有两种,一种是对应某个地图服务的

MapServiceLayer、一种是用以绘制自定义要素的GraphicLayer,这里我们先看一下如何

在Map中加载某个地图服务(MapServiceLayer)及其效果。

url=

图 6 Map和MapServiceLayer

默认的Map中还有几个其它的元素,包括控制地图缩放的zoomSlider、地图比例尺

scaleBar以及ESRI的logo。如果你不需要这些元素,都可以通过Map中对应的属性对它

们进行隐藏,下面我们看一下代码和隐藏后的效果:

url=

图 7 隐藏不需要的元素后的Map

需要顺便提一下的是,ESRI的logo能被隐藏掉的前提条件是你使用的是本地的

ArcGIS Server服务。另外,zoomSlider和scaleBar除了可以被隐藏掉,还可以通过定

制样式来改变外观,或许你仅仅是讨厌默认的外观但却需要这个功能。

以下的CSS代码将Map的zoomSlider移到了右边,并且对它按钮的样式、滑块位置

等一系列外观做了定制,接着我们就可以看到新的zoomSlider的样子了:

.mapStyle{ navigation-style-name: navigationStyle;}

.navigationStyle{

top: 6;

right: 6;

navigation-minus-button-style-name: navigationMinusButton;

navigation-plus-button-style-name: navigationPlusButton;

navigation-slider-style-name: navigationSlider; }

.navigationMinusButton {

disabledSkin: Embed(source=

downSkin: Embed(source=

overSkin: Embed(source=

upSkin: Embed(source= }

.navigationPlusButton{

disabledSkin: Embed(source=

downSkin: Embed(source=

overSkin: Embed(source=

upSkin: Embed(source= }

感谢您的阅读,祝您生活愉快。