Skip to content

双屏对比

添加双屏对比

//localhost:8000/wish3dearth/api/scene/v1.0.0/pageList

获取当前用户的场景列表,把要添加的分屏场景数据加到 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.