随着人类社会的发展与科技进步，气象信息作为基础的支持信息，已经与我们社会的各行各业形成密不可分的联系。气象服务工作需要通过气象数据了解当下和未来的天气状况，从而指导我们的生产和生活。

然而，原始的气象数据具有极强的专业性，普通大众很难直接读懂这些数据，即使可以看懂，但枯燥的数据也不利于用户直接获取信息，于是对气象数据的可视化要求应运而生，而B/S架构因其轻量化、跨平台性强等优势，更是受到用户的青睐。

01

气象数据以空间分布方式可分为两种：站点数据和格点数据。站点数据即在观测站实测到的数据；格点数据则为有规律的空间排布的数据，一般来说是经度-纬度-高度（或气压）-时间的格点。

在实际应用中，离散的站点数据不利于可视化与分析，不能完全真实地代表区域气候变化的特征，气象预测面临着诸多限制。所以，有时我们利用空间插值技术将离散的站点数据转化为空间连续、规则的网格点序列，从而有效地反映气候要素的空间信息。

恒歌科技针对部分气象数据，基于WebGL技术，通过图表、动画、等值线与色斑图等形式，实现气象大数据可视化平台，可以灵活、快捷地构建二三维地图场景，实现气象数据的多维浏览，帮助用户更好地理解气象数据，提高对天气的监测、预测水平的同时也提供判断依据。

02

风流场

物理学中把某个物理量在空间的一个区域内的分布称为场。风场，即在风（气压差）的作用下空气流动形成的场。全球风场数据主要来自地面观测站和海洋浮标等基站的气象观测报告，以及根据一些卫星携带的散射计的测量数据推演出的风场模型。FreeXGIS团队基于气象格点数据实现了风场流向图。

通常，浏览器实现这种效果依赖于canvas绘制，大致实现思路如下：

1. 在屏幕上生成一组随机粒子位置并绘制；

2. 对于每个粒子，查询数据以获取其当前位置的粒子速度，并相应地移动它；

3. 将一小部分粒子重置到随机位置，这样可以确保风吹走的区域永远不会完全变空；

4. 逐渐淡出当前屏幕，并在顶部绘制新定位的粒子。

但这样做有很大的性能限制：因为数据处理的整个过程在CPU进行，每次更新数据或视图都会有很大的延迟，所以风粒子的数量受到一定限制，无法达到很好的渲染效果。

恒歌科技基于WebGL技术，结合气象数据，通过图表、动画、等值线与色斑图等形式，实现了气象数据的可视化，能够灵活、快捷地构建二三维地图场景，实现气象数据的多维浏览，帮助用户更好地理解气象数据，提高对天气的监测、预测水平的同时也提供判断了依据。

03

风矢场

风矢是用来表示风向、风速的符号，由风向杆、风羽组成，通常由各气象站测得。风向杆指明风的来向，表示为一根竖线，风向常用8个方位（东、东南、南、西南、西、西北、北、东北）表示；风羽分别用长划线和短划线或者与风三角组合的方式表示风速的大小，垂直于风向杆末端顺时针向一侧（北半球）。一条长划线表示4米/秒，一条短划线表示2米/秒（风三角表示20米/秒）。下图即北风39-40米/秒的风矢示意图。

我们根据全国站点数据，在站点位置绘制风矢，从而形成风矢图。每个风矢主要包括风向、风速数据以及一些属性信息（如颜色、大小等）。实现方式为先在canvas上绘制生成图片，再分别添加到二三维地图场景中进行渲染。

04

气温色斑图

色斑图是对某种气象要素（气温、气压、降雨量等）的一种表现形式。结合色带，按照一定的量级通过不同的颜色来划分，方便用户对整体区域天气变化情况的直观掌握。

我们基于全球气温格点数据进行绘制，将数据以纹理的形式交给GPU，并传入不同区间的颜色要求。片元着色器得到当前片元的世界坐标后，通过纹理取得当前位置的气温值，与色带对比，从而渲染出相应颜色。需要注意的是，为了保证用户的使用体验和视觉美观，团队使用渐变配色，对于不存在固定值的片元，获取当前片元前后位置的数据，插值得到对应的温度和颜色，从而实现颜色的平滑过渡。