diff --git a/examples/index.ts b/examples/index.ts
index adf23cb..5fc7733 100644
--- a/examples/index.ts
+++ b/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,
diff --git a/index.html b/index.html
index 5e9651a..83e2de9 100644
--- a/index.html
+++ b/index.html
@@ -58,6 +58,7 @@
+
diff --git a/src/index.ts b/src/index.ts
index 0140622..3fd777a 100644
--- a/src/index.ts
+++ b/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;
diff --git a/src/polygon/lune.ts b/src/polygon/lune.ts
new file mode 100644
index 0000000..d83d837
--- /dev/null
+++ b/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;
+ }
+}