update style

examples/index.ts

@@ -55,10 +55,10 @@ buttonGroup.onclick = (evt) => {
       });
       break;
     case 'drawSquadCombat':
-      new CesiumPlot.SquadCombat(Cesium, viewer, {});
+      new CesiumPlot.SquadCombat(Cesium, viewer);
       break;
     case 'drawSwallowtailSquadCombat':
-      new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer, {});
+      new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
       break;
     case 'drawStraightArrow':
       new CesiumPlot.StraightArrow(Cesium, viewer, {
@@ -66,7 +66,7 @@ buttonGroup.onclick = (evt) => {
       });
       break;
     case 'drawAssaultDirection':
-      new CesiumPlot.AssaultDirection(Cesium, viewer, {});
+      new CesiumPlot.AssaultDirection(Cesium, viewer);
       break;
     case 'drawCurvedArrow':
       new CesiumPlot.CurvedArrow(Cesium, viewer, {
@@ -79,10 +79,10 @@ buttonGroup.onclick = (evt) => {
       });
       break;
     case 'drawFreehandLine':
-      new CesiumPlot.FreehandLine(Cesium, viewer, {});
+      new CesiumPlot.FreehandLine(Cesium, viewer);
       break;
     case 'drawFreehandPolygon':
-      new CesiumPlot.FreehandPolygon(Cesium, viewer, {});
+      new CesiumPlot.FreehandPolygon(Cesium, viewer);
       break;
 
     default:

src/arrow/assault-direction.ts

@@ -13,12 +13,10 @@ export default class AssaultDirection extends FineArrow {
   headWidthFactor: number;
   headAngle: number;
   neckAngle: 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';
     this.tailWidthFactor = 0.08;
     this.neckWidthFactor = 0.1;
     this.headWidthFactor = 0.13;

src/arrow/attack-arrow.ts

@@ -11,12 +11,10 @@ export default class AttackArrow extends Base {
   neckHeightFactor: number;
   neckWidthFactor: number;
   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';
     this.headHeightFactor = 0.18;
     this.headWidthFactor = 0.3;
     this.neckHeightFactor = 0.85;
@@ -26,6 +24,10 @@ export default class AttackArrow extends Base {
     this.onDoubleClick();
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
   /**
    * Add points only on click events
    */

src/arrow/curved-arrow.ts

@@ -2,24 +2,26 @@ 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 CurvedArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 3000000;
-  type: 'polygon' | 'line';
   t: number;
 
-  constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style?: LineStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
-    this.type = 'line';
     this.t = 0.3;
     this.setState('drawing');
     this.onDoubleClick();
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'line';
+  }
+
   /**
    * Add points only on click events
    */
@@ -45,13 +47,13 @@ export default class CurvedArrow extends Base {
       geometryPoints = this.createLine(tempPoints);
     }
     this.setGeometryPoints(geometryPoints);
-      this.drawLine();
+    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);

src/arrow/double-arrow.ts

@@ -11,16 +11,14 @@ export default class DoubleArrow extends Base {
   maxArrowLength: number = 2;
   neckWidthFactor: number;
   headWidthFactor: number;
-  type: 'polygon' | 'line';
   headHeightFactor: number;
   neckHeightFactor: number;
   connPoint: Position;
   tempPoint4: Position;
 
-    constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
-    this.type = 'polygon';
     this.headHeightFactor = 0.25;
     this.headWidthFactor = 0.3;
     this.neckHeightFactor = 0.85;
@@ -30,6 +28,10 @@ export default class DoubleArrow extends Base {
     this.setState('drawing');
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
   /**
    * Add points only on click events
    */

src/arrow/fine-arrow.ts

@@ -13,12 +13,10 @@ export default class FineArrow extends Base {
   headWidthFactor: number;
   headAngle: number;
   neckAngle: 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';
     this.tailWidthFactor = 0.1;
     this.neckWidthFactor = 0.2;
     this.headWidthFactor = 0.25;
@@ -27,6 +25,10 @@ export default class FineArrow extends Base {
     this.setState('drawing');
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
   /**
    * Add points only on click events
    */

src/arrow/squad-combat.ts

@@ -11,12 +11,10 @@ export default class SquadCombat extends AttackArrow {
   neckHeightFactor: number;
   neckWidthFactor: number;
   tailWidthFactor: 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';
     this.headHeightFactor = 0.18;
     this.headWidthFactor = 0.3;
     this.neckHeightFactor = 0.85;

src/arrow/straight-arrow.ts

@@ -8,15 +8,17 @@ export default class StraightArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 3000000;
-  type: 'polygon' | 'line';
 
-    constructor(cesium: any, viewer: any, style: LineStyle) {
+  constructor(cesium: any, viewer: any, style?: LineStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
-    this.type = 'line';
     this.setState('drawing');
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'line';
+  }
+
   /**
    * Add points only on click events
    */

src/arrow/swallowtail-attack-arrow.ts

@@ -14,13 +14,10 @@ export default class SwallowtailAttackArrow extends AttackArrow {
   tailWidthFactor: number;
   swallowTailFactor: number;
   swallowTailPnt: [number, 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';
     this.headHeightFactor = 0.18;
     this.headWidthFactor = 0.3;
     this.neckHeightFactor = 0.85;

src/arrow/swallowtail-squad-combat.ts

@@ -12,13 +12,11 @@ export default class SwallowtailSquadCombat extends SquadCombat {
   neckWidthFactor: number;
   tailWidthFactor: number;
   swallowTailFactor: 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';
     this.headHeightFactor = 0.18;
     this.headWidthFactor = 0.3;
     this.neckHeightFactor = 0.85;

src/base.ts

@@ -14,18 +14,40 @@ export default class Base {
   lineEntity: CesiumTypeOnly.Entity;
   type!: 'polygon' | 'line';
   freehand!: boolean;
-  style: GeometryStyle;
+  style: GeometryStyle | undefined;
   outlineEntity: CesiumTypeOnly.Entity;
 
-  constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style: GeometryStyle) {
+  constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style?: GeometryStyle) {
     this.cesium = cesium;
     this.viewer = viewer;
-    this.style = style;
+    this.type = this.getType();
+    this.mergeStyle(style);
     this.cartesianToLnglat = this.cartesianToLnglat.bind(this);
     this.pixelToCartesian = this.pixelToCartesian.bind(this);
     this.onClick();
   }
 
+  mergeStyle(style: GeometryStyle | undefined) {
+    if (this.type === 'polygon') {
+      this.style = Object.assign(
+        {
+          fillColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
+          outlineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          outlineWidth: 2,
+        },
+        style,
+      );
+    } else if (this.type === 'line') {
+      this.style = Object.assign(
+        {
+          lineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          lineWidth: 2,
+        },
+        style,
+      );
+    }
+  }
+
   /**
    * The base class provides a method to change the state, and different logic is implemented based on the state.
    *  The state is controlled by individual sub-components according to the actual situation.
@@ -147,9 +169,7 @@ export default class Base {
         polygon: new this.cesium.PolygonGraphics({
           hierarchy: new this.cesium.CallbackProperty(callback, false),
           show: true,
-          // fill: true,
+          material: style.fillColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
-          // material: this.cesium.Color.LIGHTSKYBLUE.withAlpha(0.8),
-          material: style.fillColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
         }),
       });
 
@@ -159,8 +179,8 @@ export default class Base {
           positions: new this.cesium.CallbackProperty(() => {
             return [...this.geometryPoints, this.geometryPoints[0]];
           }, false),
-          width: style.outlineWidth || 2,
+          width: style.outlineWidth, // || 2,
-          material: style.outlineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          material: style.outlineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
           clampToGround: true,
         },
       });
@@ -190,8 +210,8 @@ export default class Base {
     const entity = this.viewer.entities.add({
       polyline: {
         positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
-        width: style.lineWidth || 2,
+        width: style.lineWidth, // || 2,
-        material: style.lineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+        material: style.lineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
         clampToGround: true,
       },
     });
@@ -286,6 +306,24 @@ export default class Base {
     }
   }
 
+  show() {
+    if (this.type === 'polygon') {
+      this.polygonEntity.show = true;
+      this.outlineEntity.show = true;
+    } else if (this.type === 'line') {
+      this.lineEntity.show = true;
+    }
+  }
+
+  hide() {
+    if (this.type === 'polygon') {
+      this.polygonEntity.show = false;
+      this.outlineEntity.show = false;
+    } else if (this.type === 'line') {
+      this.lineEntity.show = false;
+    }
+  }
+
   addPoint(cartesian: CesiumTypeOnly.Cartesian3) {
     //Abstract method that must be implemented by subclasses.
   }
@@ -302,4 +340,9 @@ export default class Base {
   updateDraggingPoint(cartesian: CesiumTypeOnly.Cartesian3, index: number) {
     //Abstract method that must be implemented by subclasses.
   }
+
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+    //Abstract method that must be implemented by subclasses.
+  }
 }

src/line/freehand-line.ts

@@ -5,17 +5,19 @@ import { PolygonStyle } from '../interface';
 
 export default class FreehandLine extends Base {
   points: Cartesian3[] = [];
-  type: 'polygon' | 'line';
   freehand: boolean;
 
-  constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
-    this.type = 'line';
     this.freehand = true;
     this.setState('drawing');
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'line';
+  }
+
   /**
    * Add points only on click events
    */

src/polygon/freehand-polygon.ts

@@ -5,17 +5,19 @@ import { PolygonStyle } from '../interface';
 
 export default class FreehandPolygon extends Base {
   points: Cartesian3[] = [];
-  type: 'polygon' | 'line';
   freehand: boolean;
 
-  constructor(cesium: any, viewer: any, style: PolygonStyle) {
+  constructor(cesium: any, viewer: any, style?: PolygonStyle) {
     super(cesium, viewer, style);
     this.cesium = cesium;
-    this.type = 'polygon';
     this.freehand = true;
     this.setState('drawing');
   }
 
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
   /**
    * Add points only on click events
    */