FlyTo and map tilting

CesiumJS
1

My issue is when I tilt the map using mouse and then I call the FlyTo to current view screen position, the map will be tilted back up. I don't want this to be happen.
I want to have the same exact view weither I tilt or not.

Attached a sample demo, if you click on the (fly to current view) button without tilting, you will see you'll have the same position on the view (This is what I want always). However, if you tilt the map (middle mouse click) and then click on the (fly to current view) button you will see the map is tilted back up to default view. How can I fix this to my code ? I want to have exact view.

2. A minimal code example.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var clock = viewer.clock;

Sandcastle.addToolbarButton('flyToCurrentView', goToCurrentView);

function goToCurrentView() {
    var currentPosition = getPosition();

  var nextPosition = currentPosition;
    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(+nextPosition.lon, +nextPosition.lat, viewer.camera.positionCartographic.height),
        duration: 0.1
    });
}

function getPosition() {
    var center = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(viewer.canvas.width / 2, viewer.canvas.height / 2), Cesium.Ellipsoid.WGS84);
    var cartographic = scene.globe.ellipsoid.cartesianToCartographic(center);
    var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
    var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
    return {
        lat: lat,
        lon: lon
    };
}

2

You can pass an orientation parameter to the flyTo method to tell it how it should be oriented. So for example, instead of:

viewer.camera.flyTo({

destination : Cesium.Cartesian3.fromDegrees(+nextPosition.lon, +nextPosition.lat, viewer.camera.positionCartographic.height),

duration: 0.1

});

``

You can set the camera’s current orientation:

viewer.camera.flyTo({

orientation : {

heading : viewer.camera.heading,

pitch : viewer.camera.pitch,

roll : viewer.camera.roll

},

destination : Cesium.Cartesian3.fromDegrees(+nextPosition.lon, +nextPosition.lat, viewer.camera.positionCartographic.height),

duration: 0.1

});

``

Sandcastle example.

But now it looks like the issue is that the center of the screen is no longer the center of the view (if you tilt too much, the center gets closer to the horizon). If you want to fix that you could just use the camera’s position:

https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#positionCartographic

Instead of using pick on the ellipsoid.

3

Thanks Omar really helped me.

Just one last question. When using trackedEntity to lock camera at platform, the camera rotate automatically when I change the entity speed, is there a soluation to prevent this auto camera rotate on trackedEntity feature ? I tried to use the entity.viewFrom but still the trackedEntity rotate camera sometimes when the entity speed goes from low to very high or entity heading is changed.

4

I can’t seem to recreate that. I tried with a simple example that makes this entity move 5x faster after 5 seconds in this Sandcastle. The angle of the camera does not change for me.

Any chance you have a Sandcastle or code snippet demonstrating this?