Cesium 追踪模型或entity 动态修改观看视角

最新推荐文章于 2025-04-13 23:22:36 发布

easyCesium

最新推荐文章于 2025-04-13 23:22:36 发布

阅读量1.9w

点赞数 4

分类专栏： webGis 文章标签： CESIUM property hpr

本文链接：https://blog.csdn.net/caozl1132/article/details/89329709

版权

webGis 专栏收录该内容

24 篇文章

订阅专栏

先晒一下效果：

先说下大致实现的情形：

现从后台获取json数据，拿到gps坐标数组，里面包含时间和经纬度高度，展示模型的运行轨迹，并且在展示的同时可以动态修改观看的视角；

以下是cesium中trackEntity时的视角设定：

调用viewFrom方法；

在entity这个类下，自己可以去看一下，这里的设定只是在追踪entity的时候初始视角，下面的是动态修改视角；

现说下大致的实现思路：

1、获取数据时设置 var property = new Cesium.SampledPositionProperty();

2、将获取到的property添加到entity中，

viewer.entities.add({
                    availability: new Cesium.TimeIntervalCollection([new         
                    Cesium.TimeInterval({
                        start: start,
                        stop: stop
                    })]),
                    position: property,
                    orientation: new Cesium.VelocityOrientationProperty(property),
                    model: {
                        uri: '../data/gltf/plane.glb',
                        minimumPixelSize: 64
                    },
                    path: {
                        resolution: 1,
                        material: new Cesium.PolylineGlowMaterialProperty({
                            glowPower: 0.1,
                            color: Cesium.Color.YELLOW.withAlpha(0)
                        }),
                        width: 3
                    }
                });

3、以上两步即可使模型运动，接下来动态设置视角，我是使用Cesium.knockout.track(viewModel);绑定了一个html的控制面板，当然不用这个自己写也行，绑定好了之后添加场景的渲染事件viewer.scene.preUpdate.addEventListener，在此事件的回调函数里动态修改camera的hpr；

 preUpdateHandler = viewer.scene.preUpdate.addEventListener(function () {
                if (entity) {
                    hpRange.heading = viewHeading || Cesium.Math.toRadians(90);
                    hpRange.pitch = viewPitch || Cesium.Math.toRadians(0);
                    hpRange.range = viewRange || 1000;
                    var center = entity.position.getValue(viewer.clock.currentTime);
                    if (center) viewer.camera.lookAt(center, hpRange);
                }
            });

以上三步即可完成全部的功能；

谢谢观看！如有问题请留言或者私信我！