Hi everyone,
On handling mousemove event, I can get the geographic coordinates from camera.pickEllipsoid function.That is to say, wherever the mouse cursor is on the globe, I get the right geographic coordinates.
My question is how to do the same by handling the wheel event.
Please anyone can help?
Thanks, regards
There shouldn’t really be much difference between the two. Can you share some sample code for what you have so far?
I have tried to use camera.positionCartographic but it seems to take the center of the screen. this is the code:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
timeline: true,
animation: false,
homeButton: false,
screenModePicker: false,
navigationHelpButton: false,
baseLayerPicker: false,
geocoder: false,
sceneMode: Cesium.SceneMode.SCENE3D
}
);
viewer.entities.add({
id: 'mousemoveLabel',
label: {
show: false
}
});
viewer.entities.add({
id: 'wheelLabel',
label: {
show:false
}
});
viewer.scene.canvas.addEventListener('mousemove', function (e) {
var entity = viewer.entities.getById('mousemoveLabel');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
} else {
entity.label.show = false;
}
});
viewer.scene.canvas.addEventListener('wheel', function (e) {
var entity = viewer.entities.getById('wheelLabel');
entity.position = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(viewer.camera.positionCartographic.longitude), Cesium.Math.toDegrees(viewer.camera.positionCartographic.latitude));
entity.label.show = true;
entity.label.text = '('+Cesium.Math.toDegrees(viewer.camera.positionCartographic.longitude).toFixed(10) + ' / ' + Cesium.Math.toDegrees(viewer.camera.positionCartographic.latitude).toFixed(10)+')';
});
The issue that I want to solve now is when zooming in/out, I want to update my geographic coordinate where the mouse cursor stands.
Regards.
camera.positionCartographic is the position of the camera, not the position of the mouse. You need to use e.clientX and e.clientY to get the mouse position. In fact, you can use the same exact code in you have in mousemove as the wheel callback.
Here’s your example, updated to work in all cases.
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
timeline: true,
animation: false,
homeButton: false,
screenModePicker: false,
navigationHelpButton: false,
baseLayerPicker: false,
geocoder: false,
sceneMode: Cesium.SceneMode.SCENE3D
}
);
var entity = viewer.entities.add({
id: ‘mousemoveLabel’,
label: {
show: false
}
});
var mouseLabelCb = function (e) {
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.text = ‘(’ + longitudeString + ', ’ + latitudeString + ‘)’;
} else {
entity.label.show = false;
}
};
viewer.scene.canvas.addEventListener(‘mousemove’, mouseLabelCb);
viewer.scene.canvas.addEventListener(‘wheel’, mouseLabelCb);
Thank for your answer Matthew.
I have tested it but I seems it does not behave very well.
Firstly I can’t understand why the labeled text change for every wheel event. When I write in console.log(e.clientX,e.clientY) they hold the last position of mouse cursor.and don’t change anymore until I move the mouse.
Secondly, the changed labeled text does not stand beside the mouse cursor
Add console.log(e.type); to the top of mouseLabelCb function, that’ll tell you what called it. Funny thing is mousemove is regularly called even if the mouse isn’t moving, I’m not sure what’s causing that.
If you only move the mousewheel and not the mouse console.log(e.clientX,e.clientY) should stay the same. e.clientX and e.clientY indicate where the pointer is in the window, not where the pointer is on Earth.
Yes, this behaviour is very strange but at least I can have an approximation of geographic coordinates when zooming.
Anyway, I can’t really imagine how the mousewheel event can compute different cartographic coordinate when the e.clientX and e.clientY stay the same.
Regards
When you mousewheel. e.clientX and e.clientY don’t change. However, unless the pointer is in the very center of the screen, zooming will alter where on Earth the pointer hovers over. If you place if(e.type==“mousemove”){return;} at the top of the function you’ll notice that wheel also passes in X and Y data, and this will filter out those spontaneous mousemoves.
Thanks for your explanation.
so when I am zooming in the center of the screen, the wheel event will alter the event object data internaly, is that what you mean?
If so, how can we have control of this mechanism?
Well with Cesium’s current implementation of zoom you can only zoom to the center of the screen. However even the ‘wheel’ event yields updates to the XY 2D window position of the pointer along with the wheel data. You can do a e.type check and have it behave anyway you wish depending how it was called.
Be careful not to confuse 2D window position of the pointer with Earth position of the pointer.With orthographic projection zoom would not move the Earth position of the pointer, however 3D and Columbus both use a perspective projection, which do.
Ok, thanks it’s very helpful
Regards
HI Guys,
Can you please help me with geographic location?
i need to get lattitude & longitude of an moving object on any path..
Please refer this link ..
In above link, can i get lattitude & longitude of the aircraft at specific interval for eg : say after 5 seconds…???
Please help.. Thank you in advance.. Please suggest fast
Hi there,
You can get the position as a Cartesian3 at any time with:
var cartesianPosition = entity.position.getValue(time);
``
You can convert that to a Cartographic which is the position with latitude, longitude, and height:
var location = Cesium.Cartographic.fromCartesian(cartesianPosition);
``
Thanks,
Gabby
Thanks alot…
If i use this formula to get entity position,
var cartesianPosition = entity.position.getValue(time);
i get the position of starting point of entity… If in case entity moves forward then logically it should new give new coordinates of that entity position… but it gives co-ordinates of position of starting point of entity itself.
Please suggest.
Thank you in advance
Regards,
Make sure you are passing the current simulation time.
viewer.clock.currentTime
``
@Gabby…
Thanks alot…
Its working as expected…
Very much thank you