CESIUM学习—— viewer.trackedEntity小坑坑

最新推荐文章于 2024-04-18 17:33:22 发布

luoyun620

最新推荐文章于 2024-04-18 17:33:22 发布

阅读量4.7k

点赞数 3

分类专栏： cesium

本文链接：https://blog.csdn.net/luoyun620/article/details/118191116

版权

cesium 专栏收录该内容

25 篇文章

订阅专栏

在Cesium中，使用viewer.trackedEntity属性绑定entity以跟随其运动时，遇到一个问题：viewer.camera.flyTo操作未完成就绑定，导致追踪效果失效。解决方法是将viewer.trackedEntity设置放在flyTo的complete回调中，确保在飞行动画完成后执行绑定，从而实现预期的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用ceiusm时，或多或少都会用到viewer.trackedEntity这个属性。主要是把相机绑定到entity实例上，如果entity运动的话，还可很方便地实现动画效果。但我在开发中踩过一个小坑坑。先看看下面的代码：

 this._roamEntity = viewer.entities.add({
        name: "",
        billboard: {
            image: "./Earth/images/person.png", // default: undefined
            show: true, // default
            width: 30, // default: undefined
            scale: 1,
            height: 30, // default: undefined
            pixelOffset: new Cesium.Cartesian2(0, -14), // default: (0, 0)
            // disableDepthTestDistance: 0,
        },
          动画初始时的视角，该视角坐标位置是相对于entity的相对坐标。
         viewFrom: new Cesium.Cartesian3(  6.020494559314102,  44.92337556742132,   19.992120610550046),
        //绘制路径
        path: {
            width: 10.0,
            material: new Cesium.PolylineGlowMaterialProperty({
                color: Cesium.Color.DEEPSKYBLUE,
                glowPower: 0.25,
            }),
        },
        availability: new Cesium.TimeIntervalCollection([
            new Cesium.TimeInterval({
                start: start,
                stop: stop,
            }),
        ]),
        position:  position,
        orientation: new Cesium.VelocityOrientationProperty(position)
    });
    viewer.trackedEntity = this._roamEntity;

然后实现出来的效果如下：在这里插入图片描述
可以看到viewer.trackedEntity没有起到应有的效果。
这个是由于在加载entity前，使用了：

 viewer.camera.flyTo({
        destination: camera.position,
        orientation: {
            heading: camera.heading,
            pitch: camera.pitch,
            roll: camera.roll
        },
        maximumHeight: 10,
        complete: function () {
            callback();
        }
    });

viewer.camera.flyTo还没有执行完成，就绑定了viewer.trackedEntity导致。如果要实现flyTo后进行viewer.trackedEntity动画，要把加载绑定viewer.trackedEntity代码放到flyTo的 complete函数里面，否则就会出现问题。
修改后效果：
在这里插入图片描述