风场可视化：风场数据

引子

安装 ecCodes

执行脚本

数据生成

数据含义

参考资料

WebGL 基础之后，接着去看获取解析风场数据的逻辑，又遇到问题。

• 系统：MacOS

• 版本：11.6

• Origin

• My GitHub

示例源库的说明中，首先要安装 ecCodes ，尝试使用 HomeBrew 但不行。于是就按照 ecCodes 源库的介绍本地进行编译安装。

在进行第 4 步的时候，碰到了问题：

No CMAKE_Fortran_COMPILER could be found.

查询资料说是缺少 gfortran ，可以使用命令查看是否已安装：

which gfortran

有好几种安装方式，我选择下载安装包。

解决这个问题后按照指导继续，编译安装成功，版本是 2.23.0 。

这里。

问题，试了里面的一些方法，发现这个 pull 的修改可以正常的运行。于是就 fork 了一下把这个修改的内容弄过来了，改了些数据，见 XXHolic/webgl-wind 。

Wind: u and v Components 。

接着在 prepare.js 中使用到风数据中的 key 有：

• Ni 表示在一条纬线上有多少个点，简单的说就是有多少列。
• Nj 表示在一条经线上有多少个点，简单的说就是有多少行。
• values 存放分量所有的值。
• minimum 表示分量的最小值。
• maximum 表示分量的最大值。

其中 Ni 和 Nj 决定了生成图片的宽和高，风速大小映射对应颜色主要逻辑如下：

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const i = (y * width + x) * 4;
    const k = y * width + ((x + width / 2) % width);
    png.data[i + 0] = Math.floor(
      (255 * (u.values[k] - u.minimum)) / (u.maximum - u.minimum)
    );
    png.data[i + 1] = Math.floor(
      (255 * (v.values[k] - v.minimum)) / (v.maximum - v.minimum)
    );
    png.data[i + 2] = 0;
    png.data[i + 3] = 255;
  }
}

• i ： 使用了 pngjs 插件，颜色使用 RGBA 模式，数组中每连续的 4 个位置存储的是一个点的颜色值，所以 i 变量要是 4 的倍数。
• k ： 用于获取风速大小的索引，先看看 y=0 时，k 的取值变化先从 180 -> 359 递增，然后从 0 -> 179 递增，这样从中间开始取值，猜测是由于这个展示地图是二维的世界地图，返回的数据就是这样的对应规则。
• 映射方式： 以 maximum - minimum 作为基准，然后计算风速大小相对值 values[k] - minimum ，两个值的比例乘以颜色分量最大值 255 。

Back to top

How I built a wind map with WebGL