基于googlemap和highcharts的精细化预报显示平台的开发和实现

杜友强　吴孟春

摘要：当前气象部门都建立了精细化预报系统，向公众提供了精细化预报服务。精细化预报产品不断增多，如何更好、更直观的展现这些预报产品是气象业务技术人员需要去解决的问题。本文主要介绍了Google Map、HighCharts、Ajax的技术特点，并结合Asp.net和数据库的开发环境，实现精细化预报要素实时动态展示并给出相应的方法和代码。

关键词：Google Map HighCharts Ajax 精细化预报 数据交互

中图分类号：TP311 文献标识码：A 文章编号：1007-9416（2016）06-0187-01

随着气象业务的不断发展，气象预报的模式和方法也在不断地改进，更精确、更精细的预报模式带来预报时间的变化：预报时间从1～2天的短期数值天气预报，到制作一个星期左右的中长期数值天气预报，而且预报的准确率也在不断提高，同时，城市化快速发展以及灾害性天气不断增多，这也对气象服务提出的更高要求和挑战，气象部门需要建立多种渠道的精细化预报服务平台来发布信息。

1 技术应用

1.1 Google Map

Google Map是基于互联网的地图信息系统，提供开放的地理信息服务，其应用很广泛，可实现全球地理位置搜索、交通情况查询、汽车导航甚至街景展示和显示三维模型等功能。Google提供了基于JavaScript、flash等技术的应用程序开发接口即Google Map API，用户可通过这一接口应用Google Map进行二次开发，Google Map API可以让Google Map 嵌入自己的网页中。

1.2 HighCharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。在HighCharts图表中可以展示气象要素的动态变化过程，同时还可以叠加气象要素相关的图标，有很好的应用和展示效果。

1.3 jQuery Ajax技术

Ajax的核心是JavaScript对象XmlHttpRequest，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户，用户从感觉上几乎所有的操作都会很快响应没有页面重载的等待，既无需刷新页面便可向服务器传输或读写数据（又称无刷新更新页面），在网页设计中使用Ajax技术，有很的交互及优化用户体验，。

2 设计思路

2.1 平台设计框架和应用方法

（1）平台是采用Asp.net技术开发框架，后台服务端采用IIS搭建Web服务器，数据库为SQL 2005；平台前端为js脚本调用Google Map地图，数据交互文件为ashx。

（2）后台数据是72小时的站点预报数据，需要在Google Map中显示所有站点，站点定时动态移动，同时在HighCharts上显示某时间序列的各时次的天气要素，并在table表中显示其它的气象要素值。

2.2 Highcharts应用方法

需要在Highcharts上显示要素为：气温、降水、实况及天气图标等。Series是Highcharts的重要属性，是设置数据点数据， 也就是图表显示的值，在项目中通常从数据库中取出数据来实现数据的动态显示。

series： [{ type： ‘spline， name： ‘气温， marker： {symbol： ‘url（images/02.png）}，data：<%= returnValue %> ， yAxis： 0， color： ‘#FF9C23 }， { type： ‘column， name： ‘降水， data：<%= returnValue1 %> ， yAxis： 1， color： ‘#FFFFFF }]

其中marker： {symbol： ‘url（images/02.png），是在气温曲线上叠加图标；变量returnValue与returnValue1则是后台返回的数据。

3 数据交互

（1）精细化数据是数值预报模式计算产生的逐3小时的3天预报数据。 与后台的数据交互则是通过从数据库中取出数据形成ashx文件：ashx文件即一般处理程序（HttpHandler）是·NET众多web组件的一种，ashx程序适合产生供浏览器处理的、不需要回发处理的数据格式，用于生成动态文本内容。（2） 建立data.ashx文件，从数据库读取数据，返回前台调用。

4 结语

本文Google Map、HighCharts结合，并应用Ajax开发的精细化预报显示平台具有以下几点优点：

（1）Google Map提供免费的地图服务，HighCharts也是免费的图表控件，结合Ajax和数据库，便可应用开发，开发应用成本低，网站部署简单，管理方便。

（2）气象数据是时空变化数据，通过上述技术能够直观有效地动态显示，相对简单的文本、图片、表格来说，有更好的表现效果。

（3）具有通用性，相类似的气象要素数据或时空序列数据都可通过此方法来开发实现。