Polygon object snap function

I think that there is no “built-in” functionality for that (to be confirmed by the CesiumJS core team). The reason for that may be that it raises a few question about the desired interaction and details of the behavior of this “snapping”. For example: Should it snap to all existing points (and if so, where exactly are these points defined or collected?) Should the “snap radius” depend on the zoom level? How to visualize the snap radius? Should it be possible to disable the snapping temporarily, to be able to set points precisely at a certain position? …

But the basic functionality could probably be implemented as follows:

  • When the mouse is moved, then the “pick position” for the current mouse position is computed
  • This pick position is compared to all “snap positions” (i.e. to all polygon corners that already exist)
  • When the distance of the pick position is below a threshold for a certain snap position, then this position is used as the “snapped position”
  • When the mouse button is pressed, then the snapped position is added to the snap positions (and the the current polygon)

The effect could roughly look like this:

Cesium Snap Polygon

Again, there are many details for the implementation that may depend on your exact requirements, and how exactly you are currently creating and drawing the polygons. But one possible implementation is sketched in this sandcastle:

(Parts of this are based on the Drawing On Terrain sandcastle)

1 Like