RIA技术在海洋环境监测信息平台中的应用

施 佺， 陆春龙， 陈建平， 丁卫平

(1.上海理工大学管理学院，上海200093；2.南通大学计算机科学与技术学院，江苏南通226019)

0 引 言

随着海洋信息化管理技术的不断发展，海洋环境监测也已成为实施“数字海洋”战略中的一个重要环节，大量的海洋环境监测信息(如监测数据、音频视频等)要通过地图引擎作为数据展现层来动态直观地显示监测站点的点位信息。在传统的电子地图构件中大多数的研究基于WebGIS技术[1-3]来集中体现，WebGIS由于跨平台、可扩展、信息分布共享、高效的负载平衡等特点，已经在诸多领域中得到广泛的应用。然而WebGIS开发虽然满足了矢量图形的高要求，但它在处理大数据量图像、图形等海量数据传输速率比较缓慢，而且在矢量图形处理中地图引擎过于庞大需要较大的开发工作量；此外还有研究使用AJAX技术[4-6]来实现动态的用户交互，通过用户的操作来绑定数据的显示。然而利用AJAX实现的电子地图缩放效果并不理想，异步数据传输中的延迟问题不能形成流畅的用户体验，并且基于矢量图形的特殊性也大大局限了AJAX技术在该类系统中的应用前景。

而富互联网应用(rich internet application，RIA)[7]结合了桌面程序的反应迅速、交互性强以及Web应用程序易于部署、方便传播的特点，并具备多媒体表达能力，可以将文字、图片、音频、视频等进行无缝集合[8]。因此本文基于.NET平台利用RIA技术进行研究，通过实际应用表明基于RIA的客户端交互技术具有大数据量传输、复杂快速的响应用户请求等特点，在海洋环境监测信息平台应用中具有较好的可行性和高效性。

1 RIA技术及其选取

RIA技术是下一代的、将桌面应用程序交互的用户体验与传统的Web应用的部署灵活性和成本分析结合起来的网络应用程序[7]。RIA具有“富”客户技术，其概念包含两方面，分别是数据模型的丰富和用户界面的丰富。其客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，因此是一种安全、可升级、具有良好适应性的面向服务模型[9]。这种模型采用Web服务驱动，结合了声音、视频和实时对话的综合通信技术使RIA具有前所未有的网上用户体验。在目前众多的RIA技术中，Flex、JavaFX、Silverlight这3种技术已成为它的主流。

1.1 Flex

Macromedia Flex[10]是Adobe公司为满足开发RIA企业级程序员的需求而推出的表示服务器和应用程序的框架。Flex内置的界面可以由Flash Player显示在客户端系统上，开发者使用直观的基于XML的语言来定义丰富的用户界面；该语言由Flex服务器翻译成智能的客户端应用程序，可在普遍存在的Flash运行环境中运行。

1.2 JavaFX

JavaFX[11]是SUN公司利用Java运行环境进入RIA领域的开发技术，它包含JavaFXScript和JavaFXMobile两个部分，使用一种全新的脚本语言，依赖JavaSE/ME运行时，利用Java2D和Swing API来实现在桌面、移动设备、手持设备和电视等环境的RIA富互联网应用。

1.3 Silverlight

Silverlight[12-13]是微软公司推出的新一代RIA富互联网应用技术，能够开发出具有专业图形、音频和视频等多媒体的Web应用程序，它具有和桌面体验一样的、丰富的图形渲染及用户交互控制能力。微软在 Silverlight技术上作了前所未有的改进，那就是它的跨平台、跨编程语言的两大“跨”越能力。所有掌握 Apache、PHP、C#、VB.NET、JavaScript、Python 等技术的编程人员都可以成为它的后台开发成员，同时Silverlight还提供了强大的工具来提高其工作效率。

