基于Flex的WebGIS客户端及其应用

何贞铭，胡小夏，刘学锋

（1.长江大学 地球科学学院，湖北 武汉 430100）

基于Flex的WebGIS客户端及其应用

何贞铭1，胡小夏1，刘学锋1

（1.长江大学 地球科学学院，湖北 武汉 430100）

通过对RIA技术与Flex开发模型的介绍，分析了基于Flex的WebGIS客户端框架层次结构及其相互之间的关系，并以武汉市直管公房地理信息系统为例，实现了Flex框架下WebGIS客户端的构建。

WebGIS；Flex；客户端；RIA

近几年，在Web领域出现了富互联网应用（RIA）技术，为WebGIS客户端的发展带来新的契机。RIA具有高度互动性、丰富的用户体验和功能强大的客户端，同时也具有桌面应用程序和Web应用程序的双重特点。Flex通常是指Adobe Flex，是一个用于构建具有表现力的Web应用程序，涵盖了支持RIA的开发和部署的一系列技术组合，是RIA技术运用的完美体现。基于Flex创建的界面表现能力一流，解决了异步调用、界面无刷新和跨平台部署的问题，并且对于流媒体技术的支持最好。本文讨论以RIA技术为核心的Flex框架代替传统的客户端模式在WebGIS客户端实现中的应用。

1 传统WebGIS客户端模式

1.1 CGI模式

CGI是万维网最重要的技术之一，是外部应用程序与Web服务器之间的接口标准，是在CGI程序和Web服务器之间传递信息的规程[1]。依赖CGI技术实现的WebGIS工作模式为：用户通过对Web浏览器的操作，向Web服务器发出请求，运行于Web服务器上的CGI程序依据程序指令将请求发送至GIS服务器或直接在Web服务器上处理，GIS数据的处理主要在GIS服务器上完成，并由GIS服务器将处理好的结果返回给Web服务器，再至客户端。基于CGI的WebGIS体系结构如图1所示。

由于基于CGI模式的WebGIS客户端请求都集中在服务器上进行处理，当大量用户同时对其发出请求时，CGI程序的反应速度会明显减慢，Web服务器的速度也受到限制，经常发生页面白屏现象。

1.2 Plug-in模式

图1 基于CGI的WebGIS体系结构图

Plug-in译为插件，是一种计算机应用程序。基于Plug-in的WebGIS可将少数简单的GIS数据，直接在客户端进行处理，无需请求服务器。这种方式减轻了服务器的工作量，也减少了网络数据传输量。插件依赖于主应用程序，不能独立使用，通常在WebGIS客户端中运用的插件只是在客户端增加一个具有图形识别能力的应用程序，对主应用程序进行一系列的功能扩展，利用这些扩展能力处理用户部分请求，使客户端承担部分负担来减轻服务器和网络的压力[2]。但是，这种模式并不能从根本上解决请求响应速度缓慢的问题，同时由于浏览器的不同，开发插件运用的语言不同，不利于用户在后续使用过程中插件的更新和版本控制。

1.3 JavaApplet 与ActiveX控件

JavaApplet 与ActiveX控件是早期RIA技术运用的体现，都需要嵌入网页中运行，功能强，但与服务端耦合程度高，初次使用时需下载安装相应程序[3,4]。这2种技术在WebGIS运用中颇为类似，客户端浏览器向服务器发出GIS数据处理请求，服务器接收到请求后，向客户端返回GIS相关的JavaApplet 或ActiveX控件和GIS数据，并利用服务器返回的控件处理GIS数据。基于ActiveX控件的WebGIS系统结构如图2所示。JavaApplet可在Java环境下运用，当用户使用支持Java浏览器访问Java支持的网页时，Applet会被下载到本地计算机上执行，因此Applet的执行速度完全不受网络的影响。但是，由于浏览器对JavaApplet的支持有限，使得基于JavaApplet的WebGIS开发和应用也受到了限制。ActiveX控件只适用于Windows平台，有一定的操作系统限制，且其安全性差，无法满足良好性能的WebGIS客户端的实现条件。

图2 基于ActiveX控件的WebGIS系统结构图

2 基于Flex的WebGIS客户端技术与实现

2.1 Flex开发模型

Flex是一个高效、免费、基于组件的开源框架，以RIA技术为核心，着力于表现层的构建，采用GUI界面开发方式，使用基于XML的MXML标记语言。Flex开发框架主要由5个部分组成：用于描述应用程序界面的MXML语言、构建数据模型的ActionScript脚本语言、一个基础类库、运行时的即时服务和编译器。MXML通常被用于用户界面元素的定义，而使用ActionScript脚本语言来定义客户逻辑和过程控制。Flex类库为开发者提供了大量的组件、管理器和行为[5]。把运行中的MXML和ActionScript编译成Flash应用程序，编译后的应用程序可直接运行于Flash播放器或含有Flash播放插件的浏览器上。Flex开发模型如图3所示。

2.2 Flex与服务端的通信

基于Flex的WebGIS系统的表现层和逻辑层是完全分离的，故客户端与服务器的通信依赖于远程服务访问。Flex框架下开发的客户端与服务器之间的数据通信方式有HttpService、WebService和Remoting。在Flex应用程序中调用HttpService对象send方法时，向服务端发出对指定URL的HTTP请求，并返回HTTP响应。Flex支持格式设置为SOAP的消息且通过HTTP传输的Web服务请求和结果。SOAP提供基于XML格式的定义，用于Flex应用程序和Web服务之间交换结构化和类型化信息[6]。Remoting通信方式则是通过访问通道以获得服务端对象，并将该服务对象通过序列化在客户端运行[7]。每种数据通信方式都有各自的特点，在运用时可根据环境需要选择合适的方式。本文中主要选用WebService的通信方式。

