Come ruotare a sinistra oa destra nella mappa del cesio in base ai limiti di visualizzazione

Question

Desidera simulare i tasti freccia sinistra-destra nell'app CesiumJS simile alla navigazione di Google Earth. Premere i tasti freccia destra o sinistra per ruotare il globo ~ 5% dei limiti della vista a destra o sinistra, rispettivamente. Se ingrandito, ruota in larga misura e ingrandito ruota in misura minore.

Già visto la documentazione per Viewer, Camera, Scene, ecc. Ma non è ovvio come fare qualcosa che dovrebbe essere semplice.

In grado di ruotare una quantità fissa destra o sinistra ma si desidera ruotare l'importo in base alla larghezza nell'estensione della vista. Come si ottiene la massima estensione in alto, a sinistra, a destra, in basso per la visualizzazione in cesio?

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

Per provare, visitare SandCastle app e incollare nel frammento javascript sopra. Per attivare i binding della tastiera, fare clic su modalità schermo intero e i tasti freccia funzioneranno.

In alternativa, la telecamera può essere utilizzata per accedere a posizioneCartografica, ma questa è solo la posizione cartografica della telecamera, non i limiti della vista.

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

Qui un angolo fisso viene aggiunto al punto vista centrale, ma l'angolo deve essere una percentuale della differenza tra i valori massimo e minimo di longitudine nella misura in vista; per esempio. angle = (maxLon - minLon)/20

Answer 1

Sei fortunato. La funzionalità tanto richiesta per Camera.computeViewRectangle è stata appena aggiunta in Cesio 1.19, rilasciata circa una settimana fa al momento della stesura di questo documento. Qui è in azione.

Si noti che i browser non sono generalmente a proprio agio con i documenti incorporati che ricevono eventi di pressione tasti, quindi questo non funziona bene come frammento di frammento. È necessario fare clic sulla casella di ricerca del geocoder della lente di ingrandimento (per ottenere un campo di immissione del testo), che può ricevere eventi con i tasti freccia, e quindi questa demo funzionerà. Al di fuori di Stack Overflow, potrebbe risultare più semplice ricevere i tasti premuti.

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>