Converting Cartesian3 position to screen position and then back

CesiumJS
1

I have a separate function that takes a world position, modifies it slightly according to the screen and then changes it back into its respective world position.

This is my current implementation, currently I’m not making any changes to the position just converting to a canvas position and then back into a world position:

const labelPosition = scene.camera.pickEllipsoid(scene.cartesianToCanvasCoordinates(parentPos), scene.globe.ellipsoid);

I have two entities one that is taking that parentPos directly and another which is taking labelPosition. In theory they should line up, however this is currently what I’m seeing:

image
image1384×389 50.4 KB

The positions are not lining up, should I be using a different method for converting to canvas coordinates?

2

Hi there,

Can you explain a bit why you need this function? There may be another way to approach the problem.

Thanks,
Gabby

3

Hi Gabby,
Thanks for your reply.
We’re trying to implement a form of automatic label placement onto our map.

A solution we’ve arrived at involves using HTML elements placed on top of the canvas, positioned relative to the widget’s entities where we then use an algorithm to move them into a “free-space” to minimize their overlap where possible - this algorithm provides us with a position relative to the Cesium canvas.

This works for the time being, I wanted to see if it was possible to take the calculated canvas position and turn that back into a Cartesian3, which I could use to position label entities within the map, so that we could look into drawing lines connecting the entities to the labels.

Hope that helps!