利用geojson实现模型轨迹运动

直接上代码

  var viewer = new Cesium.Viewer('cesiumContainer');

      //Set the random number seed for consistent results.
      Cesium.Math.setRandomNumberSeed(3);

      //Set bounds of our simulation time
      var start = Cesium.JulianDate.fromDate(new Date(2017, 2, 25, 16));
      var stop = Cesium.JulianDate.addSeconds(start, 3600, new Cesium.JulianDate());

      //Make sure viewer is at the desired time.
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //在时间结束后再次从开始重复
      viewer.clock.multiplier = 1;//时间流速

      //Set timeline to simulation bounds
      viewer.timeline.zoomTo(start, stop);//底部时间条控件调整

      var viewModel = {
          rate: 5.0,
          gravity: 0.0,
          minimumLife: 1.0,
          maximumLife: 1.0,
          minimumSpeed: 5.0,
          maximumSpeed: 5.0,
          startScale: 1.0,
          endScale: 4.0,
          particleSize: 20.0,
          transX: 2.5,
          transY: 4.0,
          transZ: 1.0,
          heading: 0.0,
          pitch: 0.0,
          roll: 0.0,
          fly: false,
          spin: false,
          show: true
      };

      var entityPosition = new Cesium.Cartesian3();
      var entityOrientation = new Cesium.Quaternion();
      var rotationMatrix = new Cesium.Matrix3();
      var modelMatrix = new Cesium.Matrix4();
      function computeModelMatrix(entity, time) {
          var position = Cesium.Property.getValueOrUndefined(entity.position, time, entityPosition);
          if (!Cesium.defined(position)) {
              return undefined;
          }
          var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, entityOrientation);
          if (!Cesium.defined(orientation)) {
              modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, modelMatrix);
          } else {
              modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, rotationMatrix), position, modelMatrix);
          }
          return modelMatrix;
      }

      var emitterModelMatrix = new Cesium.Matrix4();
      var translation = new Cesium.Cartesian3();
      var rotation = new Cesium.Quaternion();
      var hpr = new Cesium.HeadingPitchRoll();
      var trs = new Cesium.TranslationRotationScale();
      function computeEmitterModelMatrix() {
          hpr = Cesium.HeadingPitchRoll.fromDegrees(viewModel.heading, viewModel.pitch, viewModel.roll, hpr);

          trs.translation = Cesium.Cartesian3.fromElements(viewModel.transX, viewModel.transY, viewModel.transZ, translation);
          trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

          return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
      }

      //计算运动轨迹函数：时间+位置
      function computeCirclularFlight(lon, lat, radius) {
          var property = new Cesium.SampledPositionProperty();
          for (var i = 0; i <= 360; i += 45) {
              var radians = Cesium.Math.toRadians(i);
              var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());//时间递增
              var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)),
                  Cesium.Math.nextRandomNumber() * 500 + 1750);//位置变化
              property.addSample(time, position);
          }
          return property;
      }

      //计算模型随时间变化的位置
      //var circularPosition = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
      var staticPosition = Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000);//静止的位置

      var entity = viewer.entities.add({

          //Set the entity availability to the same interval as the simulation time.
          availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
              start: start,
              stop: stop
          })]),

          //Load the Cesium plane model to represent the entity
          model: {
              //uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
              uri: '../Apps/SampleData/plane.gltf',
              color: getColor('red', 1),
              minimumPixelSize: 54,//控制模型最小
              maximumScale:5//控制模型最大
          },

          position: staticPosition,

          //实时轨迹显示
          path: {
              show: true,
              leadTime: 0,//飞机将要经过的路径，路径存在的时间
              trailTime: 60,//飞机已经经过的路径，路径存在的时间
              width: 1,//线宽度
              resolution: 1,
              material: new Cesium.PolylineGlowMaterialProperty({
                  glowPower: 0.3,//应该是轨迹线的发光强度
                  color: Cesium.Color.PALEGOLDENROD//颜色
              })
          }
      });

      viewer.trackedEntity = entity;
      function getColor(colorName, alpha) {
          var color = Cesium.Color[colorName.toUpperCase()];
          return Cesium.Color.fromAlpha(color, parseFloat(alpha));
      }
      //根据geojson获取飞行路径
      Cesium.loadJson('SampleData/flyline2.json').then(function (jsonData) {
          var lineArray = jsonData.features[0].geometry.coordinates;
          var property = new Cesium.SampledPositionProperty();
          for (var i = 0;  i< lineArray.length; i ++) {
              var lon = lineArray[i][0];
              var lat = lineArray[i][1];
              var dtime = 100*i;
              var time = Cesium.JulianDate.addSeconds(start, dtime, new Cesium.JulianDate());//时间递增
              var position = Cesium.Cartesian3.fromDegrees(lon, lat,11750);//位置变化
              property.addSample(time, position);
          }
          entity.position = property;
          entity.orientation = new Cesium.VelocityOrientationProperty(property);
      }).otherwise(function (error) {
          console.log(error);
      });
      //移动的原理：position参数包含时间和所处位置，根据当前时间得到位置
        //entity.position = circularPosition;
        //根据模型当前位置自动计算模型的旋转等参数
        //entity.orientation = new Cesium.VelocityOrientationProperty(circularPosition);

/*************************
粒子系统实现
**************************/
        var scene = viewer.scene;
        //粒子系统初始化-实际是使用图片，改变图片的显示样式实现仿粒子化。
        //图片可以利用canvas代替，在canvas中可以绘制自定义图形
        var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
            image: '../Apps/SampleData/fire.png',

            startColor: Cesium.Color.RED.withAlpha(0.7),
            endColor: Cesium.Color.YELLOW.withAlpha(0.3),

            startScale: viewModel.startScale,
            endScale: viewModel.endScale,

            minimumLife: viewModel.minimumLife,
            maximumLife: viewModel.maximumLife,

            minimumSpeed: viewModel.minimumSpeed,
            maximumSpeed: viewModel.maximumSpeed,

            minimumWidth: viewModel.particleSize,
            minimumHeight: viewModel.particleSize,

            maximumWidth: viewModel.particleSize,
            maximumHeight: viewModel.particleSize,

            // Particles per second.
            rate: viewModel.rate,

            bursts: [
                new Cesium.ParticleBurst({ time: 5.0, minimum: 300, maximum: 500 }),
                new Cesium.ParticleBurst({ time: 10.0, minimum: 50, maximum: 100 }),
                new Cesium.ParticleBurst({ time: 15.0, minimum: 200, maximum: 300 })
            ],

            lifeTime: 16.0,

            emitter: new Cesium.CircleEmitter(0.5),

            emitterModelMatrix: computeEmitterModelMatrix(),

            forces: [applyGravity]
        }));
        particleSystem.show = false;//不显示粒子系统
      //粒子系统重力
        var gravityScratch = new Cesium.Cartesian3();
        function applyGravity(p, dt) {
            // We need to compute a local up vector for each particle in geocentric space.
            var position = p.position;

            Cesium.Cartesian3.normalize(position, gravityScratch);
            Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);

            p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);
        }
      //根据目标模型计算粒子系统相关参数
        viewer.scene.preRender.addEventListener(function (scene, time) {
            particleSystem.modelMatrix = computeModelMatrix(entity, time);
            // Account for any changes to the emitter model matrix.
            particleSystem.emitterModelMatrix = computeEmitterModelMatrix();

        });