基于openlayers的北部湾气象可视化系统研究

2018-08-29于潇潘静赵飞陈峥蓉

气象研究与应用 2018年3期

于潇，潘静，赵飞，陈峥蓉

（钦州市气象局，广西钦州535000）

Webgis技术业已成为GIS在公众应用领域的主流，相较于C/S 结构的应用，其具有跨平台、部署方便、使用简单等特点。Webmicaps 为Micaps 的B/S 构架产品，其提供了多种实况、预报产品的API 接口，用户可通过REST方式方便调用。OpenLayers是一个专为Web GIS 客户端开发提供的JavaScript 类库包，具有部署方便，轻量级等特点[1]。非常适合于中小企业开源Web GIS 项目开发与应用。北部湾作为面向东盟的门户，对海洋交通运输和港口物流气象服务的需求逐年增大，亟需开发一套北部湾气象服务系统，当务之急是将各气象产品可视化。基于Open-Layers 的北部湾气象可视化系统是一个基于B/S 框架的应用系统，其采用Linux+Nginx 作为系统服务器，采用MySQL 作为数据库，后端采用PHP 语言开发。客户端通过Ajax向后端服务器发送数据请求，服务器访问数据库并将数据结果以Json格式返回到客户端，客户端使用Html、css、JS技术进行显示与渲染[2-7]。

1 开发环境的搭建

本系统除前端开发必须的Html、css、JavaScript文件外还需要导入几种JavaScript工具框架。其中通用框架—Jquery、地图引擎—OpenLayers、图表框架—Highcharts。业务逻辑层使用php 语言定时将cimiss、Webmicaps 上的数据存入数据库，当客户端发送Ajax请求时接收请求并从数据库中提取数据处理后返回给客户端。在数据库中设计表结构对实况天气数据、闪电数据、预报数据进行存储。前端应用层也可直接访问Webmicaps 提供的API 接口实现雷达瓦片与卫星瓦片的显示。系统结构见图1所示。

图1 系统结构

2 关键技术

OpenLayers的工作原理是将整个地图看作一个容器（Map），向其内部加载图层与控件，其核心为地图层（Layer）、对应图层的数据源（Source）与矢量图层样式（Style）、地图表现相关的地图视图（View）、地图交互操作控件以及绑定在Map 和Layer 上的一系列待请求的事件。地图数据根据数据源（Source）可分为Image、Tile、Vector 三大类型的数据源类，其中Image 类为单一图像基类，Tile 类为瓦片抽象基类，Vector 则为矢量类[1]。矢量类又可分为点、线、面元素，点矢量元素多用于显示站点天气信息、闪电信息、格点天气信息等；线、面矢量多结合在一起显示等值线、落区、栅格等[1]。

2.1 瓦片底图的添加

在内网环境下可使用webmicaps 提供的全球瓦片图作为系统的底图，在外网环境下可选用百度、天地图等厂商提供的瓦片图。加载底图的关键代码如下：

2.2 卫星、雷达瓦片图的加载

雷达可使用webmicaps提供的全国雷达拼图（见图2），卫星可使用webmicaps 提供的风云卫星或日本葵花卫星图。雷达和卫星皆为瓦片图加载方式和同为瓦片图的底图类似。雷达拼图加载的关键代码如下：

图2 雷达拼图效果图

2.3 地面站实况数据

每个地面站数据就是一个矢量点。客户端经由Ajax 获取后端传来的Json 数据，画矢量点图标（见图3）。首先为单个矢量点创建多种图标样式（Style）分别用以显示风杆、温度、站号，再将各矢量点结合成数组后在地图上加载。点击风杆或站号可从弹出的popup 气泡窗口查看近24 小时温度、湿度、降水、风要素（见图4）。每个矢量点往往携带大量的数据，但在地图上显示的图标有限，openlayers 使用popup气泡窗口将极大的扩展矢量点的可视化程度。popup气泡窗口是openlayers标记的一种，首先绑定一个鼠标左键的事件监听，当单击点位于图层上或矢量点、线、面上时，使用类方法get（）获取该图层的携带的特定属性并加载到事先创建好popup 对象上。加载矢量点关键代码如下：

图3 绘制地面站数据

图4 点击图标弹出popup气泡窗口内容

2.4 绘制闪电信息

类似于绘制矢量点，闪电坐标点大于一定阈值时，使用openlayers 的热点图展示，闪电坐标点没达到阈值时，根据闪电类型，误差级别，电流大小来设置圆点的颜色，再加上序号进行显示，类似于绘制地面站信息需要为单矢量点创建多种图标样式。点击图标或者序号可从弹出的popup气泡窗口查看详细的闪电信息（见图5～6）。