ArcGIS RIA开发实践 2

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公司在2005年收购了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="http://localhost:8399/arcgis/rest/services/China/map/MapServer"/>

 

图 6 Map和MapServiceLayer

默认的Map中还有几个其它的元素，包括控制地图缩放的zoomSlider、地图比例尺scaleBar以及ESRI的logo。如果你不需要这些元素，都可以通过Map中对应的属性对它们进行隐藏，下面我们看一下代码和隐藏后的效果：

 

 

url="http://localhost:8399/arcgis/rest/services/China/map/MapServer"/>

 

图 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="assets/zoomout.png");

downSkin: Embed(source="assets/zoomout.png");

overSkin: Embed(source="assets/zoomout.png");

upSkin: Embed(source="assets/zoomout.png");

}

.navigationPlusButton{

disabledSkin: Embed(source="assets/zoomin.png");

downSkin: Embed(source="assets/zoomin.png");

overSkin: Embed(source="assets/zoomin.png");

upSkin: Embed(source="assets/zoomin.png");

}

.navigationSlider{

dataTipPlacement: "left";

tickColor: #FFFFFF;

tickLength: 10;

tickOffset: 13;

tickThickness: 3;

}

 

 

图 8 改变zoomSlider样式后的Map

另外，Map还有一些默认隐藏的外观设置，比如地图四周的导航按钮、地图中心的十字符号，包括拉框缩放的方框样式等都可以进行设置，下面是修改了一些样式的Map：

图 9 更改一些隐藏外观样式后的Map

从上面我们可以看到，Map有很灵活的可配置性，它的各种元素的外观也很容易定制；当然，如果实在有特殊的需要，Map也可以通过隐藏所有元素来提供给你一个非常干净的地图组件，你则可以在此基础上加上自己的内容。

在有了一个令自己满意的Map的基础上，你就可以使用ArcGIS Flex API中很多激动人心的功能了——同时你会慢慢发现，所有的功能都是紧紧围绕着这个Map的。

2 Navigation 工具

当准备好一个满意的Map的时候，我们已经可以在地图中看到我们在ArcGIS Server中发布的服务了。在这个时候，我们可能马上想到的是如何去操作地图，比如缩放、漫游、前进、后退等等地图导航功能。在这个时候你或许已经发现，当前地图默认的操作是漫游（Pan）；同时，你滚动鼠标滚轮的时候地图会进行缩放；如果按住shift键并在地图上拖动时会出现一个矩形框，松开鼠标后地图会缩放到框中的范围。似乎Map已经可以进行地图导航了。

然而，当你想要切换地图到拉框缩小状态或者别的什么操作，或许就感到有点无所适从了。这时，我们友好的Navigation工具就正式登场了。

Navigation提供了对Map进行导航的诸多功能，通过它可以实现漫游、拉框放大、拉框缩小等类似ADF中Tool的功能和前一视图、后一视图、全图等类似ADF中Command的功能。但是，它并不是一个工具条，而是提供了一些功能，你可以自定义工具条和一些按钮然后绑定到Navigation的功能上。

首先让我们看一下Navigation中漫游、拉框放大、拉框缩小等功能和工具条按钮的绑定。这些类似Tool的功能有个特点就是同时只有一个按钮需要被激活，它指示了当前Map的操作状态，因此我们可以借助Flex中的ToggleButtonBar作为这些功能的宿主。下面的代码定义了一个ToggleButtonBar并绑定了Navigation的上面几个功能：

 

 

 

id="locator"

url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_NA/GeocodeServer"

concurrency="last"

locationToAddressComplete="onLocationToAddressComplete(event)"/>

Locator的方法调用很简单，经过前面这么多功能的使用，我们基本上也是熟稔于胸了。从上面我们可以看到，调用locationToAddress方法需要两个参数，一个是坐标点、另一个是距离（单位：米），当Geocode Service处理完并发回结果时，我们就可以把这个结果标到地图上了。

图 21 Locator的使用

六 ArcGIS Server中配置安全策略文件

Flash Player对访问外部资源有比较严格的限制，因此如果你需要访问跨域的ArcGIS Server服务（比如本地非本机、不同域等），一定要注意Flash的安全策略问题。当你在使用ArcGIS Flex API的时候出现了安全沙箱错误（注意，这个错误在调试状态下不会出现，因为IDE已经忽略了安全策略）；或者运行的时候出不来地图，但是在浏览器中查看REST服务目录是正常的，那么这个时候就需要注意下你是不是进行了跨域访问。

配置服务器允许被Flash进行跨域访问一般需要在远程的Web服务器根目录下放置一个安全策略文件。当我们开发一个ArcGIS Flex API应用，同时它需要访问跨域的ArcGIS Server的时候，一定要在ArcGIS Server的REST Web根目录下放置如下名为“crossdomain.xml”的安全策略文件：

"1.0"?>

 

 

"all"/>

"*"/>

 

以上的安全策略是允许所有的连接，这个安全策略文件需要被放到特定的位置，比如ArcGIS Server for .Net应该是IIS的根目录（如：C:Inetpubwwwroot）；ArcGIS Server for Java应该是web_output目录（如：C:Program FilesArcGISjavaweb_output）。

---

[1] 支持JPG、GIF、PNG、SWF、SVG格式

[2] 上面若干种符号的组合

[3] 同步调用时用户必须等待调用结束后方可继续操作，异步则不需要