前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。3
提示:以下是本篇文章正文内容,下面案例可供参考
一、需要实现的效果?![联动效果图](https://aitechtogether.com/wp-content/uploads/2022/05/b7d75ffb-56f1-4935-a4e8-6a73f616b632.webp)
二、实现需求的思路?
我们对其中任意一个球做操作时,另外一个球也跟随联动,双球实时同步,无论是放大,缩小,横滚,俯仰等
此时我们就想着有没有一个api能够监听到camera的变化呢
查阅文档,发现有camera.changed.addEventListener()可以监听到,那么我们只要在监听到变化的时候,拿到该球体camera的角度等参数,再设置到另外一个球体上就可以了
三、代码实现
1.封装联动函数:
/**
* @param {Cesium.Viewer} viewer1 Cesium的Viewer
* @param {Cesium.Viewer} viewer2 Cesium的Viewer
*/
function setManyView(viewer1, viewer2) {
const syncView = () => {
// 获取另一个viewer的相机视角数据
const {
positionWC,
heading,
pitch,
roll,
up,
_direction
} = viewer2.scene.camera;
// 设置视角
viewer1.camera.setView({
destination: positionWC,
orientation: {
heading: heading,
pitch: pitch,
roll: roll,
up: up,
direction: _direction
}
});
};
//camera监听函数
viewer2.camera.changed.addEventListener(syncView);
//设置触发监听函数的时间
viewer2.camera.percentageChanged = 0.01;
}
2.调用方法
代码如下(示例):
setManyView(leftMap.viewer,rightMap.viewer)
setManyView(rightMap.viewer,leftMap.viewer)
将左右球体同步即可
总结
容易踩坑:setView的时候orientation这个参数里边的5个属性记得设置齐全
之前有在网上搜索过实现的方法,发现并没有非常好的案例,所以特地在此总结,方便广大的cv战士提高工作效率,早日实现需求,早点回家,陪陪家人。
文章出处登录后可见!
已经登录?立即刷新