Hi,
We have a requirement to save the current camera state and restore it at a later time. I've been able to get this working in 3D, but not in the flat Earth modes. I've put together a sandcastle demo, below, that shows the issue. Basically, click the save button, move the map and then click the restore button. In 3D, it moves back to the old position, but in the other modes, it does not. Is this a bug, or am I doing something wrong? Any work around suggestions?
HTML:
<style>
@import url(../templates/bucket.css);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<button id='saveBtn'>Save</button><button id='restoreBtn'>Restore</button>
</div>
JS:
var viewer = new Cesium.Viewer('cesiumContainer');
// Save the camera state here:
var cameraModel = {
position: null,
up: null,
direction: null
};
function restore() {
viewer.camera.setView({
destination: cameraModel.position,
orientation: {
direction: cameraModel.direction,
up: cameraModel.up
}
});
console.log('Restored: up=' +cameraModel.up +
' pos=' + cameraModel.position +
' dir=' + cameraModel.direction);
}
// Make the viewModel react to base layer changes.
function save() {
cameraModel.position = viewer.camera.positionWC.clone();
cameraModel.up= viewer.camera.up.clone();
cameraModel.direction = viewer.camera.direction.clone();
console.log('Saved: up=' +cameraModel.up +
' pos=' + cameraModel.position +
' dir=' + cameraModel.direction);
}
document.getElementById('saveBtn').addEventListener('click', save);
document.getElementById('restoreBtn').addEventListener('click', restore);
Thanks,
Rad Pike