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

先晒一下效果:

Cesium 追踪模型或entity 动态修改观看视角_第1张图片

先说下大致实现的情形:

现从后台获取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);
                }
            });

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

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

你可能感兴趣的:(webGis,CESIUM,property,hpr)