fix: quickly adapt to camera changes

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,12 @@
 # example
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies
+  - cesium-wind-layer@0.4.1
+
 ## 0.3.0
 
 ### Minor Changes

example/package.json

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

example/src/components/ControlPanel.tsx

@@ -247,6 +247,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
   windLayer,
   initialOptions,
 }) => {
+  const [form] = Form.useForm();
   const [options, setOptions] = useState<WindLayerOptions>({
     ...WindLayer.defaultOptions,
     ...initialOptions,
@@ -256,10 +257,12 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
   const [visible, setVisible] = useState(true);
 
   useEffect(() => {
-    setOptions({
+    const allValues = {
       ...WindLayer.defaultOptions,
       ...initialOptions,
-    });
+    };
+    setOptions(allValues);
+    form.setFieldsValue(allValues);
   }, [windLayer, initialOptions]);
 
   const renderLabel = (label: string, tooltip: string) => (
@@ -326,6 +329,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
       >
         <CardContent $collapsed={collapsed}>
           <Form
+            form={form}
             initialValues={initialOptions}
             onValuesChange={handleValuesChange}
             layout="vertical"

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # cesium-wind-layer
 
+## 0.4.1
+
+### Patch Changes
+
+- fix: quickly adapt to camera changes
+
 ## 0.4.0
 
 ### Minor Changes

packages/cesium-wind-layer/package.json

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

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

@@ -93,6 +93,7 @@ export class WindLayer {
   }
 
   private setupEventListeners(): void {
+    this.viewer.camera.percentageChanged = 0.01;
     this.viewer.camera.changed.addEventListener(this.updateViewerParameters.bind(this));
     this.scene.morphComplete.addEventListener(this.updateViewerParameters.bind(this));
     window.addEventListener("resize", this.updateViewerParameters.bind(this));
@@ -107,10 +108,17 @@ export class WindLayer {
   private updateViewerParameters(): void {
     const viewRectangle = this.viewer.camera.computeViewRectangle();
     if (viewRectangle) {
-      const minLon = CesiumMath.toDegrees(Math.max(viewRectangle.west, -Math.PI));
-      const maxLon = CesiumMath.toDegrees(Math.min(viewRectangle.east, Math.PI));
-      const minLat = CesiumMath.toDegrees(Math.max(viewRectangle.south, -Math.PI / 2));
-      const maxLat = CesiumMath.toDegrees(Math.min(viewRectangle.north, Math.PI / 2));
+      let minLon = CesiumMath.toDegrees(Math.max(viewRectangle.west, -Math.PI));
+      let maxLon = CesiumMath.toDegrees(Math.min(viewRectangle.east, Math.PI));
+      let minLat = CesiumMath.toDegrees(Math.max(viewRectangle.south, -Math.PI / 2));
+      let maxLat = CesiumMath.toDegrees(Math.min(viewRectangle.north, Math.PI / 2));
+      // Add 5% buffer to lonRange and latRange
+      const lonBuffer = (maxLon - minLon) * 0.05;
+      const latBuffer = (maxLat - minLat) * 0.05;
+      minLon = Math.max(this.windData.bounds.west, minLon - lonBuffer);
+      maxLon = Math.min(this.windData.bounds.east, maxLon + lonBuffer);
+      minLat = Math.max(this.windData.bounds.south, minLat - latBuffer);
+      maxLat = Math.min(this.windData.bounds.north, maxLat + latBuffer);
       // 计算经纬度范围的交集
       const lonRange = new Cartesian2(
         Math.max(this.windData.bounds.west, minLon),
@@ -120,16 +128,16 @@ export class WindLayer {
         Math.max(this.windData.bounds.south, minLat),
         Math.min(this.windData.bounds.north, maxLat)
       );
+
       this.viewerParameters.lonRange = lonRange;
       this.viewerParameters.latRange = latRange;
     }
 
-    const rawPixelSize = this.viewer.camera.getPixelSize(
+    const pixelSize = this.viewer.camera.getPixelSize(
       new BoundingSphere(Cartesian3.ZERO, Ellipsoid.WGS84.maximumRadius),
       this.viewer.scene.drawingBufferWidth,
       this.viewer.scene.drawingBufferHeight
     );
-    const pixelSize = rawPixelSize + 100;
 
     if (pixelSize > 0) {
       this.viewerParameters.pixelSize = pixelSize;

packages/cesium-wind-layer/src/shaders/calculateSpeed.ts

@@ -33,26 +33,6 @@ float getWindComponent(sampler2D componentTexture, vec2 lonLat) {
     return result;
 }
 
-float interpolateTexture(sampler2D componentTexture, vec2 lonLat) {
-    float lon = lonLat.x;
-    float lat = lonLat.y;
-
-    float lon0 = floor(lon / interval.x) * interval.x;
-    float lon1 = lon0 + 1.0 * interval.x;
-    float lat0 = floor(lat / interval.y) * interval.y;
-    float lat1 = lat0 + 1.0 * interval.y;
-
-    float lon0_lat0 = getWindComponent(componentTexture, vec2(lon0, lat0));
-    float lon1_lat0 = getWindComponent(componentTexture, vec2(lon1, lat0));
-    float lon0_lat1 = getWindComponent(componentTexture, vec2(lon0, lat1));
-    float lon1_lat1 = getWindComponent(componentTexture, vec2(lon1, lat1));
-
-    float lon_lat0 = mix(lon0_lat0, lon1_lat0, lon - lon0);
-    float lon_lat1 = mix(lon0_lat1, lon1_lat1, lon - lon0);
-    float lon_lat = mix(lon_lat0, lon_lat1, lat - lat0);
-    return lon_lat;
-}
-
 vec2 getWindComponents(vec2 lonLat) {
     vec2 normalizedIndex2D = mapPositionToNormalizedIndex2D(lonLat);
     float u = texture(U, normalizedIndex2D).r;

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

@@ -131,7 +131,7 @@ export class WindParticlesComputing {
           U: () => this.windTextures.U,
           V: () => this.windTextures.V,
           currentParticlesPosition: () => this.particlesTextures.currentParticlesPosition,
-          speedScaleFactor: () => this.viewerParameters.pixelSize * this.options.speedFactor,
+          speedScaleFactor: () => (this.viewerParameters.pixelSize + 50) * this.options.speedFactor,
           dimension: () => dimension,
           minimum: () => minimum,
           maximum: () => maximum,