如何根据视图边界在 Cesium Map 中向左或向右旋转答案

【问题标题】：How to rotate left or right in Cesium Map based on view bounds如何根据视图边界在 Cesium Map 中向左或向右旋转
【发布时间】：2016-02-11 00:48:32
【问题描述】：

想模仿 CesiumJS 应用程序中的左右箭头键，类似于 Google 地球导航。按向右或向左箭头键应将地球仪分别向右或向左旋转约 5% 的视图边界。如果缩小则旋转较大范围，放大则旋转较小范围。

已经查看了Viewer、Camera、Scene 等的文档，但不清楚如何做应该简单的事情。

能够向右或向左旋转固定量，但希望根据视图范围内的宽度旋转量。你如何获得铯中视图的最大范围顶部，左侧，右侧，底部？

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 app 并粘贴上面的javascript sn-p。要激活键盘绑定，请单击全屏模式，箭头键将起作用。

或者，可以使用相机来访问 positionCartographic，但这只是相机的制图位置，而不是视图边界。

  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

【问题讨论】：

标签： rotation geospatial cesium

【解决方案1】：

你很幸运。 Camera.computeViewRectangle 的需求很大的功能刚刚添加到 Cesium 1.19 中，大约一周前在撰写本文时发布。它在行动中。

请注意，浏览器通常对接收按键事件的嵌入式文档不满意，因此这与 Stack Snippet 相比效果不太好。您必须单击放大镜地理编码器搜索框（以获取文本输入字段），它可以接收箭头键事件，然后此演示将起作用。在 Stack Overflow 之外，您可能会发现接收按键更容易。

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>

【讨论】：