add AssaultDirection

examples/index.ts

@@ -64,3 +64,8 @@ const straightArrow = document.getElementById('drawStraightArrow') as HTMLElemen
 straightArrow.onclick = () => {
   new CesiumPlot.StraightArrow(Cesium, viewer, {});
 };
+
+const assaultDirection = document.getElementById('drawAssaultDirection') as HTMLElement;
+assaultDirection.onclick = () => {
+  new CesiumPlot.AssaultDirection(Cesium, viewer, {});
+};

index.html

@@ -45,8 +45,8 @@
       <button id="drawSwallowtailAttackArrow" class="button">进攻方向箭头(燕尾)</button>
       <button id="drawSquadCombat" class="button">分队战斗方向</button>
       <button id="drawSwallowtailSquadCombat" class="button">分队战斗方向(燕尾)</button>
+      <button id="drawAssaultDirection" class="button">突击方向</button>
     </div>
-
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';
     </script>

src/arrow/assault-direction.ts

@@ -0,0 +1,44 @@
+import FineArrow from './fine-arrow';
+import * as Utils from '../utils';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class AssaultDirection extends FineArrow {
+  points: Cartesian3[] = [];
+  arrowLengthScale: number = 5;
+  maxArrowLength: number = 2;
+  tailWidthFactor: number;
+  neckWidthFactor: number;
+  headWidthFactor: number;
+  headAngle: number;
+  neckAngle: number;
+  type: 'polygon' | 'line';
+
+  constructor(cesium: any, viewer: any, style: any) {
+    super(cesium, viewer, {});
+    this.cesium = cesium;
+    this.type = 'polygon';
+    this.tailWidthFactor = 0.08;
+    this.neckWidthFactor = 0.1;
+    this.headWidthFactor = 0.13;
+    this.headAngle = Math.PI / 4;
+    this.neckAngle = Math.PI * 0.17741;
+    this.setState('drawing');
+  }
+
+  createPolygon(positions: Cartesian3[]) {
+    const [p1, p2] = positions.map(this.cartesianToLnglat);
+    const len = Utils.getBaseLength([p1, p2]) * 1.5;
+    const tailWidth = len * this.tailWidthFactor;
+    const neckWidth = len * this.neckWidthFactor;
+    const headWidth = len * this.headWidthFactor;
+    const tailLeft = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, true);
+    const tailRight = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, false);
+    const headLeft = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, false);
+    const headRight = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, true);
+    const neckLeft = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, false);
+    const neckRight = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, true);
+    const points = [...tailLeft, ...neckLeft, ...headLeft, ...p2, ...headRight, ...neckRight, ...tailRight, ...p1];
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
+    return cartesianPoints;
+  }
+}

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 AssaultDirection from './arrow/assault-direction';
 
 const CesiumPlot = {
   FineArrow,
@@ -12,6 +13,7 @@ const CesiumPlot = {
   SquadCombat,
   SwallowtailSquadCombat,
   StraightArrow,
+  AssaultDirection,
 };
 
 export default CesiumPlot;