diff --git a/examples/index.ts b/examples/index.ts
index 49f67f6..4b58dd0 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -69,3 +69,8 @@ const assaultDirection = document.getElementById('drawAssaultDirection') as HTML
assaultDirection.onclick = () => {
new CesiumPlot.AssaultDirection(Cesium, viewer, {});
};
+
+const curvedArrow = document.getElementById('drawCurvedArrow') as HTMLElement;
+curvedArrow.onclick = () => {
+ new CesiumPlot.CurvedArrow(Cesium, viewer, {});
+};
diff --git a/index.html b/index.html
index 5ed27f1..422cd2a 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@
+
diff --git a/src/arrow/curved-arrow.ts b/src/arrow/curved-arrow.ts
new file mode 100644
index 0000000..8203e99
--- /dev/null
+++ b/src/arrow/curved-arrow.ts
@@ -0,0 +1,86 @@
+import * as Utils from '../utils';
+import Draw from '../draw';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class CurvedArrow extends Draw {
+ points: Cartesian3[] = [];
+ arrowLengthScale: number = 5;
+ maxArrowLength: number = 3000000;
+ type: 'polygon' | 'line';
+ t: number;
+
+ constructor(cesium: any, viewer: any, style: any) {
+ super(cesium, viewer);
+ this.cesium = cesium;
+ this.type = 'line';
+ this.t = 0.3;
+ this.setState('drawing');
+ this.onDoubleClick();
+ }
+
+ /**
+ * Add points only on click events
+ */
+ addPoint(cartesian: Cartesian3) {
+ this.points.push(cartesian);
+ if (this.points.length < 2) {
+ this.onMouseMove();
+ } else if (this.points.length === 2) {
+ this.setGeometryPoints(this.points);
+ this.drawLine();
+ }
+ }
+
+ /**
+ * Draw a shape based on mouse movement points during the initial drawing.
+ */
+ updateMovingPoint(cartesian: Cartesian3) {
+ const tempPoints = [...this.points, cartesian];
+ if (tempPoints.length === 2) {
+ this.setGeometryPoints(tempPoints);
+ this.drawLine();
+ } else {
+ const geometryPoints = this.createLine(tempPoints);
+ this.setGeometryPoints(geometryPoints);
+ this.drawLine();
+ }
+ }
+
+ /**
+ * In edit mode, drag key points to update corresponding key point data.
+ */
+ updateDraggingPoint(cartesian: Cartesian3, index: number) {
+ this.points[index] = cartesian;
+ const geometryPoints = this.createLine(this.points);
+ this.setGeometryPoints(geometryPoints);
+ this.drawLine();
+ }
+
+ /**
+ * Generate geometric shapes based on key points.
+ */
+ createLine(positions: Cartesian3[]) {
+ const lnglatPoints = positions.map((pnt) => {
+ return this.cartesianToLnglat(pnt);
+ });
+ const curvePoints = Utils.getCurvePoints(this.t, lnglatPoints);
+ const pnt1 = lnglatPoints[lnglatPoints.length - 2];
+ const pnt2 = lnglatPoints[lnglatPoints.length - 1];
+
+ // const distance = Utils.MathDistance(pnt1, pnt2);
+ // const distance = Utils.wholeDistance(lnglatPoints);
+ // let len = distance / this.arrowLengthScale;
+ let len = 1.5;
+ len = len > this.maxArrowLength ? this.maxArrowLength : len;
+ const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
+ const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
+ const temp = [].concat(...curvePoints);
+ const points = [...temp, ...leftPnt, ...pnt2, ...rightPnt];
+ const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
+ return cartesianPoints;
+ }
+
+ getPoints() {
+ return this.points;
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 37fd291..251e7ac 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import SwallowtailAttackArrow from './arrow/swallowtail-attack-arrow';
import SquadCombat from './arrow/squad-combat';
import SwallowtailSquadCombat from './arrow/swallowtail-squad-combat';
import StraightArrow from './arrow/straight-arrow';
+import CurvedArrow from './arrow/curved-arrow';
import AssaultDirection from './arrow/assault-direction';
const CesiumPlot = {
@@ -13,6 +14,7 @@ const CesiumPlot = {
SquadCombat,
SwallowtailSquadCombat,
StraightArrow,
+ CurvedArrow,
AssaultDirection,
};