openlayers3 + canvas 通过粒子动画展示风场

openlayers3 + canvas 展示风场

原理：将屏幕坐标转换为经纬度，再通过经纬度获取风速风向，再通过canvas绘制
效果：

步骤：
1、随机新建粒子（显示得风得数量，确定生命周期、位置等信息），获取该粒子得风速风向（我是使用双线性内插法）。
2、变为下一个时刻，先将上一个时刻得透明度降低（粒子生命剩余得越少，他就越透明，粒子死亡后不留痕迹），遍历粒子，根据粒子得风速风向，计算出该时刻粒子所在得位置，绘制（g.moveTo(proj.x, proj.y); g.lineTo(p.oldX, p.oldY);就是画线），粒子生命周期变小
3、去除生命结束得粒子，再重新生成粒子（粒子得声明周期是随机得），重复第二步

好久之前写得，代码现在看起来乱七八糟得，主要得代码如下：

//新生成粒子
MotionDisplay.prototype.makeNewParticles = function (animator) {
    this.particles = [];
    for (var i = 0; i < this.numParticles; i++) {
        this.particles.push(this.makeParticle(animator));
    }
};
//生成粒子
MotionDisplay.prototype.makeParticle = function (animator) {
    var dx = animator ? animator.dx : 0;
    var dy = animator ? animator.dy : 0;
    var scale = animator ? animator.scale : 1;
    var safecount = 0;
    for (; ;) {
        var a = Math.random();