从目前来看这3种技术各有优势，Flex先入为主，目前已经有了一定的市场；JavaFX作为后起之秀，其优势是它的开源策略；而Silverlight的先天优势是有Windows平台的支持，用来构建和发布下一代的媒体体验和Web交互应用，在客户浏览器端运行时它不但可以灵活地和各种服务器端应用来交互，更具有和桌面体验一样的、丰富的图形渲染及用户交互控制能力。因此这里选用基于Silverlight的RIA技术作为海洋环境监测信息平台的核心应用。

2 系统功能结构分析与设计

2.1 基于Silverlight的RIA系统架构设计

基于Silverlight的RIA中采用Windows通信基础(windows communication foundation，WCF)方式进行数据通信传递[14]，从而使用户用最少的时间来建立外界通信。它以ASP.NET、Windows Forms或COM+等作为宿主，整合.NET平台下所有分布式系统技术，支持TCP、HTTP协议，使得开发者能够建立一个跨平台的安全、可信赖的解决方案。作为新一代RIA技术，Silverlight具有丰富的数据模型，RIA要求“按需所取”在客户端显示和操作数据，因此，系统的设计关键是如何将基于Silverlight的RIA技术与数据库进行交互。

图1给出了海洋环境监测平台基于Silverlight的RIA数据通信架构示意图，Silverlight应用程序根据用户的需要，通过WCF使用异步传输来自业务层调用数据库的信息。该技术使用户界面可以显示和操作更为复杂的嵌入在客户端的数据类型，这使得Silverlight应用程序的控件可以轻松绑定到某些实体的实例及其属性上，从而给Silverlight客户端应用程序提供数据、位图等数据信息。

图1 Silverlight数据通信架构

2.2 系统的功能结构与建模分析

通过对南通市海洋环境监视预报中心进行详细需求调研，分析出了如图2所示的海洋环境监测信息平台体系结构。该信息平台由专项监测、常规监测、跟踪监测、应急监测、共管滩涂、监测网络、保护区监测等7个监测子系统以及后台数据维护子系统构成。

图2 海洋环境监测信息平台的功能结构

整个海洋环境监测信息平台主要包括7个监测项目，其监测内容共用同一张电子海图。整个平台通过菜单导航栏进入各个具体的监测子系统，进入子系统后左侧要求设计树型目录菜单(参见图5的实现)来显示各个监测项目的具体名称，各个项目最小的监测单位为树型目录菜单上的叶子节点 (监测点位)。用户可以通过点击左边的树型目录菜单或电子海图中的监测点位，在右侧获取有关该节点(监测点位)的地理数据、监测的图片文字信息以及相关的监测视频数据信息，同时还要求能够实现对监测数据按各种条件进行检索、查询最新动态数据信息等功能。

统一建模语言(unified modeling language，UML)为开发者提供的是一套多角度的完整方法，用例图、时序图、协作图、活动图等各种图形为系统分析设计提供了强有力的手段。这里采用的基于UML的建模方法在海洋环境监测信息平台开发建模中得到了充分的应用，大大减少了系统开发的工作量，提高了系统分析设计以及实现的效率，开发出的系统平台功能强大、易维护、可扩展，取得了令人满意的效果。由于篇幅限制，图3和图4分别以系统用户为例，给出了管理员登录的用例图和监测信息后台管理模块的时序图。

图3 管理员登录用例

图4 后台管理模块时序

2.3 系统数据库设计

在整个基于RIA的海洋环境监测信息平台数据库的设计过程中，遵循数据设计规范化理论，根据系统调研的需求分析将数据库严格按第三范式进行设计[14]。为减少数据冗余，便于监测数据信息的导入，对各种具有不同单位名称的监测信息数据表进行了优化设计，使得各个监测项目所监测的具有不同单位名称的监测数据信息集成在一张表中，并设计一张相应的单位名称表与之关联对应，这样就大大降低了导入数据的复杂性，提高了数据的易维护性。此外本系统还采用了视图机制，视图是关系数据库系统提供给用户以多种角度观察数据的重要机制。本系统建立了多个视图，其功能可以和基本表一样具有查询、删除和更新的功能，这样简化了用户的操作，还可对机密数据提供了安全保护。

3 基于Silverlight的RIA关键技术的实现

