• 利用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,//飞机已经经过的路径,路径存在的时间
                   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();
    
            });
  • 相关阅读:
    JS 基于面向对象的 轮播图1
    JS 原型继承的几种方法
    angularJs 自定义服务 provide 与 factory 的区别
    C# 调用JS Eval,高效率
    Linq表连接大全(INNER JOIN、LEFT OUTER JOIN、RIGHT OUTER JOIN、FULL OUTER JOIN、CROSS JOIN)
    C# LINQ干掉for循环
    C# 彻底搞懂async/await
    .NET中的异步编程——动机和单元测试
    .NET中的异步编程——常见的错误和最佳实践
    C# 实用代码段
  • 原文地址:https://www.cnblogs.com/dullfish/p/7814829.html
Copyright © 2020-2023  润新知