add CurvedArrow

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, {});
+};

index.html

@@ -40,6 +40,7 @@
     <div id="cesiumContainer"></div>
     <div class="button-container">
       <button id="drawStraightArrow" class="button">细直箭头</button>
+      <button id="drawCurvedArrow" class="button">曲线箭头</button>
       <button id="drawFineArrow" class="button">直箭头</button>
       <button id="drawAttackArrow" class="button">进攻方向箭头</button>
       <button id="drawSwallowtailAttackArrow" class="button">进攻方向箭头(燕尾)</button>

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;
+  }
+}

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,
 };