How to get cartographic/cartesian3 coordinates on mouse click

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.PI
180;
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?

I think pickPosition will give you that if you click on the terrain:

https://cesiumjs.org/Cesium/Build/Documentation/Scene.html?classFilter=scene#pickPosition

It does not help.
I am trying to put marker with right click and get his location in terrain mode.

When I am zooming the map closer to the ground and right click for getting the location, the marker doesn’t put where I clicked, it put the marker very far from where I clicked.
what I am missing?

this is my code:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.scene.canvas.addEventListener(‘contextmenu’, (event) => {

event.preventDefault();

const mousePosition = new Cesium.Cartesian2(event.clientX, event.clientY);

const selectedLocation = convertScreenPixelToLocation(mousePosition );

setMarkerInPos(selectedLocation);

}, false);

function convertScreenPixelToLocation(mousePosition) {

const ellipsoid = viewer.scene.globe.ellipsoid;

const cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);

if (cartesian) {

const cartographic = ellipsoid.cartesianToCartographic(cartesian);

const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(15);

const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(15);

return {lat: Number(latitudeString),lng: Number(longitudeString)};

} else {

return null;

}

}

function setMarkerInPos(position){

viewer.pickTranslucentDepth = true;

const locationMarker = viewer.entities.add({

name : ‘location’,

position : Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 300),

point : {

pixelSize : 5,

color : Cesium.Color.RED,

outlineColor : Cesium.Color.WHITE,

outlineWidth : 2

},

label : {

text : ‘check’,

font : ‘14pt monospace’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth : 2,

verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

pixelOffset : new Cesium.Cartesian2(0, -9)

}

});

}

‫בתאריך יום ב׳, 11 בפבר׳ 2019 ב-14:41 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬

viewer.scene.pickPosition is working for me when terrain is on. I’ve modified your example to use it and turn terrain on.

The only other thing I had to change was to set a height reference to be relative to ground:

Sandcastle link.

Working very well, thank you.
there is some viewpoint of the camera that the label of the point suffers from concealment. (as shown in the picture below)
What can I do to handle this problem?
cesiumForSHow.PNG

‫בתאריך יום ג׳, 12 בפבר׳ 2019 ב-18:35 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬

That’s a good question! This is happening because the terrain geometry is clipping with the label. One way to fix this is to disable depth test on the label:

disableDepthTestDistance : Number.POSITIVE_INFINITY,

``

The clamp to terrain Sandcastle has an example of this:

So the label is always drawn in front of terrain at any view.

working perfectly!
thank you very much

‫בתאריך יום ד׳, 13 בפבר׳ 2019 ב-17:44 מאת ‪Omar Shehata‬‏ <‪omar.sameh.shehata@gmail.com‬‏>:‬

i’ve tried the sandcastle example that omar mentioned above but turns out it doesn’t show the coordinate label, is there any correction to the code from the sandcastle?

1 Like

@Ahyar

Thank you for posting an update - which demo are you looking at?

-Sam