3.1 基于Silverlight的Deep Zoom图像处理技术的实现

为既能节省系统的开发时间，又能高质量的利用Silverlight的RIA技术来实现海洋监测信息平台，这里采用了Silverlight的第三方控件——ComponentOneStudioforSilverlight，它是一套非常完整的控件库，内置了30多个控件，外观十分精美。在这一程序集中开发者可通过C1Maps控件调用DeepZoom来实现图像平滑的缩放处理。Deep Zoom是Silverlight中集成的一个可以无缝、平滑对图片进行缩放处理的技术，它通过以渐进方式加载较高分辨率的图像，为用户提供了一个“模糊到鲜亮”的体验。C1Maps控件调用Deep Zoom调用方法如下：

因此该控件是一个功能强大的Silverlight地图控件，控件所拥有的属性能实现监测信息平台中电子海图的缩放、移动以及定位查找等所有功能。通过该控件实现对大型图像或高分辨率图像的集合进行多种分辨率的缩放、平移或拉伸处理，以达到对大型图像流畅的缩放，并可以通过鼠标拖拽移动图片，通过滚轮缩放图片，该技术对电子地图项目提供了强有力的底层支持。图5是利用Deep Zoom技术实现了在常规监测信息中展示近岸海域趋势性水质监测的各个点位信息，它还实现了如图5中根据经纬度定位地图点位(图钉效果)的功能。

图5 基于Deep Zoom的监测点位信息的实现

在图5中，左击拖拽鼠标或滚动鼠标的滑轮就可以无缝、平滑对电子海图进行缩放功能，当选取趋势性水质监测的27号监测点位，即能实现图6中放大后的高亮显示的监测点位以及该点位的详细监测数据、图文和媒体监控录像等信息。

C1Maps使用3个坐标系统，其中一个就是地理坐标系统(经纬度)，本监测信息平台的电子海图就是使用了该坐标系统作为地图的定位系统，所有监测站点的定位都可以通过右上角文本框输入经纬度值进行坐标定位。另外使用左上角的缩放工具条同样能实现地图的深度缩放和移动功能，右下角为地图的缩放比例，它会随地图的缩放而改变。

3.2 基于Canvas的电子海图经纬度坐标换算算法

在设计中本文还自主设计了基于Canvas(画布)的电子海图经纬度坐标与逻辑坐标的换算算法。使用Canvas布局，以左上角顶点为起始顶点(0,0)，Canvas作为容器，容器内所有元素的坐标属性都是相对于Canvas顶点的偏移坐标。在Path对象中的标记路径点也是采用的相对坐标，而客户端获取的几何模型保存的是经纬度字串，因此需要转换为适应Canvas画布的相对坐标路径。将经纬度字串转换为相对坐标路径的算法如下：

图6 海洋环境监测点位放大

3.3 Silverlight与网页集成实现流媒体的动态播放

根据系统的需求分析，当点击每个监测点位时均要实现监测视频流媒体信息的实时播放功能。因此这里采用 ASP.NET MediaPlayer服务器控件能很好的实现系统流媒体的播放，它可以通过Web应用程序提供远远超过仅使用AJAX和DHTML所获得RIA的体验。该服务器控件能将Silverlight与网页集成实现流媒体的播放，可以把WMA(音频)和WMV(视频)等媒体源集成到Web应用程序中，而无需了解任何XAML或JavaScript知识。该控件在前台页面加入如下代码即可实现：

该控件的外观皮肤可以改变，其MediaSkinSource属性即为它的外观设置、MediaSourse属性则是对它播放文件的路径设置，本信息平台视频文件播放是动态变化的，具体实现关键代码如下：

通过以上代码最后能实现流媒体(双击能全屏)播放功能。

4 实验结果与分析

