可以直接settimeout隔一段时间直接设置位置属性,但是得到的结果模型不是连续的移动,如果想要连续的移动,就需要设置一个时间轴,然后给模型传入不同时间时的位置信息,然后就可以了。
开启时间轴
let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate())//东八区
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate())
viewer.clock.startTime = start.clone()
// 设置时钟当前时间
viewer.clock.currentTime = start.clone()
// 设置时钟结束时间
viewer.clock.stopTime = stop.clone();
// 数字越大时间过的越快
viewer.clock.multiplier = 10
// 循环执行
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
想让模型跟随移动方向切换方向
orientation : new Cesium.VelocityOrientationProperty(position)
但是刚开始机头的朝向并不是速度的方向,所以一直会偏差,查询之后,发现有点复杂,初学者还是暂时放弃,
飞机整体代码这样,这里有个小坑,原生cesium你要绑定时间轴还需要设置availability,但是supermap这个没有,你加上就没有图像了
var plane=new Cesium.Entity({
position:property,
model: {
uri:"src/assets/gltf/plane/scene.gltf",
minimumPixelSize: 128, //模型最小像素
maximumScale: 200, //模型最大放大倍数
},
orientation: new Cesium.VelocityOrientationProperty(property)
})
viewer.entities.add(plane)
function computeFlight(source:any) {
let property = new Cesium.SampledPositionProperty();
for (let i = 0; i < source.length; i++) {
//时间间隔
let time = Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);
//坐标和高度
let position = Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);
property.addSample(time, position);
}
return property;
}
在后面加一条轨迹线
const entityPath = new Cesium.Entity({
position: property,
path: {
show: true,
leadTime: 0,
trailTime: 30,
width: 6,
resolution: 1,
material:Cesium.Color.YELLOW,
},
});
初学做的不好,后面学多了会做好看的
总的代码
<template>
<div class="PartOneBox">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive,onMounted} from 'vue'
const plane1Position=[
[104.173,30.822,0],
[104.178,30.837,100],
[104.19,30.837, 200],
[104.185,30.82,300],
[104.173,30.822,400],
]
let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
onMounted(async()=>
{
let viewer = new Cesium.Viewer('cesiumContainer')
// 设置时钟开始时间
viewer.clock.startTime = start.clone();
// 设置时钟当前时间
viewer.clock.currentTime = start.clone();
// 设置时钟结束时间
viewer.clock.stopTime = stop.clone();
// 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样
viewer.clock.multiplier = 20
// 循环执行,到达终止时间,重新从起点时间开始
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle: Cesium.TiandituMapsStyle["IMG_C"],//天地图全球中文注记服务
token: "你的" //由天地图官网申请的密钥
});
viewer.imageryLayers.addImageryProvider(labelImagery);
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
104.18,30.83,3500
)
})
var geo = new Cesium.Entity({
position:Cesium.Cartesian3.fromDegrees(
104.18,30.83,1650
),
wall:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.173,30.822,400,
104.178,30.837,400,
104.19,30.837, 400,
104.185,30.82,400,
104.173,30.822,400,
]),
material:Cesium.Color.RED.withAlpha(.4),
outline: true,
},
polyline:{
positions:Cesium.Cartesian3.fromDegreesArrayHeights([
104.18,30.83,0,
104.18,30.83,1600
]),
material:Cesium.Color.BLUE,
width:5
},
label: {
text: "好的大学没有围墙!!",
font: "14px sans-serif",
showBackground: true,
backgroundColor:new Cesium.Color(50,50,50,.6)
},
})
let property = computeFlight(plane1Position)
var plane=new Cesium.Entity({
position:property,
model: {
uri:"src/assets/gltf/plane/scene.gltf",
minimumPixelSize: 128, //模型最小像素
maximumScale: 200, //模型最大放大倍数
},
orientation: new Cesium.VelocityOrientationProperty(property)
})
const entityPath = new Cesium.Entity({
position: property,
path: {
show: true,
leadTime: 0,
trailTime: 30,
width: 6,
resolution: 1,
material:Cesium.Color.YELLOW,
},
});
viewer.entities.add(geo)
viewer.entities.add(plane)
viewer.entities.add(entityPath)
})
function computeFlight(source:any) {
let property = new Cesium.SampledPositionProperty();
for (let i = 0; i < source.length; i++) {
//时间间隔
let time = Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);
//坐标和高度
let position = Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);
property.addSample(time, position);
}
return property;
}
</script>
<style scoped lang='scss'>
.PartOneBox
{
width:1200px;
height:1000px;
margin:50px auto;
position:relative;
.cesiumContainer
{
width:100%;
height:100%;
}
}
</style>