个人网站制作流程北京网站优化排名推广

可以直接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>