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

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

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

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

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

В качестве альтернативы камеру можно использовать для доступа к 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
person JasonM1    schedule 11.02.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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

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

person emackey    schedule 08.03.2016