Cesium Click to draw polygons (dynamically draw polygons)

Let's focus on ：CallbackProperty Is a class , Its value is calculated by the callback function delay . In other words, it is constantly calling itself , Whenever the object it returns changes , The changed value will be thrown . Take advantage of this feature , We can define hierarchy（ hierarchy ） when , use CallbackProperty Generate dynamic object assignment to hierarchy（ hierarchy ） Parameters , You can get Dynamically draw polygons The effect of .

Usage method ： call click_draw_polygon() The method will do

//  After the global function is executed, the hook function of the component is executed 、 Component events 、 Custom events 
var polygon_point_arr = [];
//  Temporary polygon entity
var temporary_polygon_entity = null;
var handler = null;

//  Turn on the drawing method 
function click_draw_polygon() {
    
  //  Clear possible listening events 
  if (handler) {
    
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // Left mouse button -- Determine selection point 
  handler.setInputAction((event) => {
    
    //  Screen coordinates are converted to spatial coordinates 
    let cartesian = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
    //  Decide whether to define （ Can I get the space coordinates ）
    if (Cesium.defined(cartesian)) {
    
      //  Add points to an array of saved polygon points , The point and when the mouse stops moving , Click the point added when , The coordinates are the same 
      polygon_point_arr.push(cartesian);
      //  Determine whether to start drawing dynamic polygons , If not, start drawing 
      if (temporary_polygon_entity == null) {
    
        //  Draw dynamic polygons 
        draw_dynamic_polygon();
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // Mouse movement -- Draw polygons in real time 
  handler.setInputAction((event) => {
    
    //  Screen coordinates are converted to spatial coordinates 
    let cartesian = viewer.camera.pickEllipsoid(event.endPosition, viewer.scene.globe.ellipsoid);
    //  Decide whether to define （ Can I get the space coordinates ）
    if (Cesium.defined(cartesian)) {
    
      //  Determine whether dynamic polygon drawing has started , If it has already started , You can dynamically pick up the point where the mouse moves , Modify the coordinates of the point 
      if (temporary_polygon_entity) {
    
        //  As long as the element point is greater than one , Delete one point at a time , Because real-time dynamic points are added 
        if (polygon_point_arr.length > 1) {
    
          //  Delete the last element of the array （ Move the mouse to add the point ）
          polygon_point_arr.pop();
        }
        //  Add new points to the array of dynamic polygon points , For real-time change , Be careful ： Here is a point added first , Then delete the point , Add again , Repeat like this 
        polygon_point_arr.push(cartesian);
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  // Right mouse button -- Finish drawing 
  handler.setInputAction((event) => {
    
    //  Cancel mouse movement monitoring 
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //  Clear dynamically drawn polygons 
    viewer.entities.remove(temporary_polygon_entity);
    //  Delete the saved temporary polygon entity
    temporary_polygon_entity = null;
    //  Draw the resulting polygon 
    draw_polygon();
    //  Empty the polygon point array , Used for next drawing 
    polygon_point_arr = [];
    //  clear all events 
    if (handler) {
    
      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

// Draw dynamic polygons 
function draw_dynamic_polygon() {
    
  temporary_polygon_entity = viewer.entities.add({
    
    polygon: {
    
      //  This method is highlighted above 
      hierarchy: new Cesium.CallbackProperty(() => {
    
        // PolygonHierarchy  Defines the hierarchy of linear rings of polygons and their holes （ Space coordinate array ）
        return new Cesium.PolygonHierarchy(polygon_point_arr);
      }, false),
      extrudedHeight: 0,  //  Height of multilateral body （ Polygon extrusion height ）
      height: 10,  //  Height of polygon above the ground 
      material: Cesium.Color.RED.withAlpha(0.5),
    },
  });
}

// Draw the resulting polygon 
function draw_polygon() {
    
  //  Delete the last dynamically added point , If the mouse doesn't move , The last one is the same as the penultimate one , Therefore, delete 
  polygon_point_arr.pop();
  //  More than three points can be drawn into a polygon 
  if (polygon_point_arr.length >= 3) {
    
    let polygon_point_entity = viewer.entities.add({
    
      polygon: {
    
        hierarchy: polygon_point_arr,
        extrudedHeight: 0,  //  Height of multilateral body （ Polygon extrusion height ）
        height: 10,  //  Height of polygon above the ground 
        material: Cesium.Color.RED.withAlpha(0.5),
        outlineColor: Cesium.Color.RED,
        outlineWidth: 2
      },
    });
    //  Coordinate transformation -- All point coordinates can be output here , Delete it if you don't need it 
    // polygon_point_arr.forEach(val => {
    
    // let polyObj = {}
    // let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(val)
    // polyObj.lon = Cesium.Math.toDegrees(cartographic.longitude)
    // polyObj.lat = Cesium.Math.toDegrees(cartographic.latitude)
    // point_arr.push([polyObj.lon, polyObj.lat])
    // })
    // return point_arr;
  } else {
    
    return
  }
}