flyTo zoom level

CesiumJS
1

We're currently zooming in onto our subject on the globe using the flyTo(id) command, where it finds the "id" in our kml to determine what to zoom in on. But the problem is that it zooms too close for what we need. How do we control the zoom level?

The issue is our object (id) is moving on a timeline, so it needs to follow him after the zoom. We tried creating a rectangle around the point we want to zoom in to control it, but it doesn't follow the object after.

Other quick question...is there a way to stop the timeline from automatically looping when it reaches the end?

Any help would be greatly appreciated.

2

Hello,

Yes, you can use the offset option to Viewer.flyTo

Offset takes a HeadingPitchRange that describes the distance and direction at which the camera should end it’s flight.

Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var blueBox = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.BLUE
}
});

viewer.flyTo(viewer.entities, {
offset: new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 3000000)
});

``

Best,

Hannah

3

Hi Hannah,

Thanks for the code! It seems to work, but then snaps back zoomed in to the entity object. Any ideas? Here's my code.

  viewer.flyTo(boat).then(function(){
      viewer.trackedEntity = boat;
      viewer.selectedEntity = viewer.trackedEntity;
      viewer.clock.multiplier = 0;
      viewer.clock.shouldAnimate = true;
  });

4

Sorry, here's the code with what you suggested:

        viewer.flyTo(rider, {
            offset: new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 3000000)
            }).then(function(){
            viewer.trackedEntity = rider;
            viewer.selectedEntity = viewer.trackedEntity;
            viewer.clock.multiplier = 0;
            viewer.clock.shouldAnimate = true;
        });

5

Ah okay. For a tracked entity, you need to so something a little different. You’ll need to set the viewFrom property for each entity you will be tracking.
viewFrom is a Cartesian3 value that represents the east-north-up reference frame from which to view the entity. (ie z is the distance above the entity, x is the distance away on the east axis, y is the distance away north axis)

I’m sure there’s a way to convert between heading pitch range to east-north-up but I don’t know it off the top of my head. It’s on our to-do list to make this a little more straight forward.
Here’s my updated code sample:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var blueBox = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.BLUE
},
viewFrom: new Cesium.Cartesian3(0, -2200000, 2200000)
});

viewer.flyTo(viewer.entities, {
offset: new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 3000000)
}).then(function(){
viewer.trackedEntity = blueBox;
});

``

Best,

Hannah