OpenLayers风场图

用到的插件是ol-wind，作者除了Openlayers风场插件外还有其他平台的，详见wind-layer

获取数据

git里有如何获取数据的介绍，这里记一下我的实践过程。
数据来源是nomads，见下图。git上curl命令里的下载地址现在好像不好使了，所以我用的是GFS 1.00 Degree，点击grib filter可以进入后续的筛选。

一路往后点，到这个页面

上面应该是一些参数啥的，总之就照着git上curl命令里的参数选
或者修改curl命令里的数据源，把filter_gfs.pl改成filter_gfs_1p00（这个数据源是我随便选的，想选其他的在图1里找）
总之，不管是在网页上还是curl命令，最后下载好一个.grib2文件(curl命令下的没有扩展名)。
下面需要使用grib2json，一个java工具，将它转成json。
先去git上把grib2json下下来，然后mvn package，解压tar.gz，cd到bin目录下，运行grib2json --help，有下图就成了

运行grib2json -d -n -o current-wind-surface-level-gfs-1.0.json gfs.t00z.pgrb2.1p00.f000，后边是grib2文件名，前边是输出的json文件。

前端调用示例

用的是typescript，js自行修改

  /**
   * 添加风场图层
   */
  public addWindLayer() {
    // 数据源暂时写死
    const res: any = require('../assets/json/test3.json');
    const windLayer: any = new WindLayer(res, {
      forceRender: false,
      windOptions: {
        // particleMultiplier: 1 / 120, // 粒子路径数量的系数，不推荐使用（视野宽度 * 高度 * 系数），没看出差别
        velocityScale: 1 / 800, // 对于粒子路径步长的乘积基数,越大越快
        paths: 750, // 生成的粒子路径数量,越大线条越多
        maxAge: 15, // 粒子路径能够生成的最大帧数
        colorScale: [
          'rgb(36,104, 180)',
          'rgb(60,157, 194)',
          'rgb(128,205,193 )',
          'rgb(151,218,168 )',
          'rgb(198,231,181)',
          'rgb(238,247,217)',
          'rgb(255,238,159)',
          'rgb(252,217,125)',
          'rgb(255,182,100)',
          'rgb(252,150,75)',
          'rgb(250,112,52)',
          'rgb(245,64,32)',
          'rgb(237,45,28)',
          'rgb(220,24,32)',
          'rgb(180,0,35)'
        ],
        frameRate: 10
        // width: 3,
        // generateParticleOption: false
      },
      // map: map,
      projection: 'EPSG:3857'
    });
    // 离谱了，不设置成1之外会遮盖其他图层
    windLayer.setOpacity(0.9);

    this.map.addLayer(windLayer);
  }