SuperMap iClient for WebGL实体视角实现

在SuperMap iClient for WebGL中，可以添加多种类型的实体，且可以用viewer.trackedEntity去对实体进行跟踪显示，但是有时候难免会有从实体的视角去看场景、视角变化之类的需求，笔者从此出发，使用entity.viewFrom对视角进行设置。

主要还是用的相机的lookat的方法，因为反正都是视角的移动嘛，所以都是控制相机，就直接找了camera中的方法看。

其实最终也是用了property，但是没往viewForm里放

先看下camera.lookat的文档说明

 

 需要两个参数，第一个是目标位置，第二个是偏移方向。得到这两个参数后，就可以开始去找啦!

首先计算一下方向，position是用线路节点进行插值后的结果；

var hpRange = new Cesium.VelocityOrientationProperty(position);

然后渲染的时候获取当前的时间，再用时间去entity里面获取位置数据，开始的时候笔者的节点高度因为是手动获取的，实在是太低了，一次性加到了50

var endPos = lk.position.getValue(viewer.clock.currentTime);
var cartographic = Cesium.Cartographic.fromCartesian(endPos);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
let center = new Cesium.Cartesian3.fromDegrees(lon, lat,height+50);

获取到第一个参数之后，接下来就是第二个参数了，第二个参数是方向，其实位置不难获取，主要是方向不好控制，所以有用定值调整了一下下的，但是其实可以可以用滑动监听控制的方式进行调整，这样得到的视角可能会更符合心意。

实时获取插值得到的方向，然后调整

var fangxiangsiyuanshu = hpRange.getValue(viewer.clock.currentTime);
let C3 = Cesium.Cartesian3.fromCartesian4(fangxiangsiyuanshu);
let h = C3.x;
let p = C3.y;
let r = C3.z ;  //需要调整这几个视角的值   需要降低俯仰角
 
let hpr = new Cesium.HeadingPitchRange(h, p, r);

再用上面得到的两个参数设置相机位置

viewer.camera.lookAt(center,hpr);
用了场景渲染监听，因为要实时设置

var hpRange = new Cesium.VelocityOrientationProperty(position);
                    scene.postRender.addEventListener(function(){
                        console.log(lk.viewFrom)
                        var fangxiangsiyuanshu = hpRange.getValue(viewer.clock.currentTime);
                        var endPos = lk.position.getValue(viewer.clock.currentTime);
                        let C3 = Cesium.Cartesian3.fromCartesian4(fangxiangsiyuanshu);
                        let h = C3.x;
                        let p = C3.y;
                        let r = C3.z ;  //需要调整这几个视角的值   需要降低俯仰角
                        // var m = 0.00000906;
                         var cartographic = Cesium.Cartographic.fromCartesian(endPos);
                         var lon = Cesium.Math.toDegrees(cartographic.longitude);
                         var lat = Cesium.Math.toDegrees(cartographic.latitude);
                        var height = cartographic.height;
                        // var m = 0.00000906;
                        let center = new Cesium.Cartesian3.fromDegrees(lon, lat,height+50);
                        let hpr = new Cesium.HeadingPitchRange(h, p, r);
                        viewer.camera.lookAt(center,hpr);
                        console.log("hpr",hpr);
                        
                            });

编者：wzr