国外网站服务器,北京营销型网站建设费用,网站建设比赛,高端网站开发注意事项飞行漫游#xff0c;就是让Camera飞行。Camera有一些方法可以实现位置、视角的调整#xff0c;比如flyTo#xff0c;setView方法。但这些方法并不能沿着我们想要的路径调整#xff0c;在通过插值的方法不停的调用setView#xff0c;但这样会造成视图卡顿#xff0c;而且计… 飞行漫游就是让Camera飞行。Camera有一些方法可以实现位置、视角的调整比如flyTosetView方法。但这些方法并不能沿着我们想要的路径调整在通过插值的方法不停的调用setView但这样会造成视图卡顿而且计算起来也很麻烦。所以我们最好是借助entity通过跟踪运动中的entity就可以实现Camera的飞行了。官网示例 刚开始的时候以为官方会有类似于 viewer.trackedEntity entity; 的方法来实现第一人称视角结果找半天并没有发现。后来想的是通过 viewer.camera.setView 和 viewer.camera.lookAtTransform 之类的方式实现结果尝试很多次并没有成功。viewer.camera.lookAtTransform 也可以实现固定视角但是没找到如何改变仰角效果不太好因此放弃。最后改变思路尝试实时监听飞行状态通过 viewer.camera.lookAt 动态修改视角实现第一人称视角飞行。 完成第一视角跟随之后还需要取消跟随按照常规来说有绑定就应该有解绑。通过 onTickEvent viewer.clock.onTick.addEventListener 绑定作者认为是 viewer.clock.onTick.removeEventListener结果发现直接调用一次方法也可以这样更省事onTickEvent() 。至此第一视角跟随功能已可以完全实现
设置路径
我们将我们直接修改官网的CZML文件把没用的东西统统删掉。替换成自己的路径。
注意时间interval和时间快进倍数multiplier的关系 cartographicDegrees中每一行的参数分别是时间点、经度、纬度、高程。 我设置了18个点选择三分钟除以10倍也就是18秒跑完一圈 隐藏路径把width设为0 隐藏飞机把billboard删掉
[{id: document,name: CZML Path,version: 1.0,clock: {interval: 2020-08-04T10:00:00Z/2020-08-04T10:03:00Z,currentTime: 2020-08-04T10:00:00Z,multiplier: 10}},{id: path,name: path with GPS flight data,path: {width: 0,leadTime: 10,trailTime: 1000,resolution: 5},position: {epoch: 2020-08-04T10:00:00Z,cartographicDegrees: [0, 120.184679, 30.250211, 176,10, 120.184507, 30.252099, 173,20, 120.185151, 30.253816, 172,30, 120.185795, 30.254631, 170,40, 120.187125, 30.255704, 170,50, 120.189099, 30.255704, 167,60, 120.19176, 30.255103, 171,70, 120.194249, 30.254331, 165,80, 120.195236, 30.252442, 170,90, 120.195365, 30.250211, 154,100, 120.19455, 30.247808, 132,110, 120.192575, 30.24579, 127,120, 120.189614, 30.244761, 117,130, 120.187297, 30.244803, 113,140, 120.185795, 30.24549, 103,150, 120.183864, 30.247035, 103,160, 120.183907, 30.248795, 107,170, 120.183679, 30.249211, 176,180, 120.184679, 30.250211, 176]}}
]飞行漫游
我把上面的czml保存成了json格式它就是json并加载。 这里用到了插值作用是在你拐弯的时候一样如丝般润滑 viewer.dataSources.add(Cesium.CzmlDataSource.load(./path.json)).then((ds) {flyEntity ds.entities.getById(path)flyEntity.position.setInterpolationOptions({interpolationDegree: 5,interpolationAlgorithm: Cesium.LagrangePolynomialApproximation})viewer.trackedEntity flyEntity})调整视角 调整视角是在viewer.scene.preUpdate.addEventListener(function () {})中完成的。在这个函数中调用viewer.camera.lookAt()方法改变视角。
lookAt的第二个参数可以是坐标向量也可是角度对象。我这里是用了向量Cartesian3对象作为第二个参数。你也可以使用角度对象HeadingPitchRange可以参考 这位博主的博客)
我这里是让Camera每时每刻对准某一点你可以在其中实现更复杂的操作
const target new Cesium.Cartesian3.fromDegrees(120.189, 30.254, 300)function setRoamView() {if (flyEntity) {const center flyEntity.position.getValue(viewer.clock.currentTime)if (center) {const vector new Cesium.Cartesian3(target.x - center.x, target.y - center.y, 300)viewer.camera.lookAt(center, vector)}}
}
viewer.scene.preUpdate.addEventListener(setRoamView)补充
用户可能会想到停止漫游两步
取消Camera跟踪即 viewer.trackedEntity null取消事件绑定 viewer.scene.preUpdate.removeEventListener(setRoamView)
文章借鉴博客地址大洪、非科班Java出身GISer
