add growth animation

src/arrow/assault-direction.ts

@@ -13,6 +13,7 @@ export default class AssaultDirection extends FineArrow {
   headWidthFactor: number;
   headAngle: number;
   neckAngle: number;
+  minPointsForShape: number;
 
   constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
@@ -22,10 +23,11 @@ export default class AssaultDirection extends FineArrow {
     this.headWidthFactor = 0.13;
     this.headAngle = Math.PI / 4;
     this.neckAngle = Math.PI * 0.17741;
+    this.minPointsForShape = 2;
     this.setState('drawing');
   }
 
-  createPolygon(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const [p1, p2] = positions.map(this.cartesianToLnglat);
     const len = Utils.getBaseLength([p1, p2]) * 1.5;
     const tailWidth = len * this.tailWidthFactor;

src/arrow/attack-arrow.ts

@@ -11,6 +11,7 @@ export default class AttackArrow extends Base {
   neckHeightFactor: number;
   neckWidthFactor: number;
   headTailFactor: number;
+  minPointsForShape: number;
 
   constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
@@ -20,6 +21,7 @@ export default class AttackArrow extends Base {
     this.neckHeightFactor = 0.85;
     this.neckWidthFactor = 0.15;
     this.headTailFactor = 0.8;
+    this.minPointsForShape = 3;
     this.setState('drawing');
     this.onDoubleClick();
   }
@@ -50,7 +52,7 @@ export default class AttackArrow extends Base {
     if (tempPoints.length === 2) {
       this.addFirstLineOfTheArrow();
     } else {
-      const geometryPoints = this.createPolygon(tempPoints);
+      const geometryPoints = this.createGraphic(tempPoints);
       this.setGeometryPoints(geometryPoints);
       this.drawPolygon();
     }
@@ -59,7 +61,7 @@ export default class AttackArrow extends Base {
   /**
    * Generate geometric shapes based on key points.
    */
-  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+  createGraphic(positions: Cartesian3[]): Cartesian3[] {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });
@@ -143,7 +145,7 @@ export default class AttackArrow extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createPolygon(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }

src/arrow/curved-arrow.ts

@@ -31,7 +31,7 @@ export default class CurvedArrow extends Base {
     this.points.push(cartesian);
     if (this.points.length < 2) {
       this.onMouseMove();
-    } 
+    }
   }
 
   /**
@@ -49,8 +49,8 @@ export default class CurvedArrow extends Base {
     const distance = Utils.MathDistance(pnt1, pnt2);
     let len = distance / this.arrowLengthScale;
     len = len > this.maxArrowLength ? this.maxArrowLength : len;
-    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
+    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false);
-    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
+    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true);
     const points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt];
     const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
     return cartesianPoints;
@@ -86,8 +86,8 @@ export default class CurvedArrow extends Base {
     const distance = Utils.wholeDistance(lnglatPoints);
     let len = distance / this.arrowLengthScale;
     len = len > this.maxArrowLength ? this.maxArrowLength : len;
-    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
+    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false);
-    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
+    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true);
     const temp = [].concat(...curvePoints);
     const points = [...temp, ...leftPnt, ...pnt2, ...rightPnt];
     const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);

src/arrow/fine-arrow.ts

@@ -13,6 +13,7 @@ export default class FineArrow extends Base {
   headWidthFactor: number;
   headAngle: number;
   neckAngle: number;
+  minPointsForShape: number;
 
   constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
@@ -22,6 +23,7 @@ export default class FineArrow extends Base {
     this.headWidthFactor = 0.25;
     this.headAngle = Math.PI / 8.5;
     this.neckAngle = Math.PI / 13;
+    this.minPointsForShape = 2;
     this.setState('drawing');
   }
 
@@ -38,7 +40,7 @@ export default class FineArrow extends Base {
       this.onMouseMove();
     }
     if (this.points.length === 2) {
-      const geometryPoints = this.createPolygon(this.points);
+      const geometryPoints = this.createGraphic(this.points);
       this.setGeometryPoints(geometryPoints);
       this.drawPolygon();
       this.finishDrawing();
@@ -50,7 +52,7 @@ export default class FineArrow extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createPolygon(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -60,7 +62,7 @@ export default class FineArrow extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createPolygon(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -68,7 +70,7 @@ export default class FineArrow extends Base {
   /**
    * Generate geometric shapes based on key points.
    */
-  createPolygon(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const [p1, p2] = positions.map(this.cartesianToLnglat);
     const len = Utils.getBaseLength([p1, p2]);
     const tailWidth = len * this.tailWidthFactor;

src/arrow/squad-combat.ts

@@ -20,6 +20,7 @@ export default class SquadCombat extends AttackArrow {
     this.neckHeightFactor = 0.85;
     this.neckWidthFactor = 0.15;
     this.tailWidthFactor = 0.1;
+    this.minPointsForShape = 2;
   }
 
   /**
@@ -43,7 +44,7 @@ export default class SquadCombat extends AttackArrow {
     if (tempPoints.length < 2) {
       return;
     } else {
-      const geometryPoints = this.createPolygon(tempPoints);
+      const geometryPoints = this.createGraphic(tempPoints);
       this.setGeometryPoints(geometryPoints);
       this.drawPolygon();
     }
@@ -52,7 +53,7 @@ export default class SquadCombat extends AttackArrow {
   /**
    * Generate geometric shapes based on key points.
    */
-  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+  createGraphic(positions: Cartesian3[]): Cartesian3[] {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/arrow/straight-arrow.ts

@@ -8,10 +8,12 @@ export default class StraightArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 3000000;
+  minPointsForShape: number;
 
   constructor(cesium: any, viewer: any, style?: LineStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
+    this.minPointsForShape = 2;
     this.setState('drawing');
   }
 
@@ -28,7 +30,7 @@ export default class StraightArrow extends Base {
       this.onMouseMove();
     }
     if (this.points.length === 2) {
-      const geometryPoints = this.createLine(this.points);
+      const geometryPoints = this.createGraphic(this.points);
       this.setGeometryPoints(geometryPoints);
       this.drawLine();
       this.finishDrawing();
@@ -40,7 +42,7 @@ export default class StraightArrow extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createLine(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawLine();
   }
@@ -50,7 +52,7 @@ export default class StraightArrow extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createLine(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawLine();
   }
@@ -58,13 +60,13 @@ export default class StraightArrow extends Base {
   /**
    * Generate geometric shapes based on key points.
    */
-  createLine(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const [pnt1, pnt2] = positions.map(this.cartesianToLnglat);
     const distance = Utils.MathDistance(pnt1, pnt2);
     let len = distance / this.arrowLengthScale;
     len = len > this.maxArrowLength ? this.maxArrowLength : len;
-    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
+    const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false);
-    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
+    const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true);
     const points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt];
     const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
     return cartesianPoints;

src/arrow/swallowtail-attack-arrow.ts

@@ -26,12 +26,13 @@ export default class SwallowtailAttackArrow extends AttackArrow {
     this.headTailFactor = 0.8;
     this.swallowTailFactor = 1;
     this.swallowTailPnt = [0, 0];
+    this.minPointsForShape = 3;
   }
 
   /**
    * Generate geometric shapes based on key points.
    */
-  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+  createGraphic(positions: Cartesian3[]): Cartesian3[] {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/arrow/swallowtail-squad-combat.ts

@@ -23,12 +23,13 @@ export default class SwallowtailSquadCombat extends SquadCombat {
     this.neckWidthFactor = 0.15;
     this.tailWidthFactor = 0.1;
     this.swallowTailFactor = 1;
+    this.minPointsForShape = 2;
   }
 
   /**
    * Generate geometric shapes based on key points.
    */
-  createPolygon(positions: Cartesian3[]): Cartesian3[] {
+  createGraphic(positions: Cartesian3[]): Cartesian3[] {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/base.ts

@@ -710,7 +710,7 @@ export default class Base {
         tempPoints[tempPoints.length - 1] = newPosition;
         const geometryPoints = this.createGraphic(tempPoints);
         this.setGeometryPoints(geometryPoints);
-        this.showAnimation(0, 0, undefined);
+        this.showWithAnimation(0, 0, undefined);
       };
       this.viewer.clock.onTick.addEventListener(frameListener);
     }, delay);

src/line/curve.ts

@@ -23,7 +23,7 @@ export default class Curve extends Base {
 	}
 
 	/**
-	 * 仅点击事件会添加点
+	 * Points are only added upon click events.
 	 */
 	addPoint(cartesian: Cartesian3) {
 		this.points.push(cartesian);
@@ -36,7 +36,7 @@ export default class Curve extends Base {
 	}
 
 	/**
-	 * 初次绘制时根据鼠标移动的点位绘制图形.
+	 * Draw the shape based on the mouse movement position during the initial drawing.
 	 */
 	updateMovingPoint(cartesian: Cartesian3) {
 		const tempPoints = [...this.points, cartesian];
@@ -45,25 +45,25 @@ export default class Curve extends Base {
 			this.setGeometryPoints(tempPoints);
 			this.drawLine();
 		} else {
-			geometryPoints = this.createLine(tempPoints);
+			geometryPoints = this.createGraphic(tempPoints);
 			this.setGeometryPoints(geometryPoints);
 		}
 	}
 
 	/**
-	 * 编辑状态下，拖拽关键点位，更新对应关键点位数据
+	 * During editing mode, drag key points to update the corresponding data.
 	 */
 	updateDraggingPoint(cartesian: Cartesian3, index: number) {
 		this.points[index] = cartesian;
-		const geometryPoints = this.createLine(this.points);
+		const geometryPoints = this.createGraphic(this.points);
 		this.setGeometryPoints(geometryPoints);
 		this.drawLine();
 	}
 
 	/**
-	 * 根据关键点生成几何图形点位.
+	 * Generate geometric shape points based on key points..
 	 */
-	createLine(positions: Cartesian3[]) {
+	createGraphic(positions: Cartesian3[]) {
 		const lnglatPoints = positions.map(pnt => {
 			return this.cartesianToLnglat(pnt);
 		});