セシウムで左または右に回転する方法ビュー境界に基づくマップ

Question

Google Earthのナビゲーションと同様に、セシウムのアプリの左右の矢印キーを模倣します。右または左の矢印キーを押すと、地球の周りをビューの境界の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アプリを訪問し、上記の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 
    }); 

ここ固定角度は、中心ビューポイントに追加されるが、角度が最大とビュー・エクステント内の最小経度値の差の割合である必要があります。例えばangle =（maxLon - minLon）/ 20

Answer 1

あなたは幸運です。 Camera.computeViewRectangleの非常に要求された機能は、セシウム1.19に追加されたばかりで、この執筆時点で約1週間前にリリースされました。ここでそれは活動中です。

ブラウザは、一般に、キー押しイベントを受け取る埋め込みドキュメントには不満があるので、これはスタックスニペットとしてはうまく機能しません。矢印キーのイベントを受け取ることができる虫眼鏡のジオコーダ検索ボックス（テキスト入力フィールドを取得する）をクリックしてから、このデモを実行する必要があります。スタックオーバーフローの外側では、キー押しを受け取る方が簡単です。

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>