效果:
实现思路(最后有完整代码):
与上篇文章思路一样 无非就是更换了模型与粒子图片以及粒子的配置,上一篇文章链接:https://blog.csdn.net/m0_63701303/article/details/135551667?spm=1001.2014.3001.5501
1.用clock组件创建时间线
2.时间轴和船的位置信息绑定
3.添加模型让模型按照绑定的位置飞行
4.创建粒子系统--水花效果
粒子所需图片地址链接:链接:https://pan.baidu.com/s/1-9bi9UAyWp9TruX1HL0Krw?
提取码:1234
5.让粒子实时跟随模型移动
直接上代码 详细步骤看上篇文章
<template>
<div class="btn"></div>
<div>
<Map />
</div>
</template>
<script setup>
import Map from "@/components/map/Map.vue";
import { nextTick, onUnmounted, reactive } from "vue";
const person = reactive({});
nextTick(() => {
// 创建时间线
var start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
var start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
var stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
// 设置时钟开始时间
viewer.clock.startTime = start.clone();
// 设置时钟当前时间
viewer.clock.currentTime = start.clone();
// 设置时钟结束时间
viewer.clock.stopTime = stop.clone();
// 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样
viewer.clock.multiplier = 5;
// 时间轴绑定到viewer上去
// viewer.timeline.zoomTo(start, stop);
// 循环执行,到达终止时间,重新从起点时间开始
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
// ======================================================
var data = [
{ long: 121.399999, lat: 32.66277, height: 0, time: 0 },
{ long: 122.507572, lat: 31.570649, height: 0, time: 180 },
{ long: 122.158023, lat: 30.493342, height: 0, time: 400 },
];
let property = computeFlight(data); // 这是通过一个方法把时间轴和船的位置信息绑定了
// 时间轴和船的位置信息绑定了
function computeFlight(source) {
let property = new Cesium.SampledPositionProperty();
for (let i = 0; i < source.length; i++) {
let time = Cesium.JulianDate.addSeconds(
start,
source[i].time,
new Cesium.JulianDate()
);
let position = Cesium.Cartesian3.fromDegrees(
source[i].long,
source[i].lat,
source[i].height
);
// 添加位置,和时间对应
property.addSample(time, position);
}
return property;
}
// 添加并移动船
var entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
position: property,
// 基于位置计算方向角
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "./model/战舰模型/xyj.gltf", //gltf文件的URL
scale: 30.05, //放大倍数
//color: Cesium.Color.fromCssColorString("rgba(0, 253, 239, 0.6)"), // 船模型颜色
silhouetteColor: Cesium.Color.fromCssColorString("rgba(0, 255, 0, 1)"), // 船模型边框颜色
silhouetteSize: 1, // 船模型边框宽度
},
// path: {
// // 船路径
// resolution: 1, //
// material: new Cesium.PolylineGlowMaterialProperty({
// glowPower: 0.1, // 颜色透明度
// color: Cesium.Color.fromCssColorString("rgba(0, 253, 239, 0.5)"), // 路线颜色
// }),
// width: 2, // 路线的显示宽度
// },
});
viewer.trackedEntity = entity; // 视角跟随模型
// 创建一个例子系统
let particleSystem = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
image: "./imgs/smoke.png", // 波浪图片
startColor: Cesium.Color.fromCssColorString("rgba(75, 125, 172, 0.6)"), //粒子在其生命初期的颜色
endColor: Cesium.Color.WHITE.withAlpha(0.0), //粒子在其生命结束的颜色
startScale: 10.0, //粒子图像的初始比例
endScale: 150.0, //粒子图像的结束比例
minimumParticleLife: 1, //粒子生命的可能持续时间的最小范围
maximumParticleLife: 6, //粒子生命的可能持续时间的最大范围
speed: 20.0,
emissionRate: 50.0, //每秒要发射的粒子数
emitter: new Cesium.CircleEmitter(2), //粒子发射器样式圆形
//imageSize: new Cesium.Cartesian2(2, 2),//粒子图像尺寸(以像素为单位)的minimumImageSize和maximumImageSize
minimumImageSize: new Cesium.Cartesian2(0, 0),
maximumImageSize: new Cesium.Cartesian2(2, 2),
//主模型参数(位置)
modelMatrix: computeModelMatrix(entity, Cesium.JulianDate.now()), //从模型转换为世界坐标的4x4转换矩阵
emitterModelMatrix: computeEmitterModelMatrix(), // 粒子发射器模型矩阵,粒子发射器位置
})
);
// 在粒子系统局部坐标系内转换粒子系统发射器的4x4转换矩阵。
function computeEmitterModelMatrix() {
//方向
let hpr = Cesium.HeadingPitchRoll.fromDegrees(
80,
80,
80,
new Cesium.HeadingPitchRoll()
);
var trs = new Cesium.TranslationRotationScale();
//以modelMatrix(船)中心为原点的坐标系的xyz轴位置偏移
trs.translation = Cesium.Cartesian3.fromElements(
1700,
0,
0,
new Cesium.Cartesian3()
);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
hpr,
new Cesium.Quaternion()
);
return Cesium.Matrix4.fromTranslationRotationScale(
trs,
new Cesium.Matrix4()
);
}
// 计算当前时间点船模型的位置矩阵 //从模型转换为世界坐标的4x4转换矩阵
function computeModelMatrix(entity, time) {
// //获取位置
let position = Cesium.Property.getValueOrUndefined(
entity.position,
time,
new Cesium.Cartesian3()
);
if (!Cesium.defined(position)) {
return undefined;
}
//获取方向
let modelMatrix;
let orientation = Cesium.Property.getValueOrUndefined(
entity.orientation,
time,
new Cesium.Quaternion()
);
if (!Cesium.defined(orientation)) {
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
position,
undefined,
new Cesium.Matrix4()
);
} else {
modelMatrix = Cesium.Matrix4.fromRotationTranslation(
Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()),
position,
new Cesium.Matrix4()
);
}
return modelMatrix;
}
// 粒子跟随模型
viewer.scene.preRender.addEventListener((scene, time) => {
particleSystem.modelMatrix = computeModelMatrix(entity, time); // 粒子系统和模型绑定,让他跟着模型跑
});
});
onUnmounted(() => {});
</script>
<style scoped lang='less'>
.btn {
position: absolute;
left: 300px;
top: 30px;
z-index: 999;
}
</style>
?