update CurvedArrow and style

examples/index.ts

@@ -40,13 +40,19 @@ buttonGroup.onclick = (evt) => {
   const targetElement = evt.target as HTMLElement;
   switch (targetElement.id) {
     case 'drawFineArrow':
-      new CesiumPlot.FineArrow(Cesium, viewer, {});
+      new CesiumPlot.FineArrow(Cesium, viewer, {
+        fillColor: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
+      });
       break;
     case 'drawAttackArrow':
-      new CesiumPlot.AttackArrow(Cesium, viewer, {});
+      new CesiumPlot.AttackArrow(Cesium, viewer, {
+        outlineColor: Cesium.Color.RED,
+      });
       break;
     case 'drawSwallowtailAttackArrow':
-      new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {});
+      new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
+        outlineColor: Cesium.Color.BLUE,
+      });
       break;
     case 'drawSquadCombat':
       new CesiumPlot.SquadCombat(Cesium, viewer, {});
@@ -55,16 +61,22 @@ buttonGroup.onclick = (evt) => {
       new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer, {});
       break;
     case 'drawStraightArrow':
-      new CesiumPlot.StraightArrow(Cesium, viewer, {});
+      new CesiumPlot.StraightArrow(Cesium, viewer, {
+        lineColor: Cesium.Color.RED,
+      });
       break;
     case 'drawAssaultDirection':
       new CesiumPlot.AssaultDirection(Cesium, viewer, {});
       break;
     case 'drawCurvedArrow':
-      new CesiumPlot.CurvedArrow(Cesium, viewer, {});
+      new CesiumPlot.CurvedArrow(Cesium, viewer, {
+        lineColor: Cesium.Color.BLUE,
+      });
       break;
     case 'drawDoubleArrow':
-      new CesiumPlot.DoubleArrow(Cesium, viewer, {});
+      new CesiumPlot.DoubleArrow(Cesium, viewer, {
+        outlineColor: Cesium.Color.GREEN,
+      });
       break;
     case 'drawFreehandLine':
       new CesiumPlot.FreehandLine(Cesium, viewer, {});

src/arrow/attack-arrow.ts

@@ -13,7 +13,7 @@ export default class AttackArrow extends Base {
   headTailFactor: number;
   type: 'polygon' | 'line';
 
-    constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style: PolygonStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
@@ -48,7 +48,7 @@ export default class AttackArrow extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.drawLine();
+      this.addFirstLineOfTheArrow();
     } else {
       const geometryPoints = this.createPolygon(tempPoints);
       this.setGeometryPoints(geometryPoints);

src/arrow/curved-arrow.ts

@@ -11,7 +11,7 @@ export default class CurvedArrow extends Base {
   type: 'polygon' | 'line';
   t: number;
 
-    constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style: PolygonStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'line';
@@ -38,14 +38,26 @@ export default class CurvedArrow extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
+    let geometryPoints = [];
     if (tempPoints.length === 2) {
-      this.setGeometryPoints(tempPoints);
+      geometryPoints = this.createStraightArrow(tempPoints);
-      this.drawLine();
     } else {
-      const geometryPoints = this.createLine(tempPoints);
+      geometryPoints = this.createLine(tempPoints);
-      this.setGeometryPoints(geometryPoints);
-      this.drawLine();
     }
+    this.setGeometryPoints(geometryPoints);
+      this.drawLine();
+  }
+
+  createStraightArrow(positions: Cartesian3[]) {
+    const [pnt1, pnt2] = positions.map(this.cartesianToLnglat);
+    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 points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt];
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
+    return cartesianPoints;
   }
 
   /**

src/arrow/double-arrow.ts

@@ -53,7 +53,7 @@ export default class DoubleArrow extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.drawLine();
+      this.addFirstLineOfTheArrow();
     } else if (tempPoints.length > 2) {
       const geometryPoints = this.createPolygon(tempPoints);
       this.setGeometryPoints(geometryPoints);

src/arrow/straight-arrow.ts

@@ -2,7 +2,7 @@ import * as Utils from '../utils';
 import Base from '../base';
 // @ts-ignore
 import { Cartesian3 } from '@examples/cesium';
-import { PolygonStyle } from '../interface';
+import { LineStyle } from '../interface';
 
 export default class StraightArrow extends Base {
   points: Cartesian3[] = [];
@@ -10,7 +10,7 @@ export default class StraightArrow extends Base {
   maxArrowLength: number = 3000000;
   type: 'polygon' | 'line';
 
-    constructor(cesium: any, viewer: any, style: PolygonStyle) {
+    constructor(cesium: any, viewer: any, style: LineStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'line';

src/base.ts

@@ -169,17 +169,35 @@ export default class Base {
 
   drawLine() {
     if (!this.lineEntity) {
-      this.lineEntity = this.viewer.entities.add({
+      const style = this.style as LineStyle;
-        polyline: {
+      this.lineEntity = this.addLineEntity(style);
-          positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
-          width: 2,
-          material: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
-          clampToGround: true,
-        },
-      });
     }
   }
 
+  addFirstLineOfTheArrow() {
+    if (!this.lineEntity) {
+      // The line style between the first two points matches the outline style.
+      const style = this.style as PolygonStyle;
+      const lineStyle = {
+        lineColor: style.outlineColor,
+        lineWidth: style.outlineWidth,
+      };
+      this.lineEntity = this.addLineEntity(lineStyle);
+    }
+  }
+
+  addLineEntity(style: LineStyle) {
+    const entity = this.viewer.entities.add({
+      polyline: {
+        positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
+        width: style.lineWidth || 2,
+        material: style.lineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+        clampToGround: true,
+      },
+    });
+    return entity;
+  }
+
   cartesianToLnglat(cartesian: CesiumTypeOnly.Cartesian3): [number, number] {
     const lnglat = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
     const lat = this.cesium.Math.toDegrees(lnglat.latitude);

src/interface.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import * as CesiumTypeOnly from '@examples/cesium';
 
 export type PolygonStyle = {
@@ -7,7 +8,7 @@ export type PolygonStyle = {
 };
 
 export type LineStyle = {
-  color?: CesiumTypeOnly.Color;
+  lineColor?: CesiumTypeOnly.Color;
   lineWidth?: number;
 };