双屏对比
添加双屏对比
提示
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);
双屏保存
随场景保存接口一并保存