add lune

examples/index.ts

@@ -126,6 +126,9 @@ buttonGroup.onclick = (evt) => {
     case 'drawEllipse':
       geometry = new CesiumPlot.Ellipse(Cesium, viewer);
       break;
+    case 'drawLune':
+      geometry = new CesiumPlot.Lune(Cesium, viewer);
+      break;
     case 'drawFreehandPolygon':
       geometry = new CesiumPlot.FreehandPolygon(Cesium, viewer, {
         material: Cesium.Color.GREEN,

index.html

@@ -58,6 +58,7 @@
       <button id="drawFreehandPolygon">自由面</button>
       <button id="drawCurve">曲线</button>
       <button id="drawEllipse">椭圆</button>
+      <button id="drawLune">半月面</button>
       <button id="hide">隐藏</button>
       <button id="show">显示</button>
       <button id="remove">删除</button>

src/index.ts

@@ -11,6 +11,7 @@ import FreehandLine from './line/freehand-line';
 import FreehandPolygon from './polygon/freehand-polygon';
 import Curve from './line/curve';
 import Ellipse from './polygon/ellipse';
+import Lune from './polygon/lune';
 
 const CesiumPlot = {
   FineArrow,
@@ -26,6 +27,7 @@ const CesiumPlot = {
   FreehandPolygon,
   Curve,
   Ellipse,
+  Lune,
 };
 
 export default CesiumPlot;

src/polygon/lune.ts

@@ -0,0 +1,94 @@
+import Base from '../base';
+import * as Utils from '../utils';
+// @ts-ignore
+import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
+
+export default class Lune extends Base {
+  points: Cartesian3[] = [];
+  freehand: boolean;
+
+  constructor(cesium: any, viewer: any, style?: PolygonStyle) {
+    super(cesium, viewer, style);
+    this.cesium = cesium;
+    this.freehand = true;
+    this.setState('drawing');
+  }
+
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
+  /**
+   * 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) {
+    } else if (this.points.length > 2) {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    const tempPoints = [...this.points, cartesian];
+    const geometryPoints = this.createLune(tempPoints);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    const geometryPoints = this.createLune(this.points);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  createLune(positions: Cartesian3[]) {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+
+    if (lnglatPoints.length === 2) {
+      const mid = Utils.Mid(lnglatPoints[0], lnglatPoints[1]);
+      const d = Utils.MathDistance(lnglatPoints[0], mid);
+      const pnt = Utils.getThirdPoint(lnglatPoints[0], mid, Math.PI / 2, d, false);
+      lnglatPoints.push(pnt);
+    }
+    let [pnt1, pnt2, pnt3, startAngle, endAngle] = [
+      lnglatPoints[0],
+      lnglatPoints[1],
+      lnglatPoints[2],
+      undefined,
+      undefined,
+    ];
+    const center = Utils.getCircleCenterOfThreePoints(pnt1, pnt2, pnt3);
+    const radius = Utils.MathDistance(pnt1, center);
+    const angle1 = Utils.getAzimuth(pnt1, center);
+    const angle2 = Utils.getAzimuth(pnt2, center);
+    if (Utils.isClockWise(pnt1, pnt2, pnt3)) {
+      startAngle = angle2;
+      endAngle = angle1;
+    } else {
+      startAngle = angle1;
+      endAngle = angle2;
+    }
+
+    let points = Utils.getArcPoints(center, radius, startAngle, endAngle);
+    const temp = [].concat(...points);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}