image.png

本效果结合网上案例，采用ceisum结合vue实现信号传输特效（粒子特效），仅供记录学习。性能欠佳，希望大佬指教，代码如下：

<template>
<div id="cesiumContainer"></div>
</template>

<script>
import Cesium from "cesium/Cesium";
import widget from "cesium/Widgets/widgets.css";
export default {
name: "CesiumScene",
data() {
return {
sourEntity: null,
tarEntity: null,
timeId:null
};
},
mounted() {
this.init();
this.createSourEntity();
this.createTarEntity();
this.createLeidaEntity();
this.createRadarToMoon();
},
created() {},
beforeDestroy() {},
methods: {
init() {
let viewerOption = {
geocoder: false, // 地理位置查询定位控件
homeButton: false, // 默认相机位置控件
timeline: false, // 时间滚动条控件
navigationHelpButton: false, // 默认的相机控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
baseLayerPicker: false, // 底图切换控件
shouldAnimate: true, //是否开始动画
// useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
selectionIndicator: true, //是否显示选取指示器组件
// targetFrameRate:60,
vrButton: true,
showRenderLoopErrors: true,
requestAnimationFrame: true,
// showRenderLoopErrors : false,

    animation: false // 控制场景动画的播放速度控件
  };
  this.Global.viewer = new Cesium.Viewer(this.$el, viewerOption);
  this.Global.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
  this.Global.viewer.scene.debugShowFramesPerSecond = true;
},
createTarEntity() {
  var self = this;
  var hpRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
  // 添加模型
  this.tarEntity = this.Global.viewer.entities.add({
    // 模型父级
    parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(118.54, 23.51, 0),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/junjian/junjian.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
createLeidaEntity() {
  var self = this;
  var hpRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
  // 添加模型
  this.tarEntity = this.Global.viewer.entities.add({
    // 模型父级
    parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(120.54, 18.51, 0),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/leida/leida.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
createSourEntity() {
  var self = this;

  // 添加模型
  this.sourEntity = this.Global.viewer.entities.add({
    // 模型父级
    // parent: self.junjiansEntities,
    // 模型位置
    position: Cesium.Cartesian3.fromDegrees(115.54, 20.51, 500000),

    // 模型资源
    model: {
      // 模型路径
      uri: "3d/weixing_1.gltf",
      // 模型最小刻度
      minimumPixelSize: 128,
      // 模型最大刻度
      maximumSize: 128
    }
  });
},
getImage() {
  // 画一个用于粒子显示的canves图像
  var particleCanvas;
  if (!Cesium.defined(particleCanvas)) {
    particleCanvas = document.createElement("canvas");
    particleCanvas.width = 20;
    particleCanvas.height = 20;
    var context2D = particleCanvas.getContext("2d");
    context2D.beginPath();
    context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
    context2D.closePath();
    context2D.fillStyle = "rgb(255, 255, 255)";
    context2D.fill();
  }
  return particleCanvas;
},

createParticleSystems(options, systemsArray) {
  var itemRadar = [],
    self = this;
  var scratchOffset = new Cesium.Cartesian3();
  var matrix4Scratch = new Cesium.Matrix4();
  //创建很多个粒子系统
  var length = options.numberOfSystems; //创建的长度
  for (var i = 0; i < length; ++i) {
    var scratchAngleForOffset =
      (Math.PI * 2.0 * i) / options.numberOfSystems; //一圈粒子的不同大小
    scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
    scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
    scratchOffset.z +=
      options.baseRadius * Math.cos(scratchAngleForOffset / 2);

    var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
      scratchOffset,
      matrix4Scratch
    );
    var color = Cesium.Color.RED; //取一个随机颜色
    //  var color = Cesium.Color.AQUAMARINE//取天蓝色
    var force = this.forceFunction(options, i);

    itemRadar = this.Global.viewer.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: self.getImage(),
        startColor: color,
        endColor: color,
        particleLife: 50,
        speed: 1,
        imageSize: new Cesium.Cartesian2(5.0, 5.0),
        emissionRate: 3.0,
        emitter: new Cesium.CircleEmitter(0.1),
        lifetime: 100,
        updateCallback: force,
        modelMatrix: self.particlesModelMatrix(),
        emitterModelMatrix: emitterModelMatrix
      })
    );
    systemsArray.push(itemRadar);
  }
},
forceFunction(options, iteration) {
  // console.log(options,"参数显示")
  return function(particle, dt) {
    // console.log(particle,"canshuxianshi")
    //光学传感器粒子位置更新函数
    var positionC = new Cesium.Cartesian3();
    var positionD = new Cesium.Cartesian3();
    dt = Cesium.Math.clamp(dt, 0.0, 1); //每次更新时间间隔
    //下面是向量计算
    var positionA = particle.position;
    var positionB = Cesium.Cartesian3.fromDegrees(118.54, 23.51, 5000);

    var positionC = Cesium.Cartesian3.multiplyByScalar(
      positionA,
      0.9,
      positionC
    );

    var positionD = Cesium.Cartesian3.multiplyByScalar(
      positionB,
      0.1,
      positionD
    );

    particle.position = Cesium.Cartesian3.add(
      positionC,
      positionD,
      particle.position
    );
  };
},
particlesModelMatrix() {
  var particlesModelMatrix;
  var planePosition = Cesium.Cartesian3.fromDegrees(
      -75.59777,
      40.03883,
      800.0
    ),
    particlesOffset = new Cesium.Cartesian3(
      -8.950115473940969,
      34.852766731753945,
      -30.235411095432937
    ),
    translationOffset = Cesium.Matrix4.fromTranslation(
      particlesOffset,
      new Cesium.Matrix4()
    ),
    translationOfPlane = Cesium.Matrix4.fromTranslation(
      planePosition,
      new Cesium.Matrix4()
    ),
    particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
      translationOfPlane,
      translationOffset,
      new Cesium.Matrix4()
    );
  return particlesModelMatrix;
},
createParticleSystems1(options,OpticSystems) {
  var itemRadar = [], self = this;
   
  var scratchOffset = new Cesium.Cartesian3();
  var matrix4Scratch = new Cesium.Matrix4();
  //创建很多个粒子系统
  var length = options.numberOfSystems; //创建的长度
  for (var i = 0; i < length; ++i) {
    var scratchAngleForOffset =
      (Math.PI * 2.0 * i) / options.numberOfSystems; //一圈粒子的不同大小
    scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
    scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);
    scratchOffset.z +=
      options.baseRadius * Math.cos(scratchAngleForOffset / 2);

    var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
      scratchOffset,
      matrix4Scratch
    );
    var color = Cesium.Color.BLUE; //取一个随机颜色
    //  var color = Cesium.Color.AQUAMARINE//取天蓝色
    var force = this.forceFunction1(options, i);

    itemRadar = this.Global.viewer.scene.primitives.add(
      new Cesium.ParticleSystem({
        image: self.getImage(),
        startColor: color,
        endColor: color,
        particleLife: 50,
        speed: 1,
        imageSize: new Cesium.Cartesian2(5.0, 5.0),
        emissionRate: 3.0,
        emitter: new Cesium.CircleEmitter(0.1),
        lifetime: 100,
        updateCallback: force,
        modelMatrix: self.particlesModelMatrix1(),
        emitterModelMatrix: emitterModelMatrix
      })
    );
    OpticSystems.push(itemRadar);
  }
},
forceFunction1(options, iteration) {
  // console.log(options,"参数显示")
  return function(particle, dt) {
    // console.log(particle,"canshuxianshi")
    //光学传感器粒子位置更新函数
    var positionC = new Cesium.Cartesian3();
    var positionD = new Cesium.Cartesian3();
    dt = Cesium.Math.clamp(dt, 0.0, 1); //每次更新时间间隔
    //下面是向量计算
    var positionA = particle.position;
    var positionB = Cesium.Cartesian3.fromDegrees(   
    120.54,
    18.51,
    5000);

    var positionC = Cesium.Cartesian3.multiplyByScalar(
      positionA,
      0.9,
      positionC
    );

    var positionD = Cesium.Cartesian3.multiplyByScalar(
      positionB,
      0.1,
      positionD
    );

    particle.position = Cesium.Cartesian3.add(
      positionC,
      positionD,
      particle.position
    );
  };
},
particlesModelMatrix1() {
  var particlesModelMatrix1;
  var planePosition = Cesium.Cartesian3.fromDegrees(
      120.54,
      18.51,
      0
    ),
    particlesOffset = new Cesium.Cartesian3(
      -8.950115473940969,
      34.852766731753945,
      -30.235411095432937
    ),
    translationOffset = Cesium.Matrix4.fromTranslation(
      particlesOffset,
      new Cesium.Matrix4()
    ),
    translationOfPlane = Cesium.Matrix4.fromTranslation(
      planePosition,
      new Cesium.Matrix4()
    ),
    particlesModelMatrix1 = Cesium.Matrix4.multiplyTransformation(
      translationOfPlane,
      translationOffset,
      new Cesium.Matrix4()
    );
  return particlesModelMatrix1;
},
createRadarToMoon() {
  //关于粒子的一些属性项
  //光学粒子属性
  var self = this;
  var Optics_options = {
    numberOfSystems: 12,
    iterationOffset: 0.1,
    cartographicStep: 0.00000001,
    baseRadius: 3000 //初始圆形的半径
  };
  // 雷达粒子属性
  let Radar_options = {
    numberOfSystems: 12, //用很多粒子组成一个形状，这里让其组成一个圆形
    iterationOffset: 0.1,
    cartographicStep: 0.00000001,
    baseRadius: 3000 //初始圆形的半径
  };
  var RadarSystems = [],OpticSystems=[];
  var flag = true;

  this.createParticleSystems(Radar_options, RadarSystems);
  this.createParticleSystems1(Optics_options,OpticSystems );
  var scene = this.Global.viewer.scene;
  var r = 0;
  var center = new Cesium.Cartesian3();
  var hpRoll = new Cesium.HeadingPitchRoll();
  var hpRange = new Cesium.HeadingPitchRange();
  var speed = 500; //飞行速度
  var position = Cesium.Cartesian3.fromDegrees(115.54, 20.51, 470000); //飞机初始位置

  var speedVector = new Cesium.Cartesian3(); //速度向量
  var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
    "north",
    "west"
  ); //坐标系
  this.Global.viewer.scene.preUpdate.addEventListener(function(
    scene,
    time
  ) {
    speedVector = Cesium.Cartesian3.multiplyByScalar(
      Cesium.Cartesian3.UNIT_X,
      speed / 10,
      speedVector
    );
    position = Cesium.Matrix4.multiplyByPoint(
      Cesium.Transforms.headingPitchRollToFixedFrame(
        position,
        hpRoll,
        Cesium.Ellipsoid.WGS84,
        fixedFrameTransform
      ),
      speedVector,
      position
    );
    // pathPosition.addSample(Cesium.JulianDate.now(), position);
    Cesium.Transforms.headingPitchRollToFixedFrame(
      position,
      hpRoll,
      Cesium.Ellipsoid.WGS84,
      fixedFrameTransform,
      Cesium.Transforms.headingPitchRollToFixedFrame(
        position,
        hpRoll,
        Cesium.Ellipsoid.WGS84,
        fixedFrameTransform
      )
    );
    var translationOfPlane = Cesium.Matrix4.fromTranslation(
      position,
      new Cesium.Matrix4()
    );
    var particlesOffset = new Cesium.Cartesian3(
        -8.950115473940969,
        34.852766731753945,
        -30.235411095432937
      ),
      translationOffset = Cesium.Matrix4.fromTranslation(
        particlesOffset,
        new Cesium.Matrix4()
      ),
      particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new Cesium.Matrix4()
      ),
      particlesModelMatrix1= Cesium.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new Cesium.Matrix4()
      );
    // itemOptics.modelMatrix=particlesModelMatrix;
    for (var i = 0; i < 12; i++) {
      RadarSystems[i].modelMatrix = particlesModelMatrix;
      OpticSystems[i].modelMatrix = particlesModelMatrix1;
    }
  });
  //镜头顺时针旋转九十度，即东向
  var heading = Cesium.Math.toRadians(90);
  //镜头倾斜30度俯视
  var pitch = Cesium.Math.toRadians(-30);
  this.Global.viewer.zoomTo(
    this.Global.viewer.entities,
    new Cesium.HeadingPitchRange(heading, pitch)
  );
}
/**方法2**/

}
};
</script>

<style lang='scss' scoped>

cesiumContainer {

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>