Cesium Click to draw a circle (dynamically draw a circle)

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 semiMinorAxis and semiMajorAxis when , use CallbackProperty Generate dynamic values assigned to semiMinorAxis and semiMajorAxis Parameters , You can get the effect of dynamically drawing circles .

Usage method ： call click_draw_circle() The method will do

var handler = null;
var circle_center_entity = null;  //  Pool fire   Center point  entity
var temporary_circle_entity = null;  //  Temporary circle entity
var circle_entity = null; //  The result is round entity
var circle_end_point = null;  //  The end point 
var circle_center_point = null;  //  Center point 

function click_draw_circle(){
    
	//  When you click again , Clear the drawn center point , Temporary circle and result circle , Initialize parameters 
	if (circle_entity !== null) {
    
	  viewer.entities.remove(circle_center_entity);
	  viewer.entities.remove(temporary_circle_entity);
	  viewer.entities.remove(circle_entity);
	  circle_center_entity = null;
	  temporary_circle_entity = null;
	  circle_entity = null;
	  circle_end_point = null;
	  circle_center_point = null;
	}
	
	//  Clear all click events 
	if (handler) {
    
	  handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
	  handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	}
	
	handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
	
	//  Click the left mouse button 
	handler.setInputAction(event => {
    
	  let position = event;
	  // Obtain the coordinate position according to the screen coordinates 
	  const point = GV.GeoPoint.fromScreen(position.position.x, position.position.y, viewer);
	  if (!point) {
    
	    alert(' Please click the earth to get the coordinates ！')
	    return;
	  }
	
	  //  Judge whether the center of the circle has been drawn , If you draw , When you click the left button again , Is to draw the final result circle 
	  if (circle_center_entity) {
    
	    //  Set the final point 
	    circle_end_point = {
    
	      lon: point.lon.toFixed(10),
	      lat: point.lat.toFixed(10),
	      height: 0
	    }
	    //  Draw the resulting polygon 
	    draw_circle();
	    //  Clear the event 
	    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
	    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	    //  eliminate   Draw the center point and temporary circle 
	    viewer.entities.remove(circle_center_entity);
	    viewer.entities.remove(temporary_circle_entity);
	  } else {
    
	  	//  Set the coordinates of the center point and the end point 
	    circle_end_point = circle_center_point = {
    
	      lon: point.lon.toFixed(10),
	      lat: point.lat.toFixed(10),
	      height: 0
	    }
	    //  Draw the center point 
	    create_circle_center_point([point.lon.toFixed(10), point.lat.toFixed(10)]);
	    //  Start drawing dynamic circles 
	    draw_dynamic_circle(circle_center_point)
	  }
	
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
	
	//  Mouse movement -- Draw circles in real time 
	handler.setInputAction((event) => {
    
	  let position = event;
	  // Obtain the coordinate position according to the screen coordinates 
	  const point = GV.GeoPoint.fromScreen(position.endPosition.x, position.endPosition.y, viewer);
	  if (point) {
    
	    if (temporary_circle_entity) {
    
	    //  Modify the end point - Used to dynamically draw circles 
	      circle_end_point = {
    
	        lon: point.lon.toFixed(10),
	        lat: point.lat.toFixed(10),
	        height: 0
	      }
	    }
	  }
	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

//  Create a center point 
function create_circle_center_point(point_arr) {
    
  circle_center_entity = viewer.entities.add({
    
    // fromDegrees（ longitude , latitude , Height ） Longitude and latitude values in degrees return Cartesian3 Location 
    position: Cesium.Cartesian3.fromDegrees(point_arr[0], point_arr[1], 100),
    point: {
    
      //  Size of points （ Pixels ）
      pixelSize: 5,
      //  Spot color ,fromCssColorString  You can use it directly CSS Color 
      color: Cesium.Color.WHITE,
      //  Border color 
      outlineColor: Cesium.Color.fromCssColorString('#fff'),
      //  Border width ( Pixels )
      outlineWidth: 2,
      //  Whether or not shown 
      show: true
    }
  });
}

//  Draw a dynamic circle 
function draw_dynamic_circle(point) {
    
  temporary_circle_entity = viewer.entities.add({
    
    position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
    ellipse: {
    
      //  Half minor axis （ A circle ： The semi minor axis is consistent with the semi major axis ）
      semiMinorAxis: new Cesium.CallbackProperty(() => {
    
        // PolygonHierarchy  Defines the hierarchy of linear rings of polygons and their holes （ Space coordinate array ）
        return two_points_distance(point, circle_end_point);
      }, false),
      //  Semimajor axis 
      semiMajorAxis: new Cesium.CallbackProperty(() => {
    
        // PolygonHierarchy  Defines the hierarchy of linear rings of polygons and their holes （ Space coordinate array ）
        return two_points_distance(point, circle_end_point);
      }, false),
      //  Fill color 
      material: Cesium.Color.RED.withAlpha(0.5),
      //  Does it have a border 
      outline: true,
      //  Border color 
      outlineColor: Cesium.Color.WHITE,
      //  Border width 
      outlineWidth: 4
    },
  });
}

//  Draw the result circle 
function draw_circle() {
    
  circle_entity = viewer.entities.add({
    
    position: Cesium.Cartesian3.fromDegrees(circle_center_point.lon, circle_center_point.lat),
    ellipse: {
    
      //  Half minor axis （ A circle ： The semi minor axis is consistent with the semi major axis ）
      semiMinorAxis: two_points_distance(circle_center_point, circle_end_point),
      //  Semimajor axis 
      semiMajorAxis: two_points_distance(circle_center_point, circle_end_point),
      //  Fill color 
      material: Cesium.Color.RED.withAlpha(0.5),
      //  Does it have a border 
      outline: true,
      //  Border color 
      outlineColor: Cesium.Color.WHITE,
      //  Border width 
      outlineWidth: 4
    },
  });
}

//  Calculate the straight-line distance before two points according to longitude and latitude 
function two_points_distance(start_point, end_point) {
    
  //  Longitude and latitude are converted into world coordinates 
  var start_position = Cesium.Cartesian3.fromDegrees(start_point.lon, start_point.lat, start_point.height);
  var end_position = Cesium.Cartesian3.fromDegrees(end_point.lon, end_point.lat, end_point.height);
  //  Returns the distance between two coordinates （ Company ： rice ）
  return Cesium.Cartesian3.distance(start_position, end_position);
}

Drawing ：

Finished drawing ：