diff --git a/examples/index.ts b/examples/index.ts
index 8d50bf1..adf23cb 100644
--- a/examples/index.ts
+++ b/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,
diff --git a/index.html b/index.html
index 5a3907b..5e9651a 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,7 @@
+
diff --git a/src/index.ts b/src/index.ts
index 01125c6..0140622 100644
--- a/src/index.ts
+++ b/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;
diff --git a/src/polygon/ellipse.ts b/src/polygon/ellipse.ts
new file mode 100644
index 0000000..33e3768
--- /dev/null
+++ b/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;
+ }
+}