Skip to content

双屏对比

添加双屏对比

提示

oSubSceneData 是场景临时提交构件数据,splitscreen 是分屏数据,screens 是分屏场景数据

JavaScript
oSubSceneData.splitscreen = {
	// 场景id
	"sceneId": "4a8cbec3413417e58f227060e464c7c5",
	// 分屏场景数据
	"screens": [{
		"title": "333",
		// 主场景id
		"mainSceneId": "03aee685be8a4c989f90adce64575419",
		// 对比场景id
		"contrastSceneId": "8c1ff82a678a4111b6488b66d9f44fe8",
		// 对比场景标题
		"contrastSceneTitle": "333",
		// 对比场景封面
		"contrastSceneCoverImg": "image/9b99d3c1-5461-490f-9968-9e1e29082e32.jpg",
		// 对比场景描述
		"contrastSceneDescription": "",
		// 是否从初始列表中添加
		"isFromInitList": true
	}]
}

获取可以进行双屏对比的场景列表,获取场景列表

获取当前用户的场景列表,把要添加的分屏场景数据加到 oSubSceneData.splitscreen.screens 中,如下代码:

JavaScript
oSubSceneData.splitscreen.screens.push(item);//item是场景的数据对象

双屏删除

JavaScript
oSubSceneData.splitscreen.screens.splice(0,1);//删除第一个副场景

双屏对比联动

双屏对比的原理:是同一个页面用两个相同的 iframe 分别加载一个预览的场景;只要在其中一个 iframe 页面中操作,对应的 camera 信息同步到另外一个 iframe 页面。

JavaScript
//在一个iframe中获取到另一个iframe的document对象
var otherIframe = parent.document.getElementById("另一个iframe的唯一标识 id").contentWindow
//camera.position,camera.direction,camera.up
//当前iframe中球的相机位置
otherIframe.jumpToViewPoint(camera.position, camera.direction, camera.up);
//为了让两个球的相机位置相同,移动一个iframe中球的相机位置时,让另一个球的相机位置同步飞到当前iframe中球的相同的相机位置即可
function jumpToViewPoint(position, direction, up) {
    viewer.camera.flyTo({
        destination: new LSGlobe.Cartesian3(position.x, position.y, position.z),
        orientation: {
            direction: new LSGlobe.Cartesian3(direction.x, direction.y, direction.z),
            up: new LSGlobe.Cartesian3(up.x, up.y, up.z)
        },
        duration: 0
    });
}
//上面的操作需要放到鼠标滑动事件中
var handler = new LSGlobe.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
    //在此处执行双屏对比的联动事件
},
LSGlobe.ScreenSpaceEventType.WHEEL);
handler.setInputAction(function(movement) {
    //在此处执行双屏对比的联动事件
},
LSGlobe.ScreenSpaceEventType.MOUSE_MOVE);

双屏保存

随场景保存接口一并保存

Released under the MIT License.