Adding geometry by clicking on the map

CesiumJS
1

I would like to be able to add points or other geometry with user mouseclicks on the map. Here’s what I’ve tried so far, but nothing shows up when I click, even though I know it is reading the mouseclick position data.

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    var points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
    handler.setInputAction(function(movement) {
        console.log(Cesium.Cartesian3.clone(movement.position));
        point.add({
            position : Cesium.Cartesian3.clone(movement.position),
            color : Cesium.Color.YELLOW
        });

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

My only thought so far is that the positions being recorded by the mouse do not look like actual map positions but are more like the x and y coordinates for the viewer window/screen. So how might I get the mouse position to register what the map position is instead of the screen one. And/or is there another error you’re seeing with my script?

2

You are correct that you must convert the 2D position to a 3D world position. You can make this conversion using viewer.scene.pickPosition as shown in this Sandcastle example: https://sandcastle.cesium.com/index.html?src=Drawing%20on%20Terrain.html

What kind of project are you working on?

3

Thanks, I’ll try that! Right now I’m just evaluating what the product can do to possibly use it in a future app. I’m actually mostly interested in modelling EM signals, if you can point me to any good resources for working with that kind of visualization on the platform.

4

I haven’t done any work with visualizing signal propagation, but I would check out the showcases we’ve got on the blog here to see if there’s anything similar to what you’re trying to do: https://cesium.com/blog/categories/userstories/

And if not, feel free to ask here on the forum especially if you have a video/screenshot of what you are hoping the result will look like.