直接上代码
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();
});