利用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(); });
