feat: enhance wind layer visualization and data query

- Improve particle system performance and coverage
  * Fix particle distribution in certain areas
  * Optimize particle generation algorithm
  * Adjust particle visibility calculation

- Enhance wind data query functionality
  * Refactor WindDataAtLonLat interface with clear structure
  * Add bilinear interpolation for wind data
  * Separate original and interpolated data in query results
  * Add detailed JSDoc comments for better type documentation

- Improve UI components
  * Add toggle between original and interpolated data
  * Enhance mobile responsiveness
  * Optimize data display format
  * Add hover tooltips for detailed information

BREAKING CHANGE: WindDataAtLonLat interface structure has changed. Now returns data in 'original' and 'interpolated' sub-objects.

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,12 @@
 # example
 
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cesium-wind-layer@0.5.0
+
 ## 0.3.3
 
 ### Patch Changes

example/package.json

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

example/src/components/ColorTableInput.tsx

@@ -47,6 +47,7 @@ const generateColorTable = (
 };
 
 export const colorSchemes = [
+  { label: 'White', value: 'white', interpolator: () => 'white' },
   { label: 'Rainbow', value: 'rainbow', interpolator: interpolateRainbow, reverse: true },
   { label: 'Viridis', value: 'viridis', interpolator: interpolateViridis },
   { label: 'Cool', value: 'cool', interpolator: interpolateCool },

example/src/components/SpeedQuery.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Typography, Space, Divider } from 'antd';
+import { Typography, Space, Button } from 'antd';
 import styled from 'styled-components';
-import { WindLayer } from 'cesium-wind-layer';
+import { WindDataAtLonLat, WindLayer } from 'cesium-wind-layer';
 import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType, Cartographic, Math as CesiumMath } from 'cesium';
 import { GithubOutlined } from '@ant-design/icons';
 
@@ -107,10 +107,27 @@ const DirectionArrow = styled.span<{ $angle: number }>`
   font-family: "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
 `;
 
