cesium火源特效。可挂在经纬度坐标

首先很重要的一点，一定要在配置地图的时候将动画效果打开。

   const viewer = new Cesium.Viewer('cesiumContainer', {

        shouldAnimate: true,//打开动画效果 important 

    })

下面看粒子源码

import * as Cesium from 'cesium'

export default function particle(urlimg:string) {

    function computeModelMatrix(position: { lon: any; lat: any; alt: any; }) {

        const center = Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.alt)

        const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)

        return matrix

      }

   

      function computeEmitterModelMatrix() {

        let hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0);//朝向

        let trs = new Cesium.TranslationRotationScale()

        trs.translation = Cesium.Cartesian3.fromElements(0.0,0.0,0.0);

        trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr);

        let result = Cesium.Matrix4.fromTranslationRotationScale(trs)

        return result

      }

      let particlefire =  new Cesium.ParticleSystem({

        image: '/public/cesium/data/img/fire.png',

        // image: urlimg,

        startColor:Cesium.Color.RED.withAlpha(0.1),//粒子在其生命初期的颜色。

        endColor:Cesium.Color.YELLOW.withAlpha(0.5),//粒子寿命结束时的颜色。

        imageSize: new Cesium.Cartesian2(5, 5),//图片比例 宽高

        startScale: 0.5,//开始大小

        endScale: 4.0,//结束大小

        minimumParticleLife:1.5,//最短存活时间

        maximumParticleLife:3,//最长存活时间

        // lifetime: 16.0,//粒子系统发射粒子的时间

        minimumSpeed:29,

        maximumSpeed:30,

        emissionRate: 100.0,//粒子数

        // particleLife: 1.0,//粒子生命

        // speed: 5.0,//发射速度

        emitter:new Cesium.CircleEmitter(10.0),//生成区域 粒子发射器。

        sizeInMeters:true,//true 米为单位 false 像素为单位，大小不变

        modelMatrix:computeModelMatrix({lon:116.491,lat:39.939,alt:0}),//位置 （世界矩阵）

        // modelMatrix: entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),

        emitterModelMatrix: computeEmitterModelMatrix(),//模型矩阵

      })

      console.log('particlefire',particlefire);

      return particlefire

}

使用直接导入

import particle from '../../resoure/ParticleSystem.ts'

    let particlefire = particle('/public/cesium/data/img/fire.png')

    viewer.scene.primitives.add(particlefire)

即可