entity flyTo?

CesiumJS
1

Is there a simple way to have the functionality of Camera.flyTo(…) but for an entity? I want an entity to interpolate to a new location, and the only way I can figure out how to do that is to use a SampledPositionProperty … however, that appears to have some hairy edge cases (like since I need to give it two samples to interpolate between, I need to give it a starting position … which I get with entity.position.getValue( now ) … however, after an interpolation completes, if I want to start a new one, the entity.position.getValue( now ) returns undefined because the time is now outside the bounds of the samples for that previous SampledPositionProperty.

Thanks for the help!

2

Hello,

Take a look at the Viewer.flyTo function. You can use an Entity, EntityCollection or DataSource as the target.

We use this function to focus on entities in many of our sandcastle demos, like this one: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Cylinders%20and%20Cones.html&label=Geometries

Best,

Hannah

3

Thanks for the reply, Hannah. I think that my original question was a little unclear … it’s not the camera that I want to move, it’s the entity itself. I would like to interpolate its position from one location to another over a period of time.

4

Oh, gotcha.

Have you seen the interpolation demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Interpolation.html&label=Showcases

I think that’ll accomplish what you’re looking to do.

Best,

Hannah

5

Yes, that example uses the SampledPositionProperty that I mentioned in my original post, which comes with all the hairy edge conditions I mentioned. It turned out that implementing my own interpolation from scratch was an easier solution than dealing with those edge conditions. :o(

It looks like there isn’t anything like flyTo for entities, which is a shame.

6

Oh gosh, sorry for not reading thoroughly ><
Yeah, I don’t think we have something like that that’s really easy to do. You would have to use a CallbackProperty for the position and write your own interpolation in the callback function.

Here’s an example of using an EllipsoidGeodesic to interpolate the pin’s position across the globe:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {timeline : false, animation : false});

var start = Cesium.Cartographic.fromDegrees(-100, 39);
var end = Cesium.Cartographic.fromDegrees(-75, 20);
var geodesic = new Cesium.EllipsoidGeodesic(start, end);
var position = new Cesium.Cartographic();
var ellapsed = 0;
var time = 3;
var callback = function(){
position = geodesic.interpolateUsingFraction(ellapsed/time, position);
ellapsed += 1/60;
ellapsed = Math.min(ellapsed, 1);
return Cesium.Cartesian3.fromRadians(position.longitude, position.latitude);
};
var pinBuilder = new Cesium.PinBuilder();

var bluePin = viewer.entities.add({
position : new Cesium.CallbackProperty(callback, false),
billboard : {
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});

``

Sorry there’s not a better way to do this currently.

Best,

Hannah

7

Thanks for the example!