add SwallowtailSquadCombat

examples/index.ts

@@ -53,3 +53,8 @@ const squadCombat = document.getElementById('drawSquadCombat') as HTMLElement;
 squadCombat.onclick = () => {
   new CesiumPlot.SquadCombat(Cesium, viewer, {});
 };
+
+const swallowtailSquadCombat = document.getElementById('drawSwallowtailSquadCombat') as HTMLElement;
+swallowtailSquadCombat.onclick = () => {
+  new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer, {});
+};

index.html

@@ -41,8 +41,9 @@
     <div class="button-container">
       <button id="drawFineArrow" class="button">直箭头</button>
       <button id="drawAttackArrow" class="button">进攻方向箭头</button>
-      <button id="drawSwallowtailAttackArrow" class="button">燕尾进攻方向箭头</button>
+      <button id="drawSwallowtailAttackArrow" class="button">进攻方向箭头(燕尾)</button>
       <button id="drawSquadCombat" class="button">分队战斗方向</button>
+      <button id="drawSwallowtailSquadCombat" class="button">分队战斗方向(燕尾)</button>
     </div>
 
     <script>

src/arrow/swallowtail-squad-combat.ts

@@ -0,0 +1,62 @@
+import * as Utils from '../utils';
+import SquadCombat from './squad-combat';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class SwallowtailSquadCombat extends SquadCombat {
+  points: Cartesian3[] = [];
+  headHeightFactor: number;
+  headWidthFactor: number;
+  neckHeightFactor: number;
+  neckWidthFactor: number;
+  tailWidthFactor: number;
+  swallowTailFactor: number;
+
+  constructor(cesium: any, viewer: any, style: any) {
+    super(cesium, viewer, {});
+
+    this.headHeightFactor = 0.18;
+    this.headWidthFactor = 0.3;
+    this.neckHeightFactor = 0.85;
+    this.neckWidthFactor = 0.15;
+    this.tailWidthFactor = 0.1;
+    this.swallowTailFactor = 1;
+    this.cesium = cesium;
+  }
+
+  /**
+   * Generate geometric shapes based on key points.
+   */
+  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+
+    const tailPnts = this.getTailPoints(lnglatPoints);
+    const headPnts = this.getArrowHeadPoints(lnglatPoints, tailPnts[0], tailPnts[2]);
+    const neckLeft = headPnts[0];
+    const neckRight = headPnts[4];
+    const bodyPnts = this.getArrowBodyPoints(lnglatPoints, neckLeft, neckRight, this.tailWidthFactor);
+    const count = bodyPnts.length;
+    let leftPnts = [tailPnts[0]].concat(bodyPnts.slice(0, count / 2));
+    leftPnts.push(neckLeft);
+    let rightPnts = [tailPnts[2]].concat(bodyPnts.slice(count / 2, count));
+    rightPnts.push(neckRight);
+    leftPnts = Utils.getQBSplinePoints(leftPnts);
+    rightPnts = Utils.getQBSplinePoints(rightPnts);
+
+    const points = leftPnts.concat(headPnts, rightPnts.reverse(), [tailPnts[1], leftPnts[0]]);
+    const temp = [].concat(...points);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+
+  getTailPoints(points) {
+    const allLen = Utils.getBaseLength(points);
+    const tailWidth = allLen * this.tailWidthFactor;
+    const tailLeft = Utils.getThirdPoint(points[1], points[0], Math.PI / 2, tailWidth, false);
+    const tailRight = Utils.getThirdPoint(points[1], points[0], Math.PI / 2, tailWidth, true);
+    const len = tailWidth * this.swallowTailFactor;
+    const swallowTailPnt = Utils.getThirdPoint(points[1], points[0], 0, len, true);
+    return [tailLeft, swallowTailPnt, tailRight];
+  }
+}

src/index.ts

@@ -2,12 +2,14 @@ import FineArrow from './arrow/fine-arrow';
 import AttackArrow from './arrow/attack-arrow';
 import SwallowtailAttackArrow from './arrow/swallowtail-attack-arrow';
 import SquadCombat from './arrow/squad-combat';
+import SwallowtailSquadCombat from './arrow/swallowtail-squad-combat';
 
 const CesiumPlot = {
   FineArrow,
   AttackArrow,
   SwallowtailAttackArrow,
   SquadCombat,
+  SwallowtailSquadCombat,
 };
 
 export default CesiumPlot;