2.3 ArcGIS API for Flex

ArcGIS API for Flex是一款由ESRI公司推出的，用于富互联网应用程序开发的应用程序接口，通过Flex API可将ArcGIS Server提供的地图资源和其他资源嵌入到Web应用中。Flex API为开发者在开发基于Flex 的Web应用程序过程中，提供了GIS组件，使系统开发的工作具有一个快速、便捷的起点。

2.4 基于Flex的WebGIS客户端框架与实现

基于Flex的WebGIS客户端是利用Flex API和Flex开发模型框架来设计与实现的，在逻辑结构上，基本可分为8个主要架构元素，如图4所示。

图4 WebGIS客户端架构图

ViewerContainer是所有其他架构元素的根节点，作为一个实例化容器管理客户端页面上其他组件的实例，从整体框架入口启动系统程序时，ViewerContainer最先创建实例并初始化。

ConfigManager主要负责整个系统的config文件加载和配置信息的解析，并将解析后的信息存储于数据结构configData中，通过触发AppEvent.CONFIG_LOADED将configData统一发布给其他组件使用。

UIManager根据配置文件中描述的客户端界面风格，配置信息定义一套系统的UI样式表。

ControlBar主要为客户端界面的搭建提供一系列常用的组件，如菜单选项、工具栏等。

MapManager是整个框架中地图管理的核心，地图管理器负责根据config文件中的配置信息初始化地图控件、加载地图图层，并提供对地图浏览、图层切换、在线编辑、地图导航等事件的响应。

WidgetManager是对整个WebGIS应用框架中系统功能模块的管理。一个Widget封装了一系列独立且针对性强的业务逻辑，用户可通过其完成一系列的任务。

DataManager管理并维护系统内部的公共数据，使得系统中的各组件与Widget均能将公共数据发布到DataManager中或从中获取其他组件发布的数据，从而实现各组件与微件之间的数据共享。

EventBus为事件总线，是不同组件之间进行信息传递的核心，负责整个系统客户端事件的分发与监听，实现同级组件、跨级组件之间的数据交互。

基于Flex框架的WebGIS客户端应用程序从设计到实现大致包括5个步骤：

1） Flash播放器或带有Flash播放插件的浏览器加载并运行系统编译的swf文件；

2） 客户端应用框架加载XML格式的配置文件与客户端界面样式文件，用于客户端应用程序；

3） 根据应用程序配置文件中提供的地图相关服务地址，从GIS服务器上下载并加载地图信息；

4） 应用程序中微件管理器根据config文件中指定的URL，获取相关的微件文件，并进行加载；

5） 客户端各组件加载完毕，等待用户进行交互。

基于上述架构设计实现的WebGIS客户端具有低耦合、高内聚的特点[8]。对于系统开发者来说，这种方式不但简化了代码的维护和定制，还减小了模块编写过程中的阻力。根据职能的不同，将整个框架分为不同的管理模块，使得系统架构层次清晰明了，有利于后期的程序扩展。

3 应用实例

本文以武汉市直管公房地理信息系统为例，实现基于Flex框架的WebGIS客户端设计。利用ArcGIS Server发布地图服务，将发布的地图服务的URL写入config配置文件，并在配置文件中指定每个微件的URL，以便获取地图和微件的相关信息。在程序中创建一个主页面FrmMain.mxml，指定为整个程序的入口，统一集中加载、初始化系统的主构架组件。本系统界面主要分为6部分（见图5）：界面顶端菜单栏中包括了统计分析模块、楼盘表管理模块、专题图模块和地图输出模块，位于界面右端的地图基础操作模块以及界面左端的优保建筑管理模块。依据Flex高度支持流媒体的特点，在本系统中嵌入了图片、视频等丰富的多媒体文件，增强了界面的表现能力，并基于Flex的强大动画特效，使得本系统具有良好的用户体验。另外，依据RIA技术的特性，整个系统也可部署在网络的桌面程序中，不需要等待页面刷新来返回结果，可进行异步响应，用户可同时进行其他操作，使得用户操作与界面表达流畅。

图5 系统界面图

[1] 张成才，孙喜梅，朱淘业.几种流行网络地理信息系统的模式比较研究[J].计算机工程与应用，2002,15:77-79

[2] 施晶晶，马劲松.基于ActiveX控件的WebGIS设计原理[J].计算机应用，2001(7)：68-69

[3] 钟广锐.基于Ajax的WebGIS客户端解决方案研究[J].测绘科学，2007,32(5)：178-179

[4] 贾静，耿衬.基于ArcGIS API for Flex的Web应用初探[J].地理空间信息，2012,10(3)：114-118

[5] 刘俊，谭建军，邵长高. 基于Flex的WebGIS框架设计与实现[J].计算机工程，2010,36(10):242-244

[6] 胡方霞，曾一，高旻.Web Services技术应用与探讨[J].计算机科学，2007，34(3):75-77

[7] 高晓川. Flash Remoting浅析[J].计算机与网络，2006(22):53-54

[8] ESRI. FlexViewer Develope's Guide[EB/OL]. http://game.esrichina-bj.cn/,2008-11-21

Research and Application of WebGIS Client Based on Flex

byHE Zhenming

According to the description of RIA and Flex development model, the hierarchy and relationship of WebGIS client framework based on Flex was analyzed in this paper. And taking geographic information system of state-owned real estate of Wuhan for example,WebGIS client based on Flex framework was achieved.

WebGIS, Flex, client, RIA

P208

B

1672-4623（2014）02-0104-03

10.11709/j.issn.1672-4623.2014.02.036

2013-06-20。

项目来源：国家自然科学基金资助项目（41272136）。

何贞铭，硕士生导师，研究方向为GIS研究及其应用。