add SwallowtailAttackArrow

examples/index.ts

@@ -42,4 +42,9 @@ fineArrow.onclick = () => {
 const attackArrow = document.getElementById('drawAttackArrow') as HTMLElement;
 attackArrow.onclick = () => {
   new CesiumPlot.AttackArrow(Cesium, viewer, {});
-};
+};
+
+const swallowtailAttackArrow = document.getElementById('drawSwallowtailAttackArrow') as HTMLElement;
+swallowtailAttackArrow.onclick = () => {
+  new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {});
+};

index.html

@@ -15,28 +15,23 @@
         padding: 0;
         overflow: hidden;
       }
-      /* #btn {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-      } */
 
       .button-container {
         position: absolute;
         top: 10px;
         left: 10px;
-        display: flex; /* 使用 Flex 布局 */
-        justify-content: center; /* 水平居中对齐 */
+        display: flex;
+        justify-content: center;
       }
 
       .button {
-        margin: 0 10px; /* 按钮之间的间距 */
-        padding: 6px 10px; /* 按钮内边距 */
-        background-color: #3498db; /* 按钮背景颜色 */
-        color: #ffffff; /* 按钮文字颜色 */
-        border: none; /* 去除边框 */
-        border-radius: 5px; /* 圆角边框 */
-        cursor: pointer; /* 鼠标指针样式 */
+        margin: 0 10px;
+        padding: 6px 10px;
+        background-color: #3498db;
+        color: #ffffff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
       }
     </style>
   </head>
@@ -46,6 +41,7 @@
     <div class="button-container">
       <button id="drawFineArrow" class="button">直箭头</button>
       <button id="drawAttackArrow" class="button">进攻方向箭头</button>
+      <button id="drawSwallowtailAttackArrow" class="button">燕尾进攻方向箭头</button>
     </div>
 
     <script>

src/arrow/attack-arrow.ts

@@ -122,7 +122,6 @@ export default class AttackArrow extends Draw {
     const tailWidth = len * tailWidthFactor;
     const neckWidth = Utils.MathDistance(neckLeft, neckRight);
     const widthDif = (tailWidth - neckWidth) / 2;
-    // eslint-disable-next-line
     let [tempLen, leftBodyPnts, rightBodyPnts] = [0, [], []];
     for (let i = 1; i < points.length - 1; i++) {
       const angle = Utils.getAngleOfThreePoints(points[i - 1], points[i], points[i + 1]) / 2;

src/arrow/swallowtail-attack-arrow.ts

@@ -0,0 +1,64 @@
+import * as Utils from '../utils';
+import AttackArrow from './attack-arrow';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class SwallowtailAttackArrow extends AttackArrow {
+  points: Cartesian3[] = [];
+  headHeightFactor: number;
+  headWidthFactor: number;
+  neckHeightFactor: number;
+  neckWidthFactor: number;
+  headTailFactor: number;
+  tailWidthFactor: number;
+  swallowTailFactor: number;
+  swallowTailPnt: [number, 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.headTailFactor = 0.8;
+    this.swallowTailFactor = 1;
+    this.swallowTailPnt = [0, 0];
+    this.cesium = cesium;
+  }
+
+  /**
+   * Generate geometric shapes based on key points.
+   */
+  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+    let [tailLeft, tailRight] = [lnglatPoints[0], lnglatPoints[1]];
+    if (Utils.isClockWise(lnglatPoints[0], lnglatPoints[1], lnglatPoints[2])) {
+      tailLeft = lnglatPoints[1];
+      tailRight = lnglatPoints[0];
+    }
+    const midTail = Utils.Mid(tailLeft, tailRight);
+    const bonePnts = [midTail].concat(lnglatPoints.slice(2));
+    const headPnts = this.getArrowHeadPoints(bonePnts, tailLeft, tailRight);
+    const [neckLeft, neckRight] = [headPnts[0], headPnts[4]];
+    const tailWidth = Utils.MathDistance(tailLeft, tailRight);
+    const allLen = Utils.getBaseLength(bonePnts);
+    const len = allLen * this.tailWidthFactor * this.swallowTailFactor;
+    this.swallowTailPnt = Utils.getThirdPoint(bonePnts[1], bonePnts[0], 0, len, true);
+    const factor = tailWidth / allLen;
+    const bodyPnts = this.getArrowBodyPoints(bonePnts, neckLeft, neckRight, factor);
+    const count = bodyPnts.length;
+    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2));
+    leftPnts.push(neckLeft);
+    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count));
+    rightPnts.push(neckRight);
+    leftPnts = Utils.getQBSplinePoints(leftPnts);
+    rightPnts = Utils.getQBSplinePoints(rightPnts);
+    const points = leftPnts.concat(headPnts, rightPnts.reverse(), [this.swallowTailPnt, leftPnts[0]]);
+    const temp = [].concat(...points);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+}

src/draw.ts

@@ -217,7 +217,6 @@ export default class Draw {
         const cartesian = this.viewer.camera.pickEllipsoid(moveEvent.endPosition, this.viewer.scene.globe.ellipsoid);
         if (cartesian) {
           draggedIcon.position.setValue(cartesian);
-          console.error(123);
           this.updateDraggingPoint(cartesian, draggedIcon.index);
         }
       }

src/index.ts

@@ -1,9 +1,11 @@
 import FineArrow from './arrow/fine-arrow';
 import AttackArrow from './arrow/attack-arrow';
+import SwallowtailAttackArrow from './arrow/swallowtail-attack-arrow';
 
 const CesiumPlot = {
   FineArrow,
   AttackArrow,
+  SwallowtailAttackArrow,
 };
 
 export default CesiumPlot;

src/utils.ts

@@ -171,7 +171,7 @@ export const getCubicValue = (t, startPnt, cPnt1, cPnt2, endPnt) => {
  * @param clockWise
  * @returns {[*,*]}
  */
-export const getThirdPoint = (startPnt, endPnt, angle, distance, clockWise) => {
+export const getThirdPoint = (startPnt, endPnt, angle, distance, clockWise): [number, number] => {
   const azimuth = getAzimuth(startPnt, endPnt);
   const alpha = clockWise ? azimuth + angle : azimuth - angle;
   const dx = distance * Math.cos(alpha);