Hi! how can I get a cartographic or cartesian coordonate on mouse click event.
I want to compute a distance between 2 points but I can’t find a way to convert clientX and clientY from the canvas element to cartographic or cartesian coodinate.
I have used the method pickEllipsoid(new Cesium.Cartesian2(e.clientX, e.clientY)) but it doesn’t give a correct location.
Anyone can tell me the way to achieve this please?
Thanks
Regards
pickEllipsoid is the correct function and it looks like you are using it correctly. Here’s an example that you can compare against your own code.
var viewer = new Cesium.Viewer(‘cesiumContainer’);
viewer.canvas.addEventListener(‘click’, function(e){
var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
alert(longitudeString + ', ’ + latitudeString);
} else {
alert(‘Globe was not picked’);
}
}, false);
Cesium also makes it easy to calculate distance along Earth’s curved surface
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var geodesic = new Cesium.EllipsoidGeodesic();
var cart1 = new Cesium.Cartographic(80,40);
var cart2 = new Cesium.Cartographic(90,50);
geodesic.setEndPoints(cart1, cart2);
console.log(geodesic.surfaceDistance);
``
Hi everyone, when I obtain the correct coordinates I will test your code Hyper Sonic, thanks to you.
Matthew,
I am still looking for how to get the coordinates after a mouse click but even your code doesn’t work. Here is a screenshot of mine, where the red stars are where I clicked and the blue box are where my entities are drawn.
This is what I did with your code:
viewer.scene.canvas.addEventListener(‘click’, function(e) {
if (distance) {
console.log(e.clientX, e.clientY);
var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
viewer.entities.add({
id: nombre.toFixed(2),
position: cartesian,
box: {
dimensions: new Cesium.Cartesian3(5, 5, 0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(viewer.entities.getById(nombre.toFixed(2)));
nombre++;
console.log(longitudeString + ', ’ + latitudeString);
} else {
alert(‘Globe was not picked’);
}
}
So why I can’t have the right position?
Thanks,
Regards
I have noticed that more I zoom in one position, more I tend to have the right position. So how can I solve this issue?
I also noticed that on adding a mousmove event, the coordinate on click event and mousemove event are the same, so I conclude that the problem is not the pickEllipsoid function.
Does it have any relation about the height value of the cartographic object?
Are you using terrain? Because if so that’s your problem. pickEllipsoid doesn’t pick terrain, it picks the WGS84 ellipsoid.
No I don’t. and I also have tried to use getPickRay function but the outcome is the same.
I took a look to the picking example in sandcastle and I seen that the label (containing the coordinates) was at the same position than the mouse cursor.
but when I implemented this example in local, this label was wether below or above the mouse cursor.
I don’t understand how this could happen?
How would one capture the present camera position?
Thanks,
You can get camera position with viewer.scene.camera.position.
On your example how is distance obtained? Do you have a full working SandCastle example by chance (working, but wrong results that is.) It would be useful to know the full 3D coordinates of the red and blue dots to know if they are under or to the side or eachother as you can’t glean that from just one viewpoint.
We are trying to move a “Tour Builder” from the Google Earth Plugin. The users are not-for-profit s and often not very technical. What they have been doing to create their tours is working with a fairly simple minded form, put a URL here and put a lon/lat there. What I was hoping for was some sort of camera.getView() corresponding to camera.setView(… The values they see would somehow get to a “tour document” which would then be used by setView to get visitors to where the user wants them to go.
In terms of an example a very early first draft of where we hope the visitors will see is http://vcities.ite-stl.org/Cesium/Cesiumvisitor2.html
Thanks for your quick response.
Sorry I wasn’t being observant, the example question was in regards to Valimo, for some reason I thought Valimo asked.
You can create a get view function, such as this SandCastle app
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var camera=viewer.scene.camera;
Sandcastle.addToolbarButton(‘get view’, function() {
var string = “Pos “+camera.position;
string+=”\nHeading “+camera.heading/Math.PI180;
string+="\nPitch "+camera.pitch/Math.PI180;
string+=”\nRoll “+camera.roll/Math.PI*180;
string+=”\n”;
if(0){console.log(string);}
else{alert(string);}
});
``
The /Math.PI*180 converts from radians to degrees.
I remember seeing an earlier demo where the basements were under the terrain at 111 meters, but for some reason they are a bit high at 118.5 meters above ellipsoid which places the basements above the terrain. Or is this a different lon/lat? Also that city block seems to be at a tilt so each building would use a slightly different height.
http://vcities.ite-stl.org/Cesium/Apps/Sandcastle/gallery/Cesiumtest1.php
Sorry, my bad, I thought the issue might be relevant to Thread but I should have been more careful.
About your replay, it seems to be exactly what I was looking for. Thank you!
Regarding the demo, this issue has been giving us fits. We know how to handle individual buildings one by one, the problem is how to handle the many years supply we have in hand. For example, The Old Cathedral, in this demo, appeared almost perfectly the first time out. The one issue is that the cross’s background is not transparent.
I probably should have pointed to
http://vcities.ite-stl.org/Cesium/Blocksm.html
I used a “get” for diagnostic reasons. Go to Old North, the view should be backed off a bit. It takes a while to load but as you move through the years, you see lots of buildings, some at correct positions with respect to the ground, most, not so good. Anyway, this is our problem.
To keep this thread on topic I made a reply at this other thread https://groups.google.com/d/msg/cesium-dev/imIpoZHvKrM/1MqbNII7Hj4J
Hi everyone,
Before computing the distance, my goal is to draw a polygon on the screen representing the click position.
The fact is, I get a correct coordinate with the function pickEllipsoid but the drawn polygon is not in correct location.
In my screeshot the red star represents the click position and the blue square is my drawn polygon.
and when I have looked for picking sandcastle example, I adapted the code to mine in local to check I did some mistake and
I noticed that the text label did not appear in the same position with the mouse cursor.
Regards
this code below is fully working in sandcastle in local. and has the same output than the sandcastle online but when I implement it in my project, I get the problem we discussed earlier.
var nombre = 0;
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: ‘init’,
position: Cesium.Cartesian3.fromDegrees(47.49, -18.87, 0.0),
box: {
dimensions: new Cesium.Cartesian3(5, 5, 0),
material: Cesium.Color.BLUE
}
});
viewer.flyTo(viewer.entities.getById(‘init’));
viewer.entities.add({
id: ‘alo’,
label: {
show: false
}
});
viewer.scene.canvas.addEventListener(‘mousemove’, function (e) {
var entity = viewer.entities.getById(‘alo’);
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;
}
});
//click
viewer.scene.canvas.addEventListener(‘click’, function(e) {
var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(mousePosition, 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);
viewer.entities.add({
id: nombre.toFixed(2),
position: cartesian,
box: {
dimensions: new Cesium.Cartesian3(5, 5, 0),
material: Cesium.Color.BLUE
}
});
var ee = viewer.entities.getById(nombre.toFixed(2));
nombre++;
console.log(longitudeString + ', ’ + latitudeString);
var date = new Date();
var cart = ee.position.getValue(Cesium.JulianDate.fromDate(date));
var carto = ellipsoid.cartesianToCartographic(cart);
console.log('position: ’ + Cesium.Math.toDegrees(carto.longitude).toFixed(10) + ‘,’ + Cesium.Math.toDegrees(carto.latitude).toFixed(10));
} else {
alert(‘Globe was not picked’);
}
}, false);
When placing that code into the Cesium/Apps/HelloWorld.html (non SandCastle) there are no problems either. I’d guess it has something to do with the other code in your project.
No there are no problems in the Apps/helloworld.html.
thanks all of you guys. I have to run my project step by step now to identify where is the problem.
Hi guys. can you take a look on this post. https://groups.google.com/forum/#!topic/cesium-dev/j1_peH0_XJo
I have created a new one because this last post has solved my problem on getting cartograhic coordinate and measure distance
and the new one is about the outcome appearing in my screen.
Regards
How can I pick cartasin3 in terrain mode by clicking on the map?
what is the replacement for pickEllipsoid in terrain mode?