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.n