Resizing a single point entity

CesiumJS
1

See image (https://i.imgur.com/3qgpDdV.png) for a visual of the following explanation. And here's a gist (https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=f7d844cbd7e7548bcdff4e4e9a97f4aa)

I'm implementing functionality to add annotations and shapes to Cesium. Due to limitations with the oval/ellipse shape in Cesium (can't have a border wider than 1px on Windows), I'm 'hacking' a single point entity, applying a transparent fill color with an outline color and width. I can then change the pixelSize and the outline width to simulate a circle shape. My current dilemma is figuring out the most user-friendly way to resize the shape. I have a single point entity show up when the circle is clicked that is basically "edit mode" for the circle that allows the user to drag it to make the circle larger or smaller. My question is where to put that draggable point and how to maintain its position relative to the circle (again a single point entity itself). I think the position of the draggable point has to be a computed position based on camera height in the viewer, pixelSize of the circle, etc. since every time you zoom in or out, the relative position of the "edge" of the blue circle will change and therefore the white point will not stay with the blue circle properly. I've tried playing around with the scaleByDistance parameter but it's not quite right. I'm not certain how to proceed with the math in figuring out where to place that white dot and maintain its position. In the above gist, zooming in our out will hopefully demonstrate what I'm saying. I'd like the white dot to stay with the edge of the circle.

I hope that makes sense, I know it's sort of weird, thanks for any advice you may have.

2

Hello,

The biggest difference is that points are in ‘screen space’ and ellipses are in ‘world space’. Basically, points are designed to maintain a certain size in pixels regardless of where the camera is. Ellipses and other geometry types are drawn using coordinates relative to the globe so the edges of the ellipse are on the same location on the globe regardless of where the camera is.

For implementing wider outlines, I would recommend using a polyline.

You can use this helper function for computing the ellipse positions to pass the polyline: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/EllipseGeometryLibrary.js#L100

See the EllipseOutlineGeometry for an example for how to use this function: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/EllipseOutlineGeometry.js#L41

Best,

Hannah

3

Thank you for the info Hannah! I ended up using a polygon instead of a polyline since I had already been working with them for rectangles. It hadn’t occurred to me to try to use a polygon to make a circle until you pointed out the compute ellipse position function. Thank you!