风场可视化

风场步骤：

1. 在屏幕上生成一系列随机粒子位置并绘制粒子。

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

3. 将一小部分粒子重置为一个随机的位置。这就确保了风从不会变成空的区域。

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

具体代码步骤：

1、生成经纬度网格

    1）得到风场数据：头文件（包括各种参数，如行列数、经纬度范围等），（U，V）。
    2）利用一个三维数组grid数存放数据。第一维表示行数，第二维表示列数，第三位表示每一个网格点的速度分量值UV。

2、生成插值网格  ------查询风数据以获得其当前位置的粒子速度

    1）求出每一个网格点（随机粒子的位置）对应的经纬度。
    2）再计算粒子在从上到下，从左到右，以最小刻度为1的第几个经纬度格点上。
    3）再求出粒子周围四个点。
    3）通过双线性插值求出粒子的uv和风速大小---columns数组保存（在field方法中）
            首先在x方向进行线性插值，得到R1和R2，然后在y方向进行线性插值，得到P.

3、初始化生成粒子

    1）在屏幕上生成一系列随机粒子位置。
    2）通过查询风数据以获得其当前位置的粒子速度。
    3）将粒子信息存到particles数组中（粒子的经纬度，粒子寿命）。

4、定义每次粒子的变化

    1）通过风数据求出当前粒子的下一运动状态（下一坐标=当前坐标+风速向量），将其保存在particles中（利用对象保存）。此时粒子寿命加1。
        如果求出的当前粒子速度为null，表明粒子已经逃脱了网格，就让age（粒子寿命）为寿命最大值，重新随机生成
    2）将粒子速度映射为粒子颜色样式。（在颜色映射表中查询）
    3）将风点按照不同颜色分级，存到buckets数组中，数组的每一项是一个particles对象，

5、初始化画布，并实现粒子的运动

    1）利用canvas元素获取画布
       1、获取<canvas>元素对应的DOM对象，这是一个canvas对象

       2、调用canvas对象的getContext()方法，得到一个@D上下问对象

       3、调用2D上下文对象进行绘图
    2）遍历buckets数组中的粒子，利用canvas对象的moveTO，lineTo方法绘制粒子运动轨迹（从当前粒子的位置到下一位置），strokeStyle属性绘制线条颜色。当粒子寿命为最大值时，粒子轨迹淡出屏幕（   g.globalCompositeOperation = "destination-in"：目标图形和源图形重叠的部分会被保留（源图形），其余显示为透明），重新绘制。
    3）利用setTimeout和requestAnimationFrame实现更为流畅的粒子动画。
        requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame，将实现粒子运动方法作为它的回调函数
（跟着浏览器内建的刷新频率每秒60帧来执行回调）。
        requestAnimationFrame做了兼容性处理（IE 6 7 8 9不兼容），这就是为什么有setTimeout的原因（当浏览器不支持requestAnimationFrame时，利用代码再次调用setTimeout实现风场动画）

6、当整个页面可视区域调整时调整风场

    1）利用onresize事件监听可视区域是否变化。（文档视图调整大小时会触发 resize 事件）
    2）变化了先隐藏风场动画，再根据可视区域大小（宽高--利用cesium原生API可得）重新绘制风场动画。
    
删除动画操作：让columns数组为空。清除动画帧（window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;）

requestAnimationFrame：https://blog.csdn.net/wuqi5328/article/details/82081594

 基于 粒 子 追 踪 方 法 的 风 场 可 视 化 技 术 的 基 础 是 追 踪 粒 子 轨 迹 ，根据粒子的位置变化动态地反映 风 场 速 度 的 方 向 和 大 小 变 化 ，数 据 来 源 是 风 场 的 U V 速 度 分 量 值 。粒 子 追 踪 映 射 可 以 分 为 以 下 几 个 步 骤 ：

1.  读 取 风 场 数 据 ，根据数据格式设置粒 子 的 存 储 结 构 ，在格网中随机放置基本粒子并设 置 其 属 性 ，为了表达风场的整体结构会不同位置 设置多个粒子同时追踪；
2.   粒 子 在 格 网 中 不 断 运 动 和 更 新 ，由粒 子的初始位置出发对速度函数数值积分得到其他 时间的位置及粒子的运动轨迹，其中速度根据粒 子所在的格网位置和运动到当前时间由各格网点 速度插值得到；
3.  在 粒 子 不 断 运 动 的 同 时 根 据 密 度 要 求 在格网中删除旧粒子、生 成 新 粒 子 ，以控制粒子 密 度 ，保证粒子数量在一个范围内；
4.  将 不 同 时 间 存 储 的 粒 子 属 性 和 状 态 绘 制到三维地球模型中完成粒子追踪映射。