So drehen Sie links oder rechts in Caesium Karte basierend auf Ansicht Grenzen

Question

Möchten Sie die Links-Rechts-Pfeiltasten in CäsiumJS-App ähnlich wie Google Earth Navigation nachzuahmen. Drücken Sie die rechte oder linke Pfeiltaste, um den Globus um ~ 5% der Ansichtsgrenzen nach rechts bzw. links zu drehen. Wenn es herausgezoomt wird, dreht es sich stark und vergrößert vergrößert sich um ein kleineres Maß.

Bereits in der Dokumentation für Viewer, Camera, Szene, etc., aber es ist nicht offensichtlich, wie etwas zu tun, die einfach sein sollte.

Kann einen festen Betrag nach rechts oder links drehen, aber den Betrag basierend auf der Breite im Ansichtsbereich drehen. Wie erhalten Sie die maximale Ausdehnung oben, links, rechts, unten für die Ansicht in Cäsium?

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

Um zu testen, besuchen SandCastle App und oben in dem JavaScript-Schnipsel einfügen. Um die Tastaturbelegungen zu aktivieren, klicken Sie auf den Vollbildmodus und die Pfeiltasten funktionieren.

Alternativ kann die Kamera verwendet werden, um positionCartographic zugreifen, aber dies ist nur die kartographische Position der Kamera, nicht die Ansicht Grenzen.

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

hier ein fester Winkel ist mit dem Mittelabgriff Betrachtungspunkt hinzugefügt, aber der Winkel muss ein Prozentsatz der Differenz zwischen dem maximalen und minimalen Längenwerten in der Ansicht Ausmaß sein; z.B. angle = (maxLon - minLon)/20

Answer 1

Sie haben Glück. Das viel gefragte Feature für Camera.computeViewRectangle wurde gerade in Cäsium 1.19 hinzugefügt, das vor etwa einer Woche zum Zeitpunkt des Schreibens veröffentlicht wurde. Hier ist es in Aktion.

Beachten Sie, dass Browser mit eingebetteten Dokumenten, die Keypress-Ereignisse empfangen, im Allgemeinen nicht zufrieden sind. Daher funktioniert dies nicht so gut wie ein Stack-Snippet. Sie müssen auf das Vergrößerungsglas-Geocodierer-Suchfeld klicken (um ein Texteingabefeld zu erhalten), das Pfeilschlüsselereignisse empfangen kann, und dann wird diese Demo funktionieren. Außerhalb von Stack Overflow können Sie möglicherweise einfacher Tasten drücken.

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>