想要模仿 CesiumJS 应用程序中的左右箭头键,类似于 Google 地球导航。按向右或向左箭头键应分别向右或向左旋转地球约 5% 的视图边界。如果缩小,则旋转较大范围,而放大则旋转较小范围。
已经查看了文档Viewer https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html, Camera https://cesiumjs.org/Cesium/Build/Documentation/Camera.html、场景等,但如何做一些应该简单的事情并不明显。
能够向右或向左旋转固定量,但希望根据视图范围的宽度来旋转量。如何获得铯视图的顶部、左侧、右侧、底部的最大范围?
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
camera.rotateRight(Cesium.Math.toRadians(10.0));
} else if (event.keyCode == 37) { // left arrow
camera.rotateLeft(Cesium.Math.toRadians(10.0));
}
}
要测试,请访问app 并粘贴上面的 javascript 片段。要激活键盘绑定,请单击全屏模式,然后箭头键将起作用。
或者,相机可用于访问positionCartgraphic,但这只是相机的制图位置,而不是视图边界。
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
});
这里给中心视点添加了一个固定的角度,但是角度需要是视图范围内最大和最小经度值之差的百分比;例如角度 = (最大长度 - 最小长度) / 20