Add Single Point with Mouse Click on Cesium Map

CesiumJS
1

Hello,

I am working to create a React App, and am currently using “Resium,” in VS Code.
I have been able to return the “Viewer,” on the screen, but I want to make it more interactive with the user. I looked through what was offered on sandcastle and other online sources, but I am only able to find the option to “draw a line,” or “draw a polygon,” and the “picking” option, which shows lat long of wherever my mouse hovers.

I am looking for a kind of “in between” feature, or guidance on how I can achieve this end goal. I would like to be able to click on the globe and create a point. I would then like to be able to return the latitude and longitude of that point.

I hope to hear back soon.
Thank you again!
Cheers, Divya

4

@divyayendapally

Welcome to the community :confetti_ball:

With your permission, I would like to make this post public. I do not see any confidential information on your post and I think that this post would help out the rest of our community. Do I have your permission to make this post public? Let me know, and we can start taking a look at your use-case :grinning_face_with_smiling_eyes:

Best,
Sam

5

That should be fine. Thank you!

7

@divyayendapally

I would use the method setInputAction() of ScreenSpaceEventHandler to add a point to the map when the user left-clicks. Here is some documentation to get you started:

https://cesium.com/learn/cesiumjs/ref-doc/ScreenSpaceEventHandler.html?classFilter=screen

You can use the Points demo that you referenced earlier to help out with adding a point to the map.

As you can see in the Points demo, the coordinates are updated as follows

position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)

Thus you will need the mouse position to add a point to the viewer. The picking sandcastle demo shows how to get the cartographic of the mouse at any given time. Lines 46-51 seem particularly important. Once acquired, these values can easily be printed to the Console.

Let me know if you have any other questions or concerns. I would also be curious to hear other ideas for implementing this functionality.

-Sam

8

Thank you! Any help on how I can convert this to Resium?

9

@divyayendapally

You are welcome! I am happy to help out :grinning:

That’s a great question. I would recommend going through the “getting started” resources on Resium’s website. These guides should help get you familiar with Resium. A basic familiarity with Resium will make the whole development process more seamless.

https://resium.darwineducation.com/guide

When you begin to have more specific questions about Resium, the following two community forum threads are a terrific resource.

And of course, bugs and issues with Resium can be posted on the Resium GitHub page.

Resium has been a hot topic in the Cesium community. If other community members have any suggestions do not hesitate to share them!

-Sam

10

Hey Sam, I implemented a clicking point which is returning a Cartesian 2 (x,y) points. I notice that this is not matching the lat and long coordinates on the map. Do you know why this may be the case/ and what exactly Cartesian is returning?

11

@divyayendapally

Thank you for the update! How exactly are you generating the Cartesian points? Is it possible that you need to convert these coordinates to degrees to get the expected location?

-Sam