实验采用C#.NET作为开发应用平台，所有实验均在配置为IntelCoreDuo1.60GHz的CPU和2G内存的WindowsXPProfessional操作系统上进行。本文对实现的基于RIA技术电子海图的海洋监测信息平台与现有的基于WebGIS矢量地图的海域管理平台网络运行性能和效率进行比较，前者采用静态瓦片方式对大数据清晰电子海图(JPG图片格式)进行加载，后者采用SQL Server 2008空间数据库Geometry(几何)类型的矢量地图。两者均为提供的南通六县一市的底图数据，均在相同地理区域下图像数据总大小具有可比性；两个平台部署在同一台机器的两个不同端口，在同一段时间内监测这两个端口的流量和响应时间，在相同时间内流量具有可比性。实例测试结果如表1所示。

表1 RIA与WebGIS技术应用的性能测试比较

由表1可以看出，虽然本系统利用RIA技术的电子海图是后者基于WebGIS的矢量地图数据量要高出几十倍，但其网络传输字节数量和平均总传输速率均比WebGIS矢量地图的应用要高出近3倍，实测页面响应时间得到较大提高。由此可以看出利用RIA开发的平台具有较好的可行性和较高网络运行效率。

5 结束语

本文采用VS.NET开发平台，后台采用SQL Server数据库，利用微软最新基于Silverlight的RIA核心的DeepZoom图像处理技术等关键技术，设计了电子海图的逻辑坐标与经纬度坐标之间的换算算法，实现了全新的海洋环境监测信息平台。实例测试结果表明，该信息平台与现有的基于WebGIS的矢量地图应用系统相比，其图像传输速率与页面响应时间明显提高。该系统已成功应用于南通市海洋环境监视预报中心，系统集海洋环境监测信息的记录、传输、存储、提取和表述于一体，具有处理、管理和分析数据能力。系统的实现极大地提高了工作人员检索统计监测数据信息的效率，并利用电子海图作为表现形式，动态直观图文并茂地展示海洋环境监测数据等多媒体信息，从而更好地为领导制定海洋环境监测等相关政策提供辅助决策。

[1]Fu Yanga,Zeng Guangming,Du Chunyan.Spatial analyzing system for urban land-use management based on GIS and multi-criteria assessment modeling[J].Progress in Natural Science,2008,18(10):1279-1284.

[2]LI Shi Jun,Hong Hui,Liu Pei.A general standard of WebGIS integration[J].Wuhan University Journal of Natural Sciences,2009,14(2):125-128.

[3]Xi Yantao,Wu Jiangguo.Applicationof GML and SVG in the development of WebGIS[J].Journal of China University of Mining&Technology,2008,18(1):140-143.

[4]周牧,谈晓军,左翔.基于AJAX和XML的WebGIS系统研究[J].计算机工程,2009,35(13).271-273.

[5]肖杰,陈翔,何海江,等.基于AJAX和Struts的Web应用的设计与实现[J].计算机工程与设计,2009,30(8),1934-1937.

[6]范阿南,朱教君,张忠辉.基于AJAX的WebGIS应用[J].辽宁工程技术大学学报(自然科学版),2010,29(6):494-497.

[7]希赛网.RIA技术专题[EB/OL].http://tech.csai.cn/zt/RIA/index.htm,2010.

[8]Preciado J C,Linaje M,Sanchez F,et al.Necessity of methodologies to model rich internet applications[C].Proceedings of the Seventh IEEE International Symposium on Web Site Evolution,2005:7-13.

[9]程国雄,胡世清.基于Silverlight的RIA系统架构与设计模式研究[J].计算机工程与设计,2010,31(8):1706-1709.

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

[11]周绍梅,王洪磊,刘小东.JSF和JavaFX技术在RIA开发中的应用[J].计算机应用与软件,2009,26(2):118-119.

[12]丁士峰.精通Silverlight:RIA开发技术详解[M].北京:人民邮电出版社,2008.

[13]王天宝,王尔琪,卢浩.基于Silverlight的WebGIS客户端技术与应用试验[J].地球信息科学学报,2010,12(1):69-74.

[14]严商,黄樟灿.WCF:Windows平台新一代通讯基础研究与分析[J].计算机与数字工程,2008(4):86-89.

[15]王珊,萨师煊.数据库系统概论[M].4版.北京:高等教育出版社,2006.