rotation - 如何基于 View 范围在Cesium Map中向左或向右旋转

想要模仿CesiumJS应用中的向左和向右箭头键，类似于Google Earth导航。按向右或向左箭头键，应将地球分别向右或向左旋转5％的 View 范围。如果缩小，则旋转范围较大，而放大则旋转范围较小。

已经查看了Viewer，Camera，Scene等文档，但是如何做应该很简单的事情还不是很明显。

可以向右或向左旋转固定量，但要根据 View 范围中的宽度旋转量。如何获得铯 View 中最大范围的顶部，左侧，右侧，底部？

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));
 }
}

要进行测试，请访问SandCastle应用并粘贴到上面的javascript代码段中。要激活键盘绑定(bind)，请单击全屏模式，然后箭头键将起作用。

或者，可以使用摄影机访问positionCartographic，但这仅是摄影机的制图位置，而不是 View 范围。

  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
  });

在这里，将固定角度添加到中心视点，但是该角度必须是视范围中最大和最小经度值之差的百分比；例如角度=(maxLon-minLon)/20

最佳答案

你真幸运。强烈要求使用Camera.computeViewRectangle的功能是在Cesium 1.19中添加的，Cesium 1.19在撰写本文时大约在一周前发布。它在起作用。

请注意，浏览器通常对接收按键事件的嵌入式文档不满意，因此这不能像Stack Snippet那样很好地工作。您必须单击可接收箭头键事件的放大镜地理编码器搜索框(以获取文本输入字段)，然后此演示才能正常工作。在堆栈溢出之外，您可能会发现更容易接收按键。

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) {
    var horizontalDegrees = 10.0;
    var verticalDegrees = 10.0;
    var viewRect = camera.computeViewRectangle();
    if (Cesium.defined(viewRect)) {
        horizontalDegrees *= Cesium.Math.toDegrees(viewRect.east - viewRect.west) / 360.0;
        verticalDegrees *= Cesium.Math.toDegrees(viewRect.north - viewRect.south) / 180.0;
    }

    if (event.keyCode === 39) {  // right arrow
        camera.rotateRight(Cesium.Math.toRadians(horizontalDegrees));
    } else if (event.keyCode === 37) {  // left arrow
        camera.rotateLeft(Cesium.Math.toRadians(horizontalDegrees));
    } else if (event.keyCode === 38) {  // up arrow
        camera.rotateUp(Cesium.Math.toRadians(verticalDegrees));
    } else if (event.keyCode === 40) {  // down arrow
        camera.rotateDown(Cesium.Math.toRadians(verticalDegrees));
    }
}

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>