cesium 学习03 实体沿轨迹运动

513 阅读2分钟

1. 加载 3d Tiles数据 (上章节讲过不多说)

主要是提醒一点, 有时候直接加载 这个建筑模型很模糊,设置maximumScreenSpaceError这个属性 清晰度会高很多。
在Cesium中,maximumScreenSpaceError参数用于控制瓦片渲染的时机。当视角固定不动的时候,该参数越小,子瓦片渲染越早。也就是说,设置较小的 maximumScreenSpaceError,就可以在较远距离就可以进行子瓦片的渲染。该参数的大小需要开发者对可视化设备进行评估再做设定。如果是显卡性能较好的设备,如台式机、工作站,就可以使用较小的maximumScreenSpaceError,以求达到最佳的可视化效果;如果是显卡性能较差的设备,如移动设备,则可以尽量调大maximumScreenSpaceError,保证可视化和交互的流畅体验。

const initModel = () => {
    Cesium.Cesium3DTileset.fromUrl("xxx.json", { maximumScreenSpaceError: 1 }).then(function (tileset) {
       
    })
}

2. 制定移动路线

运动的逻辑就是需要 多个坐标点组成的一条线 ,每一个坐标点都会设置一个时间点,所以我们需要计算出每个点与初始点间隔多少时间

const makeWay = () => {
    let collection = new Cesium.SampledPositionProperty();
    let start = Cesium.JulianDate.now(); // 开始时间
    let alltime = 5000 // 总时长比如 5000秒
    let stop = Cesium.JulianDate.addSeconds(start, alltime, new Cesium.JulianDate()) // 结束时间

// 开始采样 stepTime 就是 每个点与初始点间隔多少时间 单位秒
    pointArr.value.forEach(ele => {
        collection.addSample(Cesium.JulianDate.addSeconds(start, ele.stepTime, new Cesium.JulianDate()), ele.posi);
    })

    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 到时间就结束 ,如果设置成 循环播放 时间段为0 的时候电脑直接死机

    return { collection, start, stop }

3. 模型沿轨迹运动

 const initWorker = () => {
    let { collection, start, stop } = makeWay()
    let gltf = 'http:xxx/gongren.glb'
    entity = viewer.entities.add({
        // 实体可用性,在指定时间内返回有效数据
        availability: new Cesium.TimeIntervalCollection([
            new Cesium.TimeInterval({
                start: start,
                stop: stop,
            }),
        ]),
        // 位置信息随时间变化property
        position: collection,
        // 实体方向
        orientation: new Cesium.VelocityOrientationProperty(collection),
        model: {
            uri: gltf,
            scale: 3,
            minimumPixelSize: 20, //最小模型像素大小就是无限缩放 最小能看到多大
        },
        // 轨迹路径
        path: {
            resolution: 1,
            width: 2,
            material: Cesium.Color.RED,
        },})
    viewer.trackedEntity = entity
        }
            

运动暂停、继续 可以通过设置 viewer.clock.shouldAnimate 为 true 或者false。