Как повернуть влево или вправо в Цезие Карта на основе границ обзора

Question

Хотите подражать клавишам со стрелкой влево вправо в приложении CesiumJS, похожем на навигацию Google Планета Земля. Нажимайте клавиши со стрелками вправо или влево, чтобы вращать земной шар примерно на 5% от границы обзора справа или слева соответственно. Если он уменьшен, то он вращается в большой степени, а увеличенное изображение вращается в меньшей степени.

Уже просмотрел документацию для Viewer, Camera, Сцена и т. Д., Но не очевидно, как сделать что-то, что должно быть простым.

Возможность поворота фиксированного количества вправо или влево, но вы хотите повернуть количество в зависимости от ширины в разрезе. Как получить максимальную степень сверху, слева, справа, снизу для представления в цезие?

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 выше. Чтобы активировать привязки клавиатуры, нажмите полноэкранный режим, и клавиши со стрелками будут работать.

В качестве альтернативы, камера может использоваться для доступа к позиции Картография, но это только картографическое положение камеры, а не границы обзора.

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

Здесь фиксированный угол добавляется к точке зрения центра, но угол должен быть процент от разницы между максимальным и минимальным значениями долготы с точки зрения степени; например angle = (maxLon - minLon)/20

Answer 1

Вам повезло. Очень запрошенная функция для Camera.computeViewRectangle была просто добавлена ​​в Cesium 1.19, выпущена около недели назад на момент написания этой статьи. Здесь он находится в действии.

Обратите внимание, что браузеру обычно не удобно со встроенными документами, принимающими события нажатия клавиш, поэтому это не слишком хорошо работает, как фрагмент стека. Вы должны щелкнуть окно поиска геокодирования увеличительного стекла (чтобы получить поле ввода текста), которое может принимать события со стрелкой, а затем эта демонстрация будет работать. Вне переполнения стека вам может быть легче получить нажатия клавиш.

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>