Extend Styling to Material

examples/index.ts

@@ -23,7 +23,6 @@ const viewer = new Cesium.Viewer('cesiumContainer', {
   navigationHelpButton: false,
   baseLayerPicker: false,
   imageryProvider: raster,
-  // imageryProvider: raster,
   contextOptions: {
     requestWebgl2: true,
   },
@@ -56,28 +55,35 @@ buttonGroup.onclick = (evt) => {
   switch (targetElement.id) {
     case 'drawFineArrow':
       geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
-        fillColor: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
+        material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
+        outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
+        outlineWidth: 3,
       });
       break;
     case 'drawAttackArrow':
       geometry = new CesiumPlot.AttackArrow(Cesium, viewer, {
-        outlineColor: Cesium.Color.RED,
+        outlineMaterial: Cesium.Color.RED,
       });
       break;
     case 'drawSwallowtailAttackArrow':
       geometry = new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
-        outlineColor: Cesium.Color.BLUE,
+        outlineMaterial: Cesium.Color.BLUE,
       });
       break;
     case 'drawSquadCombat':
-      geometry = new CesiumPlot.SquadCombat(Cesium, viewer);
+      geometry = new CesiumPlot.SquadCombat(Cesium, viewer, {
+        outlineMaterial: new Cesium.PolylineDashMaterialProperty({
+          color: Cesium.Color.RED,
+          dashLength: 16.0,
+        }),
+      });
       break;
     case 'drawSwallowtailSquadCombat':
       geometry = new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
       break;
     case 'drawStraightArrow':
       geometry = new CesiumPlot.StraightArrow(Cesium, viewer, {
-        lineColor: Cesium.Color.RED,
+        material: Cesium.Color.RED,
       });
       break;
     case 'drawAssaultDirection':
@@ -85,12 +91,12 @@ buttonGroup.onclick = (evt) => {
       break;
     case 'drawCurvedArrow':
       geometry = new CesiumPlot.CurvedArrow(Cesium, viewer, {
-        lineColor: Cesium.Color.BLUE,
+        material: Cesium.Color.BLUE,
       });
       break;
     case 'drawDoubleArrow':
       geometry = new CesiumPlot.DoubleArrow(Cesium, viewer, {
-        outlineColor: Cesium.Color.GREEN,
+        outlineMaterial: Cesium.Color.GREEN,
       });
       break;
     case 'drawFreehandLine':
@@ -101,7 +107,6 @@ buttonGroup.onclick = (evt) => {
       break;
     case 'hide':
       geometry && geometry.hide();
-      // setTimeout(getCameraInfo, 2000);
       break;
     case 'show':
       geometry && geometry.show();

src/base.ts

@@ -31,8 +31,8 @@ export default class Base {
     if (this.type === 'polygon') {
       this.style = Object.assign(
         {
-          fillColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
+          material: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
-          outlineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          outlineMaterial: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
           outlineWidth: 2,
         },
         style,
@@ -40,7 +40,7 @@ export default class Base {
     } else if (this.type === 'line') {
       this.style = Object.assign(
         {
-          lineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          material: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
           lineWidth: 2,
         },
         style,
@@ -168,7 +168,7 @@ export default class Base {
         polygon: new this.cesium.PolygonGraphics({
           hierarchy: new this.cesium.CallbackProperty(callback, false),
           show: true,
-          material: style.fillColor,
+          material: style.material,
         }),
       });
 
@@ -179,7 +179,7 @@ export default class Base {
             return [...this.geometryPoints, this.geometryPoints[0]];
           }, false),
           width: style.outlineWidth,
-          material: style.outlineColor,
+          material: style.outlineMaterial,
           clampToGround: true,
         },
       });
@@ -198,7 +198,7 @@ export default class Base {
       // The line style between the first two points matches the outline style.
       const style = this.style as PolygonStyle;
       const lineStyle = {
-        lineColor: style.outlineColor,
+        material: style.outlineMaterial,
         lineWidth: style.outlineWidth,
       };
       this.lineEntity = this.addLineEntity(lineStyle);
@@ -210,7 +210,7 @@ export default class Base {
       polyline: {
         positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
         width: style.lineWidth,
-        material: style.lineColor,
+        material: style.material,
         clampToGround: true,
       },
     });

src/interface.ts

@@ -2,13 +2,13 @@
 import * as CesiumTypeOnly from '@examples/cesium';
 
 export type PolygonStyle = {
-  fillColor?: CesiumTypeOnly.Color;
+  material?: CesiumTypeOnly.MaterialProperty;
   outlineWidth?: number;
-  outlineColor?: CesiumTypeOnly.Color;
+  outlineMaterial?: CesiumTypeOnly.MaterialProperty;
 };
 
 export type LineStyle = {
-  lineColor?: CesiumTypeOnly.Color;
+  material?: CesiumTypeOnly.Color;
   lineWidth?: number;
 };