基于WebGIS的气象综合显示系统改进与实现

赵文芳 刘旭林 聂 凯

1)(北京市气象信息中心，北京 100089)2)(北京市气象探测中心,北京 100089)



基于WebGIS的气象综合显示系统改进与实现

赵文芳1)刘旭林2)*聂 凯1)

1)(北京市气象信息中心，北京 100089)2)(北京市气象探测中心,北京 100089)

针对基于WebGIS的气象信息显示和查询系统在应用中存在交互性差、响应速度慢、可扩展性不强等问题,引入MapServer开源应用框架pMapper，对框架的技术路线进行探讨，并提出在pMapper框架下实现基于Ajax的WebGIS方案，最后通过修改源代码和开发嵌入式组件快速构建基于Ajax的WebGIS气象综合显示系统，实现原业务系统的升级。通过在实际业务中使用证明，改进后的系统可有效提高WebGIS 的运行效率，可支持100～150用户并发；多数页面平均响应时间在3 s之内。基于pMapper框架开发WebGIS仅需要15～30 d，提高了开发效率，为WebGIS开发人员提供了一种快速构建WebGIS应用系统的新思路。

WebGIS; MapServer; 网络地图服务

引 言

2006年北京市气象局建立了基于WebGIS气象信息显示和查询系统[1]，该系统以开源MapServer为开发平台，采用传统的WebGIS实现方法Java Applet，结合超文本预处理器(PHP)技术初步实现了气象数据在WebGIS下的发布、查询、统计等功能。但随着气象数据应用业务的不断发展和需求的变化，该系统在长期运行中出现了一些问题。首先，传统的Java Applet方法存在一定局限性。它只能通过在HTML(HyperText Markup Language)文件中嵌入 〈Applet〉标签完成图形的显示、移动、拉框放大缩小和漫游等操作，不能支持鼠标滚动缩放地图、鼠标拖拽等操作，地图可操作性不高。其次，页面是基于整体刷新模式的，随着客户端并发请求的增加经常出现响应请求超时、地图数据无法正常更新导致页面出现空白区等缺点。 因此，该系统需要完善功能，提升性能以支撑基础气象信息综合显示业务。

Ajax(Asynchronous Javascript and XML)是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换使网页实现异步更新。它的出现使浏览器可以为用户提供更为自然的浏览体验，也为WebGIS的实现提供了新的解决思路[2-6]。本文在了解MapServe的发展动态[7]和Ajax技术的基础上，引入MapServer的开源应用框架pMapper[8]，提出基于pMapper框架开发WebGIS的方法，实现基于Ajax的WebGIS应用系统的快速重新构建，并对相应的实现方案进行详细阐述。

1 pMapper框架简介

pMapper是一个MapServer的应用框架[9-12]，它由一系列的PHP，JavaScript，CSS(Cascading Style Sheets)，XML(eXtensible Markup Language)文件组成。pMapper框架实现了基于Ajax的WebGIS，具备地图操作、空间分析、属性查询和空间检索等功能，同时支持用户开发嵌入式组件[13-15]实现一些个性化功能。

pMapper框架用到的关键技术包括服务器端和客户。服务器端主要是PHP/Mapscript类库的开发，pMapper框架将MapScript(MapServer的PHP模块)提供的API封装成类和公共函数支撑各类应用，如绘制地图、创建图例、图层管理、查询检索、响应Ajax请求的处理。客户端主要是JavaScrip的容器和类。在客户端，pMapper框架有一个非常重要的JavaScript全局对象，它相当于一个容器，包含一些全局变量和类对象，负责响应用户发出请求。其中，主要的类对象包括动态地图Map类、图层图例管理类、属性查询类、页面布局类、鼠标键盘消息类等。pMapper框架使用Ajax完成服务器端和客户端之间的数据交换。

