CODEWITHSUNDEEP
google-mapskmlgoogle-earth-plugincesiumjs
Ben Scheib
Ben Scheib

Reputation: 392

Cesium JS flying to camera.lookAt (Migrating from Google Earth Plugin API lookAt)

Needing some help migrating my flying functionality from the Google Earth plugin to Cesium. Basically in ge I create a lookAt and called setAbstractView like below

var ge = google.earth.createInstance('map3d')
var lookAt = TVV.mapObject.createLookAt('');
lookAt.set(
    21.2765107698755,
    -157.825362273258,
    0,
    ge.ALTITUDE_RELATIVE_TO_GROUND,
    20.1690873648706,
    74.9605580474674,
    764.534479411941
);
ge.getView().setAbstractView(lookAt);

That was my code for google earth plugin. In cesium following the migration guides I do:

// fly to code that works with cesium (but a little bit off)
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-157.825362273258, 21.2765107698755, 764.534479411941),
    orientation : {
        heading : Cesium.Math.toRadians(20.1690873648706),
        pitch : Cesium.Math.toRadians(74.9605580474674 - 90.0),
        roll: 0
    }
})

That code goes to almost the right place. I have to drag it down over to the right to see my placemark that I previously set (so the view is not exactly what it was in Google earth).

So I tried this code I also found.

// code that works with cesium
var center = Cesium.Cartesian3.fromDegrees(-157.825362273258, 21.2765107698755);
var heading = Cesium.Math.toRadians(20.1690873648706);
var pitch = Cesium.Math.toRadians(74.9605580474674);
var range = 764.534479411941;
viwer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

That code looks MUCH closer to the previous google earth plugin view. However, of course, it does not fly the camera to the view. It only sets the view right away.

My question is, how can I fly the camera to the lookAt view in cesium, taking advantage of my lat, lng, heading, pitch, and range values?

Here are the relevant API docs from GE and Cesium should you find them useful.

GE createLookAt https://developers.google.com/earth/documentation/reference/interface_g_e_plugin.html#a82f1b3618531a6bfab793b04c76a43e7

GE Camera Control (search for "Panning to an absolute location") https://developers.google.com/earth/documentation/camera_control

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

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

I also found this but was unsure about how to integrate it. If anybody could provide a codepen/jsfiddle or something of the like that would be greatly appreciated! https://groups.google.com/forum/#!topic/cesium-dev/r5rddMUeS80

Upvotes: 1

Views: 1681

Answers (1)

Ben Scheib
Ben Scheib

Reputation: 392

Thanks to Hannah Pinkos from the Cesium Forum for the answer.

After creating an entity and using values for heading, pitch(tilt), and range from the google earth plugin, you can fly to the entity with an offset...

var heading = Cesium.Math.toRadians(20.1690873648706g);
var pitch = Cesium.Math.toRadians(74.9605580474674 - 90);
var range = 764.534479411941;

TVV.mapObject.flyTo(entity, {
 offset: new Cesium.HeadingPitchRange(heading, pitch, range)
});

Upvotes: 3

Related Questions