feat: add event system for wind layer

- Add event system for data and options changes
- Add WindLayerEventType and WindLayerEventCallback types
- Implement addEventListener and removeEventListener methods
- Add event dispatching for data and options updates
- Improve texture recreation when updating wind data

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,22 @@
 # example
 
+## 0.4.0
+
+### Minor Changes
+
+- feat: add event system for wind layer
+
+  - Add event system for data and options changes
+  - Add WindLayerEventType and WindLayerEventCallback types
+  - Implement addEventListener and removeEventListener methods
+  - Add event dispatching for data and options updates
+  - Improve texture recreation when updating wind data
+
+### Patch Changes
+
+- Updated dependencies
+  - cesium-wind-layer@0.6.0
+
 ## 0.3.7
 
 ### Patch Changes

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "0.3.7",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

example/public/wind2.json

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Typography, Space, Button } from 'antd';
 import styled from 'styled-components';
 import { WindDataAtLonLat, WindLayer } from 'cesium-wind-layer';
@@ -140,6 +140,7 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
   const [queryResult, setQueryResult] = useState<WindData | null>(null);
   const [location, setLocation] = useState<{ lon: number; lat: number } | null>(null);
   const [showInterpolated, setShowInterpolated] = useState(true);
+  const lastLocationRef = useRef<{ lon: number; lat: number } | null>(null);
 
   const calculateWindDirection = (u: number, v: number): number => {
     // 使用 atan2 计算角度，注意参数顺序：atan2(y, x)
@@ -162,20 +163,12 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
   };
 
   useEffect(() => {
-    if (!viewer || !windLayer) return;
+    if (!windLayer) return;
 
-    const handler = new ScreenSpaceEventHandler(viewer.scene.canvas);
-    const handleClick = (movement: any) => {
-      const cartesian = viewer.camera.pickEllipsoid(movement.position);
-      if (cartesian) {
-        const cartographic = Cartographic.fromCartesian(cartesian);
-        const lon = CesiumMath.toDegrees(cartographic.longitude);
-        const lat = CesiumMath.toDegrees(cartographic.latitude);
-        
+    const handleDataChange = () => {
+      if (lastLocationRef.current) {
         try {
-          const result = windLayer.getDataAtLonLat(lon, lat);
-          setLocation({ lon, lat });
-          
+          const result = windLayer.getDataAtLonLat(lastLocationRef.current.lon, lastLocationRef.current.lat);
           if (result) {
             const data = showInterpolated ? result.interpolated : result.original;
             const direction = calculateWindDirection(data.u, data.v);
@@ -190,13 +183,56 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
       }
     };
 
+    // Add event listener for data changes
+    windLayer.addEventListener('dataChange', handleDataChange);
+
+    return () => {
+      // Remove event listener when component unmounts or windLayer changes
+      windLayer.removeEventListener('dataChange', handleDataChange);
+    };
+  }, [windLayer, showInterpolated]);
+
+  useEffect(() => {
+    if (!location || !windLayer) return;
+    
+    lastLocationRef.current = location;
+    
+    try {
+      const result = windLayer.getDataAtLonLat(location.lon, location.lat);
+      if (result) {
+        const data = showInterpolated ? result.interpolated : result.original;
+        const direction = calculateWindDirection(data.u, data.v);
+        setQueryResult({ ...result, direction });
+      } else {
+        setQueryResult(null);
+      }
+    } catch (error) {
+      console.error('Failed to get wind data:', error);
+      setQueryResult(null);
+    }
+  }, [windLayer, location, showInterpolated]);
+
+  useEffect(() => {
+    if (!viewer || !windLayer) return;
+
+    const handler = new ScreenSpaceEventHandler(viewer.scene.canvas);
+    const handleClick = (movement: any) => {
+      const cartesian = viewer.camera.pickEllipsoid(movement.position);
+      if (cartesian) {
+        const cartographic = Cartographic.fromCartesian(cartesian);
+        const lon = CesiumMath.toDegrees(cartographic.longitude);
+        const lat = CesiumMath.toDegrees(cartographic.latitude);
+        setLocation({ lon, lat });
+      }
+    };
+
     handler.setInputAction(handleClick, ScreenSpaceEventType.LEFT_CLICK);
     handler.setInputAction(handleClick, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
 
     return () => {
       handler.destroy();
     };
-  }, [viewer, windLayer, showInterpolated]);
+  }, [viewer, windLayer]);
 
   const currentData = queryResult ? (showInterpolated ? queryResult.interpolated : queryResult.original) : null;
 

example/src/components/SpeedQuery.tsx

@@ -27,7 +27,7 @@ const defaultOptions: Partial<WindLayerOptions> = {
   dropRate: 0.003,
   particleHeight: 1000,
   dropRateBump: 0.01,
-  speedFactor: 1.0,
+  speedFactor: 0.5,
   lineWidth: 10.0,
   colors: colorSchemes[3].colors,
   flipY: true,
@@ -37,8 +37,10 @@ const defaultOptions: Partial<WindLayerOptions> = {
 export function Earth() {
   const viewerRef = useRef<Viewer | null>(null);
   const windLayerRef = useRef<WindLayer | null>(null);
-  // Add state to trigger re-render when windLayer is ready
   const [, setIsWindLayerReady] = useState(false);
+  const dataIndexRef = useRef(0);
+  const windDataFiles = ['/wind.json', '/wind2.json'];
+  const isFirstLoadRef = useRef(true);
 
   useEffect(() => {
     let isComponentMounted = true;
@@ -75,18 +77,11 @@ export function Earth() {
     viewerRef.current.scene.verticalExaggeration = 2;
     // viewerRef.current.sceneModePicker.viewModel.duration = 0;
 
-    // Load wind data
-    const loadWindData = async () => {
-      // Skip if wind layer already exists or viewer is not initialized
-      if (windLayerRef.current || !viewerRef.current) {
-        return;
-      }
-
+    const initWindLayer = async () => {
       try {
-        const res = await fetch('/wind.json');
+        const res = await fetch(windDataFiles[0]);
         const data = await res.json();
 
-        // Check if component is still mounted
         if (!isComponentMounted || !viewerRef.current) return;
 
         const windData: WindData = {
@@ -99,7 +94,7 @@ export function Earth() {
           }
         };
 
-        if (windData.bounds) {
+        if (isFirstLoadRef.current && windData.bounds) {
           const rectangle = Rectangle.fromDegrees(
             windData.bounds.west,
             windData.bounds.south,
@@ -110,25 +105,66 @@ export function Earth() {
             destination: rectangle,
             duration: 0,
           });
+          isFirstLoadRef.current = false;
         }
 
         const layer = new WindLayer(viewerRef.current, windData, defaultOptions);
-        console.log('initailize windlayer', layer);
+        
+        // Add event listeners
+        layer.addEventListener('dataChange', (data) => {
+          console.log('Wind data updated:', data);
+          // Handle data change
+        });
+
+        layer.addEventListener('optionsChange', (options) => {
+          console.log('Options updated:', options);
+          // Handle options change
+        });
+
         windLayerRef.current = layer;
-        // Trigger re-render when windLayer is ready
         setIsWindLayerReady(true);
       } catch (error) {
-        console.error('Failed to load wind data:', error);
+        console.error('Failed to initialize wind layer:', error);
+      }
+    };
+
+    const updateWindData = async () => {
+      try {
+        const nextIndex = (dataIndexRef.current + 1) % windDataFiles.length;
+        const res = await fetch(windDataFiles[nextIndex]);
+        const data = await res.json();
+
+        if (!isComponentMounted || !windLayerRef.current) return;
+
+        const windData: WindData = {
+          ...data,
+          bounds: {
+            west: data.bbox[0],
+            south: data.bbox[1],
+            east: data.bbox[2],
+            north: data.bbox[3],
+          }
+        };
+
+        windLayerRef.current.updateWindData(windData);
+        dataIndexRef.current = nextIndex;
+      } catch (error) {
+        console.error('Failed to update wind data:', error);
       }
     };
 
-    loadWindData();
+    // Initialize wind layer
+    initWindLayer();
+
+    // Set up interval to update data
+    const intervalId = setInterval(updateWindData, 3000);
 
     return () => {
       isComponentMounted = false;
+      isFirstLoadRef.current = true;
+      clearInterval(intervalId);
 
       if (windLayerRef.current) {
-        console.log('destroy windlayer');
         windLayerRef.current.destroy();
         windLayerRef.current = null;
         setIsWindLayerReady(false);

example/src/pages/earth.tsx

@@ -1,5 +1,17 @@
 # cesium-wind-layer
 
+## 0.6.0
+
+### Minor Changes
+
+- feat: add event system for wind layer
+
+  - Add event system for data and options changes
+  - Add WindLayerEventType and WindLayerEventCallback types
+  - Implement addEventListener and removeEventListener methods
+  - Add event dispatching for data and options updates
+  - Improve texture recreation when updating wind data
+
 ## 0.5.3
 
 ### Patch Changes

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "cesium-wind-layer",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },

packages/cesium-wind-layer/package.json

@@ -12,6 +12,9 @@ import { WindParticleSystem } from './windParticleSystem';
 
 export * from './types';
 
+type WindLayerEventType = 'dataChange' | 'optionsChange';
+type WindLayerEventCallback = (data: WindData | WindLayerOptions) => void;
+
 export class WindLayer {
   private _show: boolean = true;
   private _resized: boolean = false;
@@ -52,6 +55,7 @@ export class WindLayer {
   };
   private _isDestroyed: boolean = false;
   private primitives: any[] = [];
+  private eventListeners: Map<WindLayerEventType, Set<WindLayerEventCallback>> = new Map();
 
   /**
    * WindLayer class for visualizing wind field data with particle animation in Cesium.
@@ -294,6 +298,8 @@ export class WindLayer {
     this.windData = this.processWindData(data);
     this.particleSystem.computing.updateWindData(this.windData);
     this.viewer.scene.requestRender();
+    // Dispatch data change event
+    this.dispatchEvent('dataChange', this.windData);
   }
 
   /**
@@ -304,6 +310,8 @@ export class WindLayer {
     this.options = { ...this.options, ...options };
     this.particleSystem.changeOptions(options);
     this.viewer.scene.requestRender();
+    // Dispatch options change event
+    this.dispatchEvent('optionsChange', this.options);
   }
 
   zoomTo(duration: number = 0): void {
@@ -343,6 +351,8 @@ export class WindLayer {
     this.remove();
     this.removeEventListeners();
     this.particleSystem.destroy();
+    // Clear all event listeners
+    this.eventListeners.clear();
     this._isDestroyed = true;
   }
 
@@ -353,6 +363,21 @@ export class WindLayer {
     });
   }
 
+  addEventListener(type: WindLayerEventType, callback: WindLayerEventCallback) {
+    if (!this.eventListeners.has(type)) {
+      this.eventListeners.set(type, new Set());
+    }
+    this.eventListeners.get(type)?.add(callback);
+  }
+
+  removeEventListener(type: WindLayerEventType, callback: WindLayerEventCallback) {
+    this.eventListeners.get(type)?.delete(callback);
+  }
+
+  private dispatchEvent(type: WindLayerEventType, data: WindData | WindLayerOptions) {
+    this.eventListeners.get(type)?.forEach(callback => callback(data));
+  }
+
 }
 
-export type { WindLayerOptions, WindData };
+export type { WindLayerOptions, WindData, WindLayerEventType, WindLayerEventCallback };

packages/cesium-wind-layer/src/index.ts

@@ -208,19 +208,22 @@ export class WindParticlesComputing {
     };
   }
 
+  private reCreateWindTextures() {
+    this.windTextures.U.destroy();
+    this.windTextures.V.destroy();
+    this.createWindTextures();
+  }
+
   updateWindData(data: Required<WindData>) {
     this.windData = data;
-    this.windTextures.U.copyFrom({ source: data.u.array });
-    this.windTextures.V.copyFrom({ source: data.v.array });
+    this.reCreateWindTextures();
   }
 
   updateOptions(options: Partial<WindLayerOptions>) {
     const needUpdateWindTextures = options.flipY !== this.options.flipY;
     this.options = { ...this.options, ...options };
     if (needUpdateWindTextures) {
-      this.windTextures.U.destroy();
-      this.windTextures.V.destroy();
-      this.createWindTextures();
+      this.reCreateWindTextures();
     }
   }