引子

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

  • 零碎：MacOS
  • 版本：11.6
  • Origin
  • My GitHub

装置 ecCodes

在文章示例源库的阐明中，首先要装置 ecCodes ，尝试应用 HomeBrew 但不行。于是就依照 ecCodes 源库的介绍本地进行编译装置。

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

No CMAKE_Fortran_COMPILER could be found.

查问材料说是短少 gfortran ，能够应用命令查看是否已装置：

which gfortran

有好几种装置形式，我抉择下载安装包。

解决这个问题后依照领导持续，编译装置胜利，版本是 2.23.0 。

执行脚本

执行脚本的时候，呈现了谬误提醒：

grib_set: command not found grib_dump: command not found

但在后面装置的文件夹的 bin 目录下是找到了 grib_set 的执行文件。推断是没有注册到全局门路中。

查看 ecCodes 装置门路是否注册到全局门路中：

echo $PATH

这里碰到的问题是没有注册到全局门路中，设置形式可参考这里。

批改示例：

vim ./.bash_profile

进入到编辑模式后，增加上面的内容：

export ECCODE_HOME=/xx/xx/xx/xx/eccodesbuild/binexport PATH=$PATH:$ECCODE_HOME

保留后，使其失效

source ./.bash_profile

想晓得是否失效了，试试指令 grib_set -h ，如果发现没有成果，有可能跟应用的 shell 端无关，可参看这里。

数据生成

脚本能够失常执行了，但生成的数据不对：

undefined:1

{"u":,"v":}

查看源库的 issues ，外面也有人提这个问题，试了外面的一些办法，发现这个 pull 的批改能够失常的运行。于是就 fork 了一下把这个批改的内容弄过去了，改了些数据，见 XXHolic/webgl-wind 。

数据含意

在 download.sh 脚本中，获取数据解析后，生成可读文件 tmp.json ，来看看这个文件中次要构造和局部数据：

{  "u":{    "messages" : [      [        {          "key" : "name",          "value" : "U component of wind"        },        {          "key" : "Ni",          "value" : 360        },        {          "key" : "Nj",          "value" : 181        },        {          "key" : "values",          "value" : [5.51964, 5.71964, ...]        },        {          "key" : "maximum",          "value" : 103.02        },        {          "key" : "minimum",          "value" : -36.0804        }      ]    ]  },  "v":{    "messages" : [      [        {          "key" : "name",          "value" : "V component of wind"        },        {          "key" : "getNumberOfValues",          "value" : 65160        },        {          "key" : "values",          "value" : [14.9446, 14.8446, ...]        },        {          "key" : "maximum",          "value" : 80.3446        },        {          "key" : "minimum",          "value" : -66.4554        }      ]    ]  }}

看到这些可能会有些纳闷，大气中的气流既有速度也有方向，在数学上能够用一个向量示意。在气象学中，如果晓得风的方向和大小，就能够失去示意风的向量，u 重量和 v 重量：

// ws 风力大小  风在数学上的方向形容u = ws * cos()v = ws * sin()

更加具体的介绍见 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 。

参考资料

  • How I built a wind map with WebGL