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

Lazy man

于 2019-12-12 10:27:55 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： open layers canvas wind

本文链接：https://blog.youkuaiyun.com/lazyMan2019/article/details/103504479

本文介绍如何结合openlayers3和canvas技术，通过粒子动画来展示风场效果。首先，将屏幕坐标转换成经纬度，然后根据经纬度获取风速和风向。接着，利用canvas进行粒子绘制，通过粒子的生命周期、位置变化模拟风的流动。主要步骤包括：创建随机粒子并确定风速风向；更新时刻并降低旧粒子的透明度；计算新位置并绘制粒子轨迹；最后处理生命周期结束的粒子并生成新的粒子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章