add FreehandPolygon

examples/index.ts

@@ -69,6 +69,9 @@ buttonGroup.onclick = (evt) => {
     case 'drawFreehandLine':
       new CesiumPlot.FreehandLine(Cesium, viewer, {});
       break;
+    case 'drawFreehandPolygon':
+      new CesiumPlot.FreehandPolygon(Cesium, viewer, {});
+      break;
 
     default:
       break;

index.html

@@ -49,6 +49,7 @@
       <button id="drawAssaultDirection" class="button">突击方向</button>
       <button id="drawDoubleArrow" class="button">双箭头</button>
       <button id="drawFreehandLine" class="button">自由线</button>
+      <button id="drawFreehandPolygon" class="button">自由面</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';

src/index.ts

@@ -8,6 +8,7 @@ import CurvedArrow from './arrow/curved-arrow';
 import AssaultDirection from './arrow/assault-direction';
 import DoubleArrow from './arrow/double-arrow';
 import FreehandLine from './line/freehand-line';
+import FreehandPolygon from './polygon/freehand-polygon';
 
 const CesiumPlot = {
   FineArrow,
@@ -20,6 +21,7 @@ const CesiumPlot = {
   AssaultDirection,
   DoubleArrow,
   FreehandLine,
+  FreehandPolygon,
 };
 
 export default CesiumPlot;

src/polygon/freehand-polygon.ts

@@ -0,0 +1,52 @@
+import Draw from '../draw';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class FreehandPolygon extends Draw {
+  points: Cartesian3[] = [];
+  type: 'polygon' | 'line';
+  freehand: boolean;
+
+  constructor(cesium: any, viewer: any, style: any) {
+    super(cesium, viewer);
+    this.cesium = cesium;
+    this.type = 'polygon';
+    this.freehand = true;
+    this.setState('drawing');
+  }
+
+  /**
+   * Add points only on click events
+   */
+  addPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    if (this.points.length === 1) {
+      this.onMouseMove();
+    } else if (this.points.length > 2) {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    if (this.points.length > 2) {
+      this.setGeometryPoints(this.points);
+      this.drawPolygon();
+    }
+  }
+
+  /**
+   * 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.drawPolygon();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}