supermap iclient3d for cesium模型沿路径移动

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