cesium火线效果

发布时间 2023-11-17 17:55:40作者: 一起天天向上
最终效果:

 实现思路:emitter设置为盒型发射器,new Cesium.BoxEmitter()



属性配置:

{

         type: "fireLine",
              name: "火线",
              startColor: "rgba(255,255,255,1)",
              endColor: "rgba(128,0,0,0)",
                            emissionRate: 11.180505473321697,
                            gravity: 10,
                            minimumParticleLife: 1,
                            maximumParticleLife: 2,
                            minimumSpeed: 1,
                            maximumSpeed: 1,
                            startScale: 5,
                            endScale: 8,
                            particleSize: 3,
                            emitter: "BoxEmitter",//重点  重点 重点
                            image: require("@/assets/image/fire.png"),
                            emissionRateScale: 0.6, // 粒子密度
}

生成火线:

new Cesium.ParticleSystem({
      image: _this.viewModel.image,//生成所需粒子的图片路径
      //粒子在生命周期开始时的颜色
      startColor: !_this.viewModel.startColor ? new Cesium.Color(1, 1, 1, 1) : new Cesium.Color.fromCssColorString(_this.viewModel.startColor),
      //粒子在生命周期结束时的颜色
      endColor: !_this.viewModel.endColor ? new Cesium.Color(0.5, 0, 0, 0) : new Cesium.Color.fromCssColorString(_this.viewModel.endColor),
      //粒子在生命周期开始时初始比例
      startScale: !_this.viewModel.startScale ? 1 : _this.viewModel.startScale,
      //粒子在生命周期结束时比例
      endScale: !_this.viewModel.endScale ? 1 : _this.viewModel.endScale,
      //粒子发射的最小界限
      minimumParticleLife: !_this.viewModel.minimumParticleLife ? 5 : _this.viewModel.minimumParticleLife,
      //粒子发射的最大界限
      maximumParticleLife: !_this.viewModel.maximumParticleLife ? 5 : _this.viewModel.maximumParticleLife,
      //粒子质量的最小速度
      minimumSpeed: !_this.viewModel.minimumSpeed ? 1 : _this.viewModel.minimumSpeed,
      //粒子质量的最大速度
      maximumSpeed: !_this.viewModel.maximumSpeed ? 1 : _this.viewModel.maximumSpeed,
      //以像素为单位缩放粒子图像尺寸
      imageSize: new Cesium.Cartesian2(
        _this.viewModel.particleSize,
        _this.viewModel.particleSize
      ),
      //每秒发射的粒子数
      emissionRate: !_this.viewModel.emissionRate ? 5 : _this.viewModel.emissionRate,
      //粒子系统发射粒子的时间(秒)
      lifetime: !_this.viewModel.lifetime ? 16.0 : _this.viewModel.lifetime,
      //粒子系统是否应该在完成时循环其爆发
      loop: true,
      //设置粒子的大小是否以米或像素为单位
      sizeInMeters: true,
      //系统的粒子发射器
      emitter: emitter,//BoxEmitter 盒形发射器,ConeEmitter 锥形发射器,SphereEmitter 球形发射器,CircleEmitter圆形发射器
      updateCallback: (p, dt) => {
        return this.applyGravity(p, dt);
      },
      performance: false,
      // setPositionCallback: function(particle, dt) {
      //     // 计算粒子的位置
      //     var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
      //     particle.position = position;
      // }
      // setPath
      // Cesium.ParticleSystem的setPath方法用于设置粒子系统的路径。该方法需要传入一个Cesium.SampledPositionProperty类型的参数,该参数表示粒子系统的路径。该路径可以是一个点集,也可以是一个线段或者贝塞尔曲线等。在路径上,粒子系统会按照一定的速度运动,并且可以根据需要进行旋转、缩放等变换。在路径的末尾,粒子系统可以停止运动,或者重新从路径的起点开始运动。
    })