-interface WindData {
-  speed: number;
-  u: number;
-  v: number;
+const DataContainer = styled(Space)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+`;
+
+const DataGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const ToggleButton = styled(Button)`
+  font-size: 12px;
+  padding: 2px 8px;
+  height: 24px;
+`;
+
+interface WindData extends WindDataAtLonLat {
   direction?: number;
 }
 
@@ -122,6 +139,7 @@ interface SpeedQueryProps {
 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 calculateWindDirection = (u: number, v: number): number => {
     // 使用 atan2 计算角度，注意参数顺序：atan2(y, x)
@@ -158,8 +176,9 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
           const result = windLayer.getDataAtLonLat(lon, lat);
           setLocation({ lon, lat });
 
-          if (result && typeof result.u === 'number' && typeof result.v === 'number') {
-            const direction = calculateWindDirection(result.u, result.v);
+          if (result) {
+            const data = showInterpolated ? result.interpolated : result.original;
+            const direction = calculateWindDirection(data.u, data.v);
             setQueryResult({ ...result, direction });
           } else {
             setQueryResult(null);
@@ -171,14 +190,15 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
       }
     };
 
-    // 支持移动端触摸
     handler.setInputAction(handleClick, ScreenSpaceEventType.LEFT_CLICK);
     handler.setInputAction(handleClick, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
 
     return () => {
       handler.destroy();
     };
-  }, [viewer, windLayer]);
+  }, [viewer, windLayer, showInterpolated]);
+
+  const currentData = queryResult ? (showInterpolated ? queryResult.interpolated : queryResult.original) : null;
 
   return (
     <Container>
@@ -190,30 +210,45 @@ export const SpeedQuery: React.FC<SpeedQueryProps> = ({ windLayer, viewer }) =>
         )}
 
         {location && (
-          <Space split={<Divider type="vertical" style={{ margin: '0 4px' }} />}>
-            <DataItem>
-              📍 {location.lon.toFixed(1)}°, {location.lat.toFixed(1)}°
-            </DataItem>
+          <DataContainer>
+            <DataGroup>
+              <DataItem>
+                📍 {location.lon.toFixed(1)}°, {location.lat.toFixed(1)}°
+              </DataItem>
+              
+              {queryResult && currentData && (
+                <ToggleButton 
+                  type={showInterpolated ? "primary" : "default"}
+                  onClick={() => setShowInterpolated(!showInterpolated)}
+                >
+                  {showInterpolated ? "Interpolated" : "Original"}
+                </ToggleButton>
+              )}
+            </DataGroup>
 
             {!queryResult && (
               <Text type="secondary" style={{ fontSize: '13px' }}>No data</Text>
             )}
 
-            {queryResult && (
-              <>
-                <DataItem>
-                  💨 {queryResult.speed.toFixed(1)} m/s
-                </DataItem>
-                <DataItem>
-                  <DirectionArrow $angle={(queryResult.direction || 0) - 90}>➤</DirectionArrow>
-                  {' '}{queryResult.direction?.toFixed(0)}° ({getCardinalDirection(queryResult.direction || 0)})
+            {queryResult && currentData && (
+              <DataGroup>
+                <DataItem title="Wind Speed">
+                  💨 Speed: {currentData.speed.toFixed(1)} m/s
                 </DataItem>
-                <DataItem>
-                  UV: {queryResult.u.toFixed(1)}, {queryResult.v.toFixed(1)}
+                
+                {currentData.speed > 0 && (
+                  <DataItem title="Wind Direction">
+                    <DirectionArrow $angle={(queryResult.direction || 0) - 90}>➤</DirectionArrow>
+                    {' '}Direction: {queryResult.direction?.toFixed(0)}° ({getCardinalDirection(queryResult.direction || 0)})
+                  </DataItem>
+                )}
+                
+                <DataItem title="UV Vector">
+                  UV Vector: {currentData.u.toFixed(3)}, {currentData.v.toFixed(3)}
                 </DataItem>
-              </>
+              </DataGroup>
             )}
-          </Space>
+          </DataContainer>
         )}
       </QueryInfo>
 

example/src/pages/earth.tsx

@@ -29,7 +29,7 @@ const defaultOptions: Partial<WindLayerOptions> = {
   dropRateBump: 0.01,
   speedFactor: 1.0,
   lineWidth: 10.0,
-  colors: colorSchemes[2].colors,
+  colors: colorSchemes[3].colors,
   flipY: true,
   useViewerBounds: true,
 };

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,26 @@
 # cesium-wind-layer
 
+## 0.5.0
+
+### Minor Changes
+
+- feat: enhance wind layer visualization and data query
+
+  - Improve particle system performance and coverage
+
+    - Fix particle distribution in certain areas
+    - Optimize particle generation algorithm
+    - Adjust particle visibility calculation
+    - Add 5% buffer to view range for smoother transitions
+
+  - Enhance wind data query functionality
+    - Refactor WindDataAtLonLat interface with clear structure
+    - Add bilinear interpolation for wind data
+    - Separate original and interpolated data in query results
+    - Add detailed JSDoc comments for better type documentation
+
+  BREAKING CHANGE: WindDataAtLonLat interface structure has changed. Now returns data in 'original' and 'interpolated' sub-objects.
+
 ## 0.4.3
 
 ### Patch Changes

packages/cesium-wind-layer/package.json

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

packages/cesium-wind-layer/readme.md

@@ -109,7 +109,7 @@ interface WindLayerOptions {
 | `show: boolean` | Get or set the visibility of the wind layer |
 | `updateWindData(data: WindData)` | Update the wind field data |
 | `updateOptions(options: Partial<WindLayerOptions>)` | Update the options of the wind layer |
-| `getDataAtLonLat(lon: number, lat: number): { u: number, v: number, speed: number }` | Get the wind data at a specific longitude and latitude |
+| `getDataAtLonLat(lon: number, lat: number): WindDataAtLonLat \| null` | Get the wind data at a specific longitude and latitude, returns both original and interpolated values. Returns null if coordinates are outside bounds |
 | `zoomTo(duration?: number)` | Zoom the camera to fit the wind field extent |
 | `isDestroyed(): boolean` | Check if the wind layer has been destroyed |
 | `destroy()` | Clean up resources and destroy the wind layer |

packages/cesium-wind-layer/readme.zh-CN.md

@@ -67,7 +67,7 @@ const windData = {
 
 // 使用配置创建风场图层
 const windLayer = new WindLayer(viewer, windData, {
-  particlesTextureSize: 256,  // 粒子系统的纹理大小
+  particlesTextureSize: 100,  // 粒子系统的纹理大小
   particleHeight: 1000,       // 粒子距地面高度
   lineWidth: 10.0,            // 粒子轨迹宽度
   speedFactor: 1.0,         // 速度倍数
@@ -88,8 +88,8 @@ const windLayer = new WindLayer(viewer, windData, {
 
 ```typescript
 interface WindLayerOptions {
-  particlesTextureSize: number;  // 粒子纹理大小（默认：256）
-  particleHeight: number;        // 粒子高度（默认：1000）
+  particlesTextureSize: number;  // 粒子纹理大小，决定粒子最大数量（size * size）（默认：100）
+  particleHeight: number;        // 粒子距地面高度（默认：0）
   lineWidth: number;            // 粒子线宽（默认：3.0）
   speedFactor: number;          // 速度倍数（默认：1.0）
   dropRate: number;             // 粒子消失率（默认：0.003）
@@ -109,7 +109,7 @@ interface WindLayerOptions {
 | `show: boolean` | 获取或设置风场图层的可见性 |
 | `updateWindData(data: WindData)` | 更新风场数据 |
 | `updateOptions(options: Partial<WindLayerOptions>)` | 更新风场图层的选项 |
-| `getDataAtLonLat(lon: number, lat: number): { u: number, v: number, speed: number }` | 获取指定经纬度的风场数据 |
+| `getDataAtLonLat(lon: number, lat: number): WindDataAtLonLat \| null` | 获取指定经纬度的风场数据，返回原始值和插值结果。如果坐标超出范围则返回 null |
 | `zoomTo(duration?: number)` | 缩放相机以适应风场范围 |
 | `isDestroyed(): boolean` | 检查风场图层是否已被销毁 |
 | `destroy()` | 清理资源并销毁风场图层 |

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

@@ -7,9 +7,11 @@ import {
   Rectangle
 } from 'cesium';
 
-import { WindLayerOptions, WindData } from './types';
+import { WindLayerOptions, WindData, WindDataAtLonLat } from './types';
 import { WindParticleSystem } from './windParticleSystem';
 
+export * from './types';
+
 export class WindLayer {
   private _show: boolean = true;
   private _resized: boolean = false;
@@ -78,7 +80,7 @@ export class WindLayer {
     this.viewerParameters = {
       lonRange: new Cartesian2(-180, 180),
       latRange: new Cartesian2(-90, 90),
-      pixelSize: 2000.0,
+      pixelSize: 1000.0,
       sceneMode: this.scene.mode
     };
     this.updateViewerParameters();
@@ -131,7 +133,7 @@ export class WindLayer {
    * @param {number} lat - The latitude.
    * @returns {Object} - An object containing the u, v, and speed values at the specified coordinates.
    */
-  getDataAtLonLat(lon: number, lat: number): { u: number, v: number, speed: number } | null {
+  getDataAtLonLat(lon: number, lat: number): WindDataAtLonLat | null {
     const { bounds, width, height, u, v, speed } = this.windData;
     const { flipY } = this.options;
 
@@ -140,25 +142,66 @@ export class WindLayer {
       return null;
     }
 
-    const x = Math.floor((lon - bounds.west) / (bounds.east - bounds.west) * (width - 1));
-    let y = Math.floor((lat - bounds.south) / (bounds.north - bounds.south) * (height - 1));
+    // Calculate normalized coordinates
+    const xNorm = (lon - bounds.west) / (bounds.east - bounds.west) * (width - 1);
+    let yNorm = (lat - bounds.south) / (bounds.north - bounds.south) * (height - 1);
 
     // Apply flipY if enabled
     if (flipY) {
-      y = height - 1 - y;
+      yNorm = height - 1 - yNorm;
     }
 
-    // Ensure x and y are within the array bounds
-    if (x < 0 || x >= width || y < 0 || y >= height) {
-      return null;
-    }
+    // Get exact grid point for original values
+    const x = Math.floor(xNorm);
+    const y = Math.floor(yNorm);
+
+    // Get the four surrounding grid points for interpolation
+    const x0 = Math.floor(xNorm);
+    const x1 = Math.min(x0 + 1, width - 1);
+    const y0 = Math.floor(yNorm);
+    const y1 = Math.min(y0 + 1, height - 1);
+
+    // Calculate interpolation weights
+    const wx = xNorm - x0;
+    const wy = yNorm - y0;
 
+    // Get indices
     const index = y * width + x;
+    const i00 = y0 * width + x0;
+    const i10 = y0 * width + x1;
+    const i01 = y1 * width + x0;
+    const i11 = y1 * width + x1;
+
+    // Bilinear interpolation for u component
+    const u00 = u.array[i00];
+    const u10 = u.array[i10];
+    const u01 = u.array[i01];
+    const u11 = u.array[i11];
+    const uInterp = (1 - wx) * (1 - wy) * u00 + wx * (1 - wy) * u10 +
+      (1 - wx) * wy * u01 + wx * wy * u11;
+
+    // Bilinear interpolation for v component
+    const v00 = v.array[i00];
+    const v10 = v.array[i10];
+    const v01 = v.array[i01];
+    const v11 = v.array[i11];
+    const vInterp = (1 - wx) * (1 - wy) * v00 + wx * (1 - wy) * v10 +
+      (1 - wx) * wy * v01 + wx * wy * v11;
+
+    // Calculate interpolated speed
+    const interpolatedSpeed = Math.sqrt(uInterp * uInterp + vInterp * vInterp);
 
     return {
-      u: u.array[index],
-      v: v.array[index],
-      speed: speed.array[index]
+      original: {
+        u: u.array[index],
+        v: v.array[index],
+        speed: speed.array[index],
+      },
+      interpolated: {
+        u: uInterp,
+        v: vInterp,
+        speed: interpolatedSpeed,
+      }
     };
   }
 
@@ -200,7 +243,7 @@ export class WindLayer {
       maxLat = Math.max(maxLat, lat);
     }
 
-    if (!isOutsideGlobe) {
+    if (!isOutsideGlobe) { // -30 degrees in radians
       // Calculate intersection with data bounds
       const lonRange = new Cartesian2(
         Math.max(this.windData.bounds.west, minLon),
@@ -222,7 +265,6 @@ export class WindLayer {
 
       this.viewerParameters.lonRange = lonRange;
       this.viewerParameters.latRange = latRange;
-
       // Calculate pixelSize based on the visible range
       const dataLonRange = this.windData.bounds.east - this.windData.bounds.west;
       const dataLatRange = this.windData.bounds.north - this.windData.bounds.south;
@@ -234,8 +276,9 @@ export class WindLayer {
 
       // Map the ratio to a pixelSize value between 0 and 1000
       const pixelSize = 1000 * visibleRatio;
-
-      this.viewerParameters.pixelSize = 5 + Math.max(0, Math.min(1000, pixelSize));
+      if (pixelSize > 0) {
+        this.viewerParameters.pixelSize = Math.max(0, Math.min(1000, pixelSize));
+      }
     }