add Ellipse

examples/index.ts

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

index.html

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

src/index.ts

@@ -10,6 +10,7 @@ import DoubleArrow from './arrow/double-arrow';
 import FreehandLine from './line/freehand-line';
 import FreehandPolygon from './polygon/freehand-polygon';
 import Curve from './line/curve';
+import Ellipse from './polygon/ellipse';
 
 const CesiumPlot = {
   FineArrow,
@@ -24,6 +25,7 @@ const CesiumPlot = {
   FreehandLine,
   FreehandPolygon,
   Curve,
+  Ellipse,
 };
 
 export default CesiumPlot;

src/polygon/ellipse.ts

@@ -0,0 +1,85 @@
+import Base from '../base';
+import * as Utils from '../utils';
+// @ts-ignore
+import { Cartesian3 } from '@examples/cesium';
+
+import { PolygonStyle } from '../interface';
+
+export default class Ellipse 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 > 1) {
+      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.createEllipse(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.createEllipse(this.points);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  createEllipse(positions: Cartesian3[]) {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+    const pnt1 = lnglatPoints[0];
+    const pnt2 = lnglatPoints[1];
+
+    const center = Utils.Mid(pnt1, pnt2);
+    const majorRadius = Math.abs((pnt1[0] - pnt2[0]) / 2);
+    const minorRadius = Math.abs((pnt1[1] - pnt2[1]) / 2);
+    const res = this.generatePoints(center, majorRadius, minorRadius);
+    const temp = [].concat(...res);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+
+  generatePoints(center, majorRadius, minorRadius) {
+    let [x, y, angle, points] = [null, null, 0, []];
+    for (let i = 0; i <= 100; i++) {
+      angle = (Math.PI * 2 * i) / 100;
+      x = center[0] + majorRadius * Math.cos(angle);
+      y = center[1] + minorRadius * Math.sin(angle);
+      points.push([x, y]);
+    }
+    return points;
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}