Want to mimic the left-right arrow keys in CesiumJS app similar to Google Earth navigation.
Press right or left arrow keys should rotate the globe ~10% of the view bounds to the right or left, respectively.
If zoomed out then it rotates a large extent and zoomed in rotates a smaller extent.
Already looked at the documentation for Viewer, Camera, Scene, etc. but it’s not obvious how to do this.
Able to rotate a fixed amount right or left but want to rotate amount based on the width in the view extent.
How do you get the max extent top, left, right, bottom for the view in cesium?
Here’s the snippet of JavaScript used for testing key bindings and rotation:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
navigationHelpButton: false, animation: false, timeline: false
});
var camera = viewer.camera;
document.addEventListener(‘keydown’, function(e) {
setKey(e);
}, false);
function setKey(event) {
if (event.keyCode == 39) { // right arrow
// TODO access min and max lon for the view then set rotation = (maxlon - minlon) / 20
camera.rotateRight(Cesium.Math.toRadians(10.0));
/*
// alternative approach
var positionCartographic = camera.positionCartographic;
var height = positionCartographic.height;
var lat = positionCartographic.latitude;
var lon = positionCartographic.longitude + Cesium.Math.toRadians(10.0);
camera.flyTo({
destination: Cesium.Cartesian3.fromRadians(lon, lat, height),
duration: 1.0
});
*/
} else if (event.keyCode == 37) { // left arrow
camera.rotateLeft(Cesium.Math.toRadians(10.0));
}
}
Anybody already do this?