Camera move X pixels

CesiumJS
1

Hello i would like to Flyto a position - this works fine, the position is in the center of the map
And now i would like to pan the map in such a way that the position, which was in the center now moves to the PIXEL position 500, 50.

I found i can move them camera with moveLeft and so anmount meters, but i dno’t know how i can calc how much meter 500 pixels are?

anybody can help?

2

Hello,

You can convert the pixel coordinate to a coordinate in world space using picking. You can get the globe position using var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(500, 50)), scene.globe.ellipsoid);

and use that value for the destination of the flight.

Best,

Hannah

3

Hmmm i just tried it
var dest = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(500, 50), viewer.scene.globe.ellipsoid);

console.log(dest);

dest.z = viewer.camera.position.z;

console.log(dest);

viewer.camera.flyTo({destination:dest});

``

But it didn’t do what i want, is there something wrong with my code?

4

The code looks fine. If that’s not the behavior you want, than I think I misunderstood what you’re trying to do. Can you please elaborate?

-Hannah

5

Hannah, imagine you wanna move the position of the camera x pixels right, say, for displaying a custom popup on screen if it popups half-way off-screen.
What would be the way?
Thanks

6

Just wanna get current camera position and add x pixels to the right!

7

@dsldiesel can you share a Sandcastle showing the issue? See: How to share custom Sandcastle examples

It’d be helpful to see what the current suggested approach does vs what the expected one is.

8

Thanks Omar;
It’d take long to adapt my modern vue.js app code to a sandcastle, sorry.
I’ll paste an image so you can see my issue, I have made a wms service callback function that processes the data and shows a custom popup (didn’t find any native cesium popup functionality, pls let me know if there is one). This popup may pop off-screen as in image. If so, the camera should animate, or flyto, a few pixels to the right so the popup is again on-screen.

Other tools like leaflet have popup function built-in, and this behavior is implemented already inside the library. I am doing all this and could not find an easy way to move the map right smoothly, and am stuck with something like this:

if ((viewer.scene.canvas.width - e.position.x) < 250) {
    // do stuff considering e is click event and 250px is popup's width
}

image
image741×463 186 KB

9

If you can detect when the popup is offscreen, could you just fly the camera such that the entity of the popup is in the center of the screen?

10

Hi Omar!

Thanks, but that is exactly what I am trying to do.
My way to recognise an ‘out-of-screen’ popup is as follows (considering 250px is the outer width of popup and e.position is cursor click):

if ((viewer.scene.canvas.width - e.position.x) < 250)

But I am pretty lost after it, as I am new to Cesium.
Could you illuminate that camera fly?
I am stuck here now, THIS IS NOT WORKING:

const canvas = viewer.scene.canvas;
const center = new Cesium.Cartesian2(canvas.clientWidth / 2.0, canvas.clientHeight / 2.0);
center.x += 250;
const result = viewer.camera.pickEllipsoid(center, viewer.scene.globe.ellipsoid);
viewer.camera.flyTo({ destination : result });