feat: add dynamic option to control particle animation

- Add new `dynamic` option to WindLayerOptions to control particle animation state - Add dynamic switch control in ControlPanel component - Set default value of dynamic option to true - Update types and documentation This change allows users to toggle between animated and static particle states.
hongfaqiu · Nov 6, 2024 · 770381e · 770381e
1 parent 3fdaa14
commit 770381e
Show file tree

Hide file tree

Showing 10 changed files with 2,729 additions and 3,354 deletions.
diff --git a/.changeset/strong-dryers-hug.md b/.changeset/strong-dryers-hug.md
@@ -0,0 +1,13 @@
+---
+'cesium-wind-layer': minor
+'example': minor
+---
+
+feat: add dynamic option to control particle animation
+
+- Add new `dynamic` option to WindLayerOptions to control particle animation state
+- Add dynamic switch control in ControlPanel component
+- Set default value of dynamic option to true
+- Update types and documentation
+
+This change allows users to toggle between animated and static particle states.
diff --git a/example/src/components/ControlPanel.tsx b/example/src/components/ControlPanel.tsx
@@ -400,6 +400,21 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                 />
               </CompactFormItem>
 
+              <CompactFormItem
+                name="dynamic"
+                label={renderLabel(
+                  'Dynamic Animation',
+                  'Enable or disable particle animation. When disabled, particles will remain static.'
+                )}
+                valuePropName="checked"
+              >
+                <Switch
+                  size="small"
+                  checkedChildren="Animated"
+                  unCheckedChildren="Static"
+                />
+              </CompactFormItem>
+
               <CompactFormItem
                 label={renderLabel(
                   'Speed Range',

diff --git a/example/src/pages/earth.tsx b/example/src/pages/earth.tsx
@@ -71,6 +71,7 @@ const defaultOptions: Partial<WindLayerOptions> = {
   colors: colorSchemes[3].colors,
   flipY: true,
   useViewerBounds: true,
+  dynamic: true,
   // Remove domain and speedFactor from here since they will be set dynamically
 };
 

diff --git a/packages/cesium-wind-layer/readme.md b/packages/cesium-wind-layer/readme.md
@@ -77,6 +77,7 @@ const windLayer = new WindLayer(viewer, windData, {
   flipY: false,               // Flip Y coordinates if needed
   domain: undefined,           // Optional: domain for speed
   displayRange: undefined,     // Optional: display range for speed
+  dynamic: true,              // Whether to enable dynamic particle animation
 });
 ```
 
@@ -107,6 +108,7 @@ interface WindLayerOptions {
     min?: number;             // Minimum speed value for display
     max?: number;             // Maximum speed value for display
   };
+  dynamic: boolean;          // Whether to enable dynamic particle animation. Default is true.
 }
 ```
 

diff --git a/packages/cesium-wind-layer/readme.zh-CN.md b/packages/cesium-wind-layer/readme.zh-CN.md
@@ -76,7 +76,8 @@ const windLayer = new WindLayer(viewer, windData, {
   colors: ['white'],         // 粒子颜色
   flipY: false,              // 是否翻转 Y 坐标
   domain: undefined,         // 速度渲染范围
-  displayRange: undefined    // 速度显示范围
+  displayRange: undefined,    // 速度显示范围
+  dynamic: true              // 是否启用动态粒子动画
 });
 ```
 
@@ -106,7 +107,8 @@ interface WindLayerOptions {
   displayRange?: {            // 速度显示范围（默认：undefined）
     min?: number;             // 最小速度值
     max?: number;             // 最大速度值
-  };
+    };
+  dynamic: boolean;          // 是否启用动态粒子动画（默认：true）
 }
 ```
 

diff --git a/packages/cesium-wind-layer/src/customPrimitive.ts b/packages/cesium-wind-layer/src/customPrimitive.ts
@@ -18,6 +18,7 @@ import {
 } from 'cesium';
 
 interface CustomPrimitiveOptions {
+  isDynamic?: () => boolean;
   commandType: 'Draw' | 'Compute';
   geometry?: Geometry;
   attributeLocations?: { [key: string]: number };
@@ -48,6 +49,7 @@ export default class CustomPrimitive {
   show: boolean;
   commandToExecute?: DrawCommand | ComputeCommand;
   clearCommand?: ClearCommand;
+  isDynamic: () => boolean;
 
   constructor(options: CustomPrimitiveOptions) {
     this.commandType = options.commandType;
@@ -66,7 +68,8 @@ export default class CustomPrimitive {
     this.show = true;
     this.commandToExecute = undefined;
     this.clearCommand = undefined;
-
+    this.isDynamic = options.isDynamic ?? (() => true);
+
     if (this.autoClear) {
       this.clearCommand = new ClearCommand({
         color: new Color(0.0, 0.0, 0.0, 0.0),
@@ -131,6 +134,10 @@ export default class CustomPrimitive {
   }
 
   update(frameState: any) {
+    if (!this.isDynamic()) {
+      return;
+    }
+
     if (!this.show || !defined(frameState)) {
       return;
     }

diff --git a/packages/cesium-wind-layer/src/index.ts b/packages/cesium-wind-layer/src/index.ts
@@ -43,7 +43,8 @@ export class WindLayer {
     flipY: false,
     useViewerBounds: false,
     domain: undefined,
-    displayRange: undefined
+    displayRange: undefined,
+    dynamic: true
   }
 
   viewer: Viewer;

diff --git a/packages/cesium-wind-layer/src/types.ts b/packages/cesium-wind-layer/src/types.ts
@@ -60,6 +60,11 @@ export interface WindLayerOptions {
     min?: number;
     max?: number;
   };
+  /**
+   * Whether to enable dynamic particle animation. Default is true.
+   * When set to false, particles will remain static.
+   */
+  dynamic: boolean;
 }
 
 export interface WindDataDemention {

diff --git a/packages/cesium-wind-layer/src/windParticlesComputing.ts b/packages/cesium-wind-layer/src/windParticlesComputing.ts
@@ -167,7 +167,8 @@ export class WindParticlesComputing {
           if (this.primitives.calculateSpeed.commandToExecute) {
             this.primitives.calculateSpeed.commandToExecute.outputTexture = this.particlesTextures.particlesSpeed;
           }
-        }
+        },
+        isDynamic: () =>this.options.dynamic
       }),
 
       updatePosition: new CustomPrimitive({
@@ -182,7 +183,8 @@ export class WindParticlesComputing {
           if (this.primitives.updatePosition.commandToExecute) {
             this.primitives.updatePosition.commandToExecute.outputTexture = this.particlesTextures.nextParticlesPosition;
           }
-        }
+        },
+        isDynamic: () => this.options.dynamic
       }),
 
       postProcessingPosition: new CustomPrimitive({
@@ -207,7 +209,8 @@ export class WindParticlesComputing {
           if (this.primitives.postProcessingPosition.commandToExecute) {
             this.primitives.postProcessingPosition.commandToExecute.outputTexture = this.particlesTextures.postProcessingPosition;
           }
-        }
+        },
+        isDynamic: () => this.options.dynamic
       })
     };
   }