pMapper框架的优点包括：①可降低开发难度，减少开发工作。基于pMapper的主要开发工作集中在客户端，有Web开发经验的程序员仅需要15～30 d即可完成开发工作；反之若没有框架的技术支持进行基于Ajax的WebGIS开发，可能需要3～6个月。② pMapper框架是开源项目，透明度好，漏洞的发现和解决，新功能的提出都很快，用户可以随时获取最新信息。因此，基于pMapper框架开发的应用系统具有良好的扩展性，能更好地适用变化的用户需求。

2 系统总体框架及主要功能

2.1 系统总体框架

图1显示了系统的4层体系结构。数据层包括关系数据库、GIS空间库、文件系统，是整个应用系统的数据支撑。数据访问层提供数据接口服务，发布一些接口功能函数以实现数据交换。应用服务器层是用户层和数据访问层之间的互动代理，负责信息管理与用户请求加工。用户层通常也称之为表现层，基于浏览器为用户呈现一个丰富的、具有高交互性的可视化界面，以图文一体化的方式显示空间和属性信息，同时也为用户提供地图交互、信息查询、地图分析的交互功能。

图1 系统架构图Fig.1 Overall structure of system

2.2 运行流程

pMapper框架的客户端页面基于PHP语言，用户通过客户端浏览器访问相应的URL(Uniform Resource Locator)时，pMapper框架会快速构建用户界面(组成HTML页面的导航栏、菜单、工具栏、输入框等)，然后调用地图服务加载地图数据完成页面动态构建过程。

pMapper框架是一个开源项目，其官方网站提供的文档比较简单，缺乏对整体运行流程的相关阐述，这给基于框架的二次开发工作带来了不便。因此，本文通过分析追踪框架源代码总结了pMapper框架的整体运行流程如图2所示。该流程可分为以下几个过程：①初始化PHP全局变量、公共静态类对象、加载全局函数、读取配置文件。②读取MapServer的配置文件，生成地图对象实例，加载图层图例相关类对象，初始化地图大小、范围、比例尺等。③创建页面HTML元素。④加载系列JavaScript对象，初始化全局JavaScript类对象。⑤创建地图图像，由JavaScript发送数据请求(包含获取图层、地图范围、地图长宽高等参数)，服务器端绘制地图保存到指定目录返回结果给客户端。⑥利用JavaScript 动态输出HTML元素，包括地图、地图图层、工具栏等，设置一些元素的默认状态，完成页面构建和数据加载。

图2 页面构建流程Fig.2 Work flow of system

2.3 系统主要功能

系统主要功能包括实时资料的显示、要素的统计查询、预警等，对站点的操作包括站点快速定位、站点查询、站点表格数据显示等。

2.3.1 系统主界面

由图3可以看到系统的页面布局，即由横跨顶部页头、3列内容以及横跨底部的页脚组成，3列内容的左侧是功能导航菜单，中间是地图及数据显示区，右侧为图层列表和鹰眼区。地图区域上方为工具栏。

图3 系统主界面Fig.3 Main user interface of system

2.3.2 实时资料显示

实时资料显示包括多要素的分层显示和单要素分级显示。多要素分层显示是指常规要素站点填图菜单，主要完成自动气象站要素(温、压、湿、风等)的分层显示。单要素分级是指单要素显示菜单，分别显示温、压、湿、风、降水5个要素，按预先设定好的阈值将每一种要素分为二级，高于此阈值的点用红色表示，低于此阈值的点用蓝色表示，阈值可以动态调整。这两个功能支持1年内的自动气象站实况数据按时间查询，数据的更新间隔为5 min。

2.3.3 要素统计

要素统计包括固定时次统计和动态时段统计。固定时次统计主要指近3，6，12，24 h的气温、气压、湿度、风速极值统计和累积降水量统计，统计结果以色斑图和站点叠加的方式显示在地图上，同时还支持在弹出框窗口以表格方式显示统计结果，并提供表格数据下载。动态时段统计是指用户输入起始时间和结束时间并提交请求，在地图上动态显示统计结果。

2.3.4 预 警

气温、降水、风速预警显示用红色警示超过阈值站点，醒目直观。系统支持动态修改要素的阈值，如高温预警阈值(默认为35℃)、低温预警阈值(默认为-10℃)、最大2 min风速阈值(默认为8 m/s)、最大阵风风速(默认为17.1 m/s)，可以根据不同季节设定。

2.3.5 表格数据显示

点击表格显示按钮，将在弹出窗口中以表格形式显示相应的气象数据，点击表格中某站点，地图将迅速定位到以该站点为中心，并以蓝色圆圈突出显示。不同页面，表格数据显示内容有差别。如常规要素站点填图页面，表格数据显示站点某一时刻的所有观测要素，温度统计页面的表格数据显示某一时刻所有站的温度统计结果。

3 主要开发工作

3.1 主要技术路线

pMapper是一个基于Ajax技术的WebGIS应用框架，提供基本的地图操作和简单的空间分析、查询和检索等功能，可支持多种风格的Web页面，但也存在一些缺点。如Web页面布局不能完全符合用户使用习惯，查询结果的显示方式和内容也不能完全满足用户需求。因此，基于pMapper框架的WebGIS开发工作应侧重于以开发符合用户习惯的图形用户接口(GUI)、开发独立的插件、修改源代码等方面。

开发符合用户习惯的GUI可以通过修改pMapper框架提供的配置文件和嵌入的JQueryUI 源码来实现；独立的插件开发和源代码修改则需要在深入分析pMapper框架原有功能实现原理的基础上实现。pMapper框架将用户与地图的操作进行分类处理，不同的操作触发不同的请求并返回JSON(JavaScript Object Notation)格式的数据或者地图文件。开发人员需要了解每一类操作和对应的请求处理流程，然后对返回的JSON数据进行不同处理，即可实现查询结果的个性化显示[16]。

3.2 主要开发工作

3.2.1 嵌入式插件的开发

用户个性化的功能可以通过嵌入式插件实现。用户可以在pMapper官方网站上下载插件，也可以选择自己开发。嵌入式插件由JavaScript，CSS，PHP 3类文件构成，其开发可分为以下4步：①创建一个新JavaScript 对象(包括成员变量和函数)，在全局容器中添加此对象的引用；这个新JavaScript 对象的成员函数主要用于鼠标消息处理和解析PHP页面返回的数据结果。②创建PHP函数用来处理客户端请求并返回数据结果。③在应用中调用这些组件对象并赋予不同的属性值,使其产生不同的Ajax 效果。④在全局配置文件中添加组件管理配置信息。

气象要素阈值的动态设置和气象要素的表格显示功能通过开发插件实现。

3.2.2 修改源代码完善已有功能

修改源代码首先分析原有功能实现的流程，重点剖析页面相应的CSS和JavaScript鼠标消息响应事件、向服务器发送哪一类请求(如加载地图、属性查询、空间定位等)、服务器端如何进行相应的请求处理、客户端对返回结果的解析等环节，然后根据具体需求修改源代码。通过该方法，系统实现了工具栏My97日历控件的嵌入、按行政分区查看地图、气象站点查询等功能。

3.2.2.1 工具栏嵌入日历

选择My97日历控件作为系统的日期时间控件，创建一个输入框标签和图片标签，通过绑定HTML元素标识符(ID)和鼠标消息响应事件实现日历调用实现日期时间输入和选择功能。

3.2.2.2 按行政分区查看

按行政分区查看功能是指在页面工具栏提供一个行政分区列表，用户选择不同的行政分区后地图范围随之动态变化。如用户选择北京城区，地图显示范围是城区，用户选择昌平区地图随之变为昌平区范围，通常北京市气象局预报员关注北京市自动气象站实况，各区县气象局预报员则侧重关注该区自动气象站实况。

该功能实现主要方法为增加一个下拉列表标签，修改其对应的change(function())消息响应函数，将每个行政分区的地理坐标范围作为传递参数向地图服务器发送Ajax请求，实现页面地图显示区数据的更新和整个页面的局部刷新。

3.2.2.3 站点查询

站点查询，即在地图上点击某个站点，将在弹出窗口显示站点的气象要素表和24 h时序图，鼠标移动到站点上方，在提示框显示站点当前时次的观测要素值。

该功能首先创建一个PHP脚本用于实现站点24 h要素表和曲线图的显示，传入参数包括站点、观测时间；然后修改相应的消息函数，将Ajax请求指向PHP脚本，即可实现在弹出窗口显示表格和曲线图功能。

3.2.2.4 站点快速定位

站点的快速定位功能提供了一个站点下拉列表，当用户选中站点后地图会迅速定位到这个站点，站点在地图上居中高亮度显示。

其实现是在页面添加一个下拉列表，修改对应的change(function())消息响应函数，增加向地图服务器发送站点查询请求和处理返回结果等代码。

4 系统性能

原有系统在用户并发数达到50以上,平均请求响应耗时3～6 s，如果并发数达到80以上，页面会出现空白或者地图区域出现马赛克现象。相比之下，改进后的系统响应速度大幅度提高，用户的体验效果得到进一步改善，浏览器兼容性也得到增强。改进后的系统能支持100～150个用户并发；绝大多数页面的平均响应时间在3 s之内，如自动气象站实况页面、温度统计、风要素统计页面，而动态时段降水统计页面平均响应时间为5～6 s。从Web流量监控分析结果看，有天气过程时候用户访问量会突然增长，浏览最多的5类页面是自动气象站5 min实况、1 h实况、固定时次降水统计、动态时段降水统计和温度统计；访问时段峰值出现在08:00(北京时，下同)和16：00；访问最多的用户群为北京市气象台。

5 结论与讨论

本文总结出的pMapper框架的运行流程以及文中给出的运行流程图可以帮助读者更好地理解pMapper框架工作原理，具有一定的参考价值。对于非GIS专业的程序员来说，利用pMapper框架开发基于Ajax的WebGIS应用系统是一个省时、省力的选择。系统建设表明，基于Ajax的WebGIS与传统的WebGIS相比，在技术路线、实现方法上存在很大差异，因此，在利用pMapper框架开发WebGIS应用系统时需要注意以下几点：

1) 系统功能模块设计围绕客户端发请求、服务器端解析请求返回数据、客户端处理返回数据等环节进行。

2) 充分利用pMapper框架的日志信息进行测试功能、调试代码等工作。pMapper框架在配置文件中设置了调试等级，开发人员可以通过修改调试等级这个参数获取更详细的日志信息，从而进行更有效的代码分析诊断。

3) pMapper框架是一个开源项目，其官方网站上的论坛里有很多专家专门负责回答用户疑问，且响应速度很快。因此，开发人员可以通过在论坛里发起某个技术的讨论、提出问题等方式解决一些技术难点，从而加快整体开发进度并提高自身的开发水平。

基于WebGIS的气象综合显示系统实现了高时空分辨率的自动气象站数据在WebGIS下的发布、查询和空间分析，其建立为气象预报员提供了一个气象信息辅助决策平台，也便于监视天气的变化，具有良好的应用前景。除了北京本地自动气象站，预报员也需要使用周边京津冀自动气象站数据。因此，如何将pMapper框架和地图缓存机制、并发访问技术结合起来，实现几千个京津冀自动气象站在该系统中的及时快速共享将是下一步要进行的工作。

[1] 刘旭林,赵文芳,刘国宏.基于WebGIS的气象信息显示和查询系统. 应用气象学报,2008,19(1)：116-120.

[2] 吴焕萍,罗兵,王维国,等.GIS技术在决策气象服务系统建设中的应用.应用气象学报,2008,19(3):380-384.

[3] 郑卫江,吴焕萍,罗兵,等.GIS技术在台风预报服务产品制作系统中的应用.应用气象学报,2010,21(2):250-255.

[4] 孙利华,吴焕萍,郑金伟,等.基于Flex的气象信息网络发布平台设计与实现.应用气象学报,2010,21(6):754-761.

[5] 高梅,张文华,接连淑.WebGIS技术在气象科研数据共享系统中的应用尝试.应用气象学报,2004,15(增刊Ⅰ):168-170.

[6] 张永华,肖文名,何婉文,等.基于ArcGIS Server和VML的气象信息发布平台.应用气象学报，2011,22(4):498-504.

[7] The MapServer Team.[2013-05-15].http:∥mapserver.gis.umn.edu/gallery.html.

[8] pMapper Web Site.[2013-02-11].http:∥www.pmapper.net/.

[9] PostgreSQL Global Development Group.[2012-02-29].http：∥www．postgresql.org.

[10] 李丹.基于开源软件的WebGIS框架设计.计算机时代,2013(12):45-47.

[11] 罗智勇,罗娟,赖德军.RIA技术方案下的插件式WebGIS系统架构设计.测绘科学,2012,37(6):160-165.

[12] 彭晓明．PostgreSQL对象关系数据库开发．北京：人民邮电出版社，2001.

[13] 郭艳.基于Silverlight的WebGIS构建技术研究.测绘标准化,2012,28(4):31-34.

[14] 徐立新,赵蕾.开源WebGIS设计与研究.电脑编程技巧与维护,2012,(8):18-19.

[15] 周波,李琦.基于数字城市系统平台的GISServer服务器研究与设计.计算机科学,2005,32(10):100-102.

[16] What is Map Caching? [2012-12-04].http:∥webhelp.esri.com/aregisserver/9.3/java/index.htm # what_ is_map_caching.htm.

Improved Implementation of Meteorological Integrated Display System Based on WebGIS

Zhao Wenfang1)Liu Xulin2)Nie Kai1)

1)(BeijingMeteorologicalInformationCenter,Beijing100089)2)(BeijingMeteorologicalObservationCenter,Beijing100089)

In order to overcome shortcomings of traditional WebGIS implementation method, an application framework of WebGIS based on Ajax is introduced and real-time meteorological data integrated displaying system is established, which can provide quick displaying and querying of meteorological data.

pMapper is a MapServer application framework based on PHP/MapScript, composed of a series of PHP, JavaScript, CSS and XML files. It offers broad functionality and multiple configurations to facilitate the setup of WebGIS based on Ajax, including map operation, spatial analysis, and attribution query functions. Meanwhile, custom plugins can be supported to extend the framework. There are two advantages to develop WebGIS based on Ajax by using this framework: Developer-friendly and open source.

On the basis of its characteristics and advantages, the main development method under this framework is also discussed. In order to provide a user-center GUI, some new CSS templates and custom plugins are embedded into the framework. In addition, some source codes are modified to present better query result table and charts on the Web. The real-time meteorological data integrated displaying system provides friendly map operation, quick querying and displaying of different meteorological data, and the visualization of statistics charts for observation elements, e.g., temperature, precipitation and wind. Meanwhile, it also provides analysis of rainfall contour overlaid on the map. The system consists of four layers: Data layer, data interface layer, business logic layer and client layer. The data layer on the bottom mainly stores and provides fundamental data for data interface layer which consists of various data access services. The business logic layer provides specific business logic processing and WebGIS services, responding to requests from the client layer, which provides all kinds of meteorological information dynamically and instantly through a friendly browser interface. At present, this system is on trial for more than one year in the Beijing Meteorological Bureau, providing high performance and better data sharing services. The system brings high performance and better user experience, shortening the average response time of most Web pages to less than 3 seconds, and it can support 100-150 concurrent users. The peak access time is 0800 BT and 1600 BT every day, but the total Web traffic will suddenly increase when high impact weather happens. The top three visited pages are automatic weather station page, radar products page, and nowcast products page, and visitors mainly come from Beijing Meteorological Center.

WebGIS; MapServer; Web map service

10.11898/1001-7313.20150314

公益性行业(气象)科研专项(GYHY201206031)

赵文芳,刘旭林,聂凯. 基于WebGIS的气象综合显示系统改进与实现. 应用气象学报，2015，26(3)：378-384.

2014-10-31收到， 2015-01-15收到再改稿。

* 通信作者， email: lxulin@bjmb.gov.cn