cesium 分屏对比 多窗同步

不说废话, 代码

		// 视图同步
		this.leftViewer.eventManager.addCameraMoveListener(e => {
			if (this.isLeft() && this.synchronous) {
				const viewPoint = this.leftViewer.getViewPoint()
				this.rightViewer.baseViewer.camera.setView({
					destination: viewPoint.position,
					orientation: viewPoint.orientation
				})
			}
		})

		this.rightViewer.eventManager.addCameraMoveListener(e => {
			if (!this.isLeft() && this.synchronous) {
				const viewPoint = this.rightViewer.getViewPoint()
				this.leftViewer.baseViewer.camera.setView({
					destination: viewPoint.position,
					orientation: viewPoint.orientation
				})
			}
		})

获取相机位置

	/**
	 * 获取相机位置及旋转角度
	 * @return {{orientation: {heading: number, roll: number, pitch: number}, position: Cesium.Cartesian3}}
	 */
	getViewPoint() {
		return {
			position: this.baseViewer.camera.position.clone(),
			orientation: {
				heading: this.baseViewer.camera.heading,
				pitch: this.baseViewer.camera.pitch,
				roll: this.baseViewer.camera.roll
			}
		}
	}

监听move, 看鼠标在哪边

		// 记忆是哪一边在操作
		this.leftViewer.eventManager.addEventListener(EventConstant.MOUSE_MOVE, e => {
			this.currentOperation = ManyWindowViewer.LEFT_VIEWER
		})

		this.rightViewer.eventManager.addEventListener(EventConstant.MOUSE_MOVE, e => {
			this.currentOperation = ManyWindowViewer.RIGHT_VIEWER
		})


	/**
	 * 是否操纵左边
	 * @return {boolean}
	 */
	isLeft() {
		return this.currentOperation === ManyWindowViewer.LEFT_VIEWER
	}
要实现Vue2中的cesium分屏联动效果,可以按照以下步骤进行: 1. 在Vue组件中引入Cesium库并创建Cesium Viewer实例。 ``` import Cesium from 'cesium/Cesium'; import 'cesium/Widgets/widgets.css'; export default { data () { return { viewer1: null, // 第一个Viewer实例 viewer2: null // 第二个Viewer实例 } }, mounted () { // 创建第一个Viewer实例 this.viewer1 = new Cesium.Viewer('cesiumContainer1'); // 创建第二个Viewer实例 this.viewer2 = new Cesium.Viewer('cesiumContainer2'); } } ``` 2. 在组件中创建两个div容器,分别用于显示两个Viewer实例的地图。 ``` <template> <div> <div id="cesiumContainer1"></div> <div id="cesiumContainer2"></div> </div> </template> ``` 3. 在组件的生命周期钩子函数中,监听两个Viewer实例的视图变化事件,实现分屏联动的效果。 ``` mounted () { // 创建第一个Viewer实例 this.viewer1 = new Cesium.Viewer('cesiumContainer1'); // 创建第二个Viewer实例 this.viewer2 = new Cesium.Viewer('cesiumContainer2'); // 监听第一个Viewer实例的视图变化事件 this.viewer1.camera.moveEnd.addEventListener(() => { // 获取第一个Viewer实例的相机位置 const position1 = this.viewer1.camera.position; // 将第二个Viewer实例的相机位置设置为第一个Viewer实例的相机位置 this.viewer2.camera.flyTo({ destination: position1 }); }); // 监听第二个Viewer实例的视图变化事件 this.viewer2.camera.moveEnd.addEventListener(() => { // 获取第二个Viewer实例的相机位置 const position2 = this.viewer2.camera.position; // 将第一个Viewer实例的相机位置设置为第二个Viewer实例的相机位置 this.viewer1.camera.flyTo({ destination: position2 }); }); } ``` 通过以上步骤,就可以在Vue2中实现cesium分屏联动效果了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值