Hi,
I have a globe with spikes and labels that represent data with longitude and latitude. When I click on either the label or the spike, I would like the globe to shrink in size a little bit, rotate to the clicked spike/label so it is centred in the globe ad move the globe to the top left hand corner so I can show a big dialog with data on relating to the event mapped by the spike. It would be nice if it worked like the 'Home' button in terms of animation and smoothness. I sort of got it to work but had to do it in two stages. Rotate to centre and then move to top/left. (rought gestimate for the moment) I am sure there is a nicer way and a way it can work in one smooth motion. The clicked object has a data object I have added which contains the longitude and the latitude, hence the primitive.data.lng, primitive.data.lat. Code so far is.
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var primitive;
var pickedObject = viewer.scene.pick(movement.position);
if (pickedObject) {
primitive = pickedObject.id;
var cartographic = new Cesium.Cartographic();
var cartesian = new Cesium.Cartesian3();
var camera = viewer.scene.camera;
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
ellipsoid.cartesianToCartographic(camera.positionWC, cartographic);
var controller = viewer.scene.screenSpaceCameraController;
controller.enableInputs = false;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(primitive.data.lng, primitive.data.lat, cartographic.height),
duration: 0.6,
complete: function () {
viewer.scene.tweens.add({
duration: 0.9,
easingFunction: Cesium.EasingFunction.QUADRACTIC_OUT,
update: function (value) {
if (viewer.scene.isDestroyed()) {
return;
}
viewer.camera.moveRight(300000);
viewer.camera.moveDown(100000);
},
complete: function () {
controller.enableInputs = true;
},
cancel: function () {
controller.enableInputs = true;
}
});
}
});
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
Cheers!