add FreehandLine

examples/index.ts

@@ -63,9 +63,12 @@ buttonGroup.onclick = (evt) => {
     case 'drawCurvedArrow':
       new CesiumPlot.CurvedArrow(Cesium, viewer, {});
       break;
-      case 'drawDoubleArrow':
-        new CesiumPlot.DoubleArrow(Cesium, viewer, {});
-        break;
+    case 'drawDoubleArrow':
+      new CesiumPlot.DoubleArrow(Cesium, viewer, {});
+      break;
+    case 'drawFreehandLine':
+      new CesiumPlot.FreehandLine(Cesium, viewer, {});
+      break;
 
     default:
       break;

index.html

@@ -48,6 +48,7 @@
       <button id="drawSwallowtailSquadCombat" class="button">分队战斗方向(燕尾)</button>
       <button id="drawAssaultDirection" class="button">突击方向</button>
       <button id="drawDoubleArrow" class="button">双箭头</button>
+      <button id="drawFreehandLine" class="button">自由线</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';

src/draw.ts

@@ -12,6 +12,7 @@ export default class Draw {
   controlPointsEventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
   lineEntity: CesiumTypeOnly.Entity;
   type!: 'polygon' | 'line';
+  freehand!: boolean;
 
   constructor(cesium: typeof CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer) {
     this.cesium = cesium;
@@ -54,9 +55,12 @@ export default class Draw {
         // In the drawing state, the points clicked are key nodes of the shape, and they are saved in this.points.
         const cartesian = this.pixelToCartesian(evt.position);
         const points = this.getPoints();
-        // If clicked outside the sphere or if the distance between the current click position and
-        // the previous click position is less than 10 meters, it is considered an invalid point.
-        if (!cartesian || (points.length > 0 && !this.checkDistance(cartesian, points[points.length - 1]))) {
+        // If the click is outside the sphere, position information cannot be obtained.
+        if (!cartesian) {
+          return;
+        }
+        // "For non-freehand drawn shapes, validate that the distance between two consecutive clicks is greater than 10 meters
+        if (!this.freehand && points.length > 0 && !this.checkDistance(cartesian, points[points.length - 1])) {
           return;
         }
         this.addPoint(cartesian);

src/index.ts

@@ -7,6 +7,7 @@ import StraightArrow from './arrow/straight-arrow';
 import CurvedArrow from './arrow/curved-arrow';
 import AssaultDirection from './arrow/assault-direction';
 import DoubleArrow from './arrow/double-arrow';
+import FreehandLine from './line/freehand-line';
 
 const CesiumPlot = {
   FineArrow,
@@ -18,6 +19,7 @@ const CesiumPlot = {
   CurvedArrow,
   AssaultDirection,
   DoubleArrow,
+  FreehandLine,
 };
 
 export default CesiumPlot;

src/line/freehand-line.ts

@@ -0,0 +1,50 @@
+import Draw from '../draw';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class FreehandLine extends Draw {
+  points: Cartesian3[] = [];
+  type: 'polygon' | 'line';
+  freehand: boolean;
+
+  constructor(cesium: any, viewer: any, style: any) {
+    super(cesium, viewer);
+    this.cesium = cesium;
+    this.type = 'line';
+    this.freehand = true;
+    this.setState('drawing');
+  }
+
+  /**
+   * Add points only on click events
+   */
+  addPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    if (this.points.length < 2) {
+      this.onMouseMove();
+    } else {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    this.setGeometryPoints(this.points);
+    this.drawLine();
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    this.setGeometryPoints(this.points);
+    this.drawLine();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}