openlayers扩展：风场可视化（wind-layer）

windLayer api使用示例

这里主要为windlayer关于在openlayers3-4版本内使用的相关接口及参数说明

在加载时，主要读取的数据来源格式为json，而我们一般获取到的数据主要为netCDF或Grib等格式的数据，这里还涉及相关的数据转换操作

1.openlayers-wind 参数说明

TIP

对应于 openlayers 3-4 相关参数

图层参数

参数	说明	类型	默认值
windOptions	风场参数，具体配置如下	object	--
map	地图对象，必须配置，不需要调用 addLayer，具体可以参考 openlayer 官方文档	ol.Map	--
zIndex	图层层级	number	--

其他参数遵循 ol 基础图层参数。

windOptions

参数	说明	类型	默认值
globalAlpha	全局透明度，主要影响粒子路径拖尾效果	number	0.9
lineWidth	粒子路径宽度	number\|function	1, 当为回调函数时，参数function(m:对应点风速值) => number
colorScale	粒子颜色配置	string\|function\|string[]	#fff，当为回调函数时，参数function(m:对应点风速值) => string
velocityScale	速度级别	number	1 / 25
maxAge \| particleAge(不推荐使用)	粒子路径能够生成的最大帧数	number	90
paths	生成的粒子路径数量	number\|function	800, 当为回调函数时，参数function(m:对应点风速值) => number
particleMultiplier	粒子路径数量的系数，不推荐使用（视野宽度 * 高度 * 系数）	number	1 / 300
frameRate	帧率（ms）	number	20

colorScale

关于颜色配置，在以往的配置中传入的是颜色数组会根据以下函数和格点数据的数据范围去计算匹配的颜色值，

const indexFor = function (m) {  // map velocity speed to a style
    return Math.max(0, Math.min((that.COLOR_SCALE.length - 1),
      Math.round((m - min) / (max - min) * (that.COLOR_SCALE.length - 1))));
    
}

这样实现只能按照风速值范围等间隔渲染，无法做到精确匹配对应值的颜色。

在最新的版本中新增了此参数的类型，可以通过回调函数精确对应颜色值（但是会有一定的性能损失）

颜色配置支持三种方式：

String：固定颜色值

Function: 通过回调函数的风速值设定颜色（但是会有一定的性能损失）

String[]: 按照风速值范围等间隔渲染，无法做到精确匹配对应值的颜色。

2.数据来源

风场数据来源主要为气象的数据文件，可以详见另一篇文章 windy网站数据分析 。文章中提到的windy基本涵盖了大部分的气象数据来源，大家可以参考一下。

在使用wind-layer需要了解相关的数据转换，大家可以多下下功夫，有什么内容也可以分享出来，大家互相学习下。

3.图层初始化并格网分析数据源

 调用相关的API接口，添加相应的图层对象

 在这里将相关的数据获取方式进行了声明，通过数据源，我们可以了解，气象预报数据是按照经纬度格网进行统计、展示的，所以我们在这里想格网数据重新做了一次数据分析，方便前台的交互展示。