Is there a built-in method to draw geometries

CesiumJS
1

I was looking at this cesium application featured in a blog post: MARIS - Marine Radioactivity Information System
And I was wondering how the draw (and edit) of rectangle and polygon was done? Is it a built in method in cesium?

1 Like
2

@AlexandreBorowczyk

Thank you for sharing such a cool resource. I had never heard of MARIS but I really enjoyed looking through their website. I would love to learn more about your application. Why do you need to draw rectangles on the world terrain? What is the goal of your project?

As for editing/drawing rectangles on the Cesium World Terrain, I suggest checking out the Terrain Clipping Planes demo on sandcastle.

It showcases how to highlight and crop sections of the terrain. In addition, it demonstrates how to integrate assets into the terrain.

image
image829Ă—441 78 KB

CZML polygons are also a great tool for annotating the world terrain. This demo shows how polygons can be created and added to the Cesium Viewer.

Let me know if you have any other questions or concerns! Looking forward to learning more about your application.

-Sam

1 Like
3

@sam.rothstein

Thanks for the quick reply and the link. I’m working on building a automated mission planner for UAV. The drawing of shape on the terrain is for the user so set flight restrictions and area of operation.

Another example of what I’m trying to accomplish is the Sketch widget | ArcGIS API for JavaScript

Alex

1 Like
4

@AlexandreBorowczyk

Thank you for sharing some more details. Please keep the community up to date with your progress! I almost see this as something that could be added to the CesiumJS spec in the future.

-Sam

1 Like
5

I wrote a whole bunch of shape-drawing code for a (regrettably closed-source) project, but the approach is pretty straightforward:

  • add a click listener using viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(handler, ScreenSpaceEventType.LEFT_CLICK)
  • convert the screen-space coordinates to world-coordinates using let ray = viewer.scene.camera.getPickRay(evt.position); let cartesian = ray && viewer.scene.globe.pick(ray, scene);
  • Use saved positions to create a polygon, rectangle, ellipse, etc.

You can follow the same approach using ScreenSpaceEventType.MOUSE_MOVE to continuously get the world coordinate under the mouse pointer, which lets you draw the “in-progress” shape. For that case, I use CallbackProperty to make one Entity and compute its rectangle.coordinates or polygon.hierarchy dynamically.

1 Like
6

Hey @James_B

Thanks for the insights!

1 Like