fix: Tilting the camera angle still displays particles

Author: hongfaqiu

example/CHANGELOG.md

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

example/package.json

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

example/src/components/ColorTableInput.tsx

@@ -61,7 +61,7 @@ export const colorSchemes = [
   { label: 'Purples', value: 'purples', interpolator: interpolatePurples },
 ].map((item) => ({
   ...item,
-  colors: generateColorTable(item.interpolator, item.reverse),
+  colors: generateColorTable(item.interpolator, true),
 }));
 
 const ColorTableInput: React.FC<ColorTableInputProps> = ({
@@ -91,7 +91,7 @@ const ColorTableInput: React.FC<ColorTableInputProps> = ({
         {Array.from({ length: segments }).map((_, i) => (
           <ColorSegment
             key={i}
-            color={scheme.interpolator(i / (segments - 1))}
+            color={scheme.colors[i]}
           />
         ))}
       </ColorPreview>

example/src/components/ControlPanel.tsx

@@ -325,7 +325,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Factor to adjust the speed of particles. Controls the movement speed of particles.'
                 )}
               >
-                <Slider min={0.1} max={2} step={0.1} />
+                <Slider min={0.1} max={10} step={0.1} />
               </CompactFormItem>
 
               <CompactFormItem

example/src/pages/earth.tsx

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

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # cesium-wind-layer
 
+## 0.4.3
+
+### Patch Changes
+
+- Tilting the camera angle still displays particles
+
 ## 0.4.2
 
 ### Patch Changes

packages/cesium-wind-layer/package.json

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

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

@@ -2,9 +2,6 @@ import {
   Viewer,
   Scene,
   Cartesian2,
-  Cartesian3,
-  BoundingSphere,
-  Ellipsoid,
   SceneMode,
   Math as CesiumMath,
   Rectangle
@@ -166,20 +163,45 @@ export class WindLayer {
   }
 
   private updateViewerParameters(): void {
-    const viewRectangle = this.viewer.camera.computeViewRectangle();
-    if (viewRectangle) {
-      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 scene = this.viewer.scene;
+    const canvas = scene.canvas;
+    const corners = [
+      { x: 0, y: 0 },
+      { x: 0, y: canvas.clientHeight },
+      { x: canvas.clientWidth, y: 0 },
+      { x: canvas.clientWidth, y: canvas.clientHeight }
+    ];
+
+    // Convert screen corners to cartographic coordinates
+    let minLon = 180;
+    let maxLon = -180;
+    let minLat = 90;
+    let maxLat = -90;
+    let isOutsideGlobe = false;
+
+    for (const corner of corners) {
+      const cartesian = scene.camera.pickEllipsoid(
+        new Cartesian2(corner.x, corner.y),
+        scene.globe.ellipsoid
+      );
+
+      if (!cartesian) {
+        isOutsideGlobe = true;
+        break;
+      }
+
+      const cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+      const lon = CesiumMath.toDegrees(cartographic.longitude);
+      const lat = CesiumMath.toDegrees(cartographic.latitude);
+
+      minLon = Math.min(minLon, lon);
+      maxLon = Math.max(maxLon, lon);
+      minLat = Math.min(minLat, lat);
+      maxLat = Math.max(maxLat, lat);
+    }
+
+    if (!isOutsideGlobe) {
+      // Calculate intersection with data bounds
       const lonRange = new Cartesian2(
         Math.max(this.windData.bounds.west, minLon),
         Math.min(this.windData.bounds.east, maxLon)
@@ -189,20 +211,34 @@ export class WindLayer {
         Math.min(this.windData.bounds.north, maxLat)
       );
 
+      // Add 5% buffer to lonRange and latRange
+      const lonBuffer = (lonRange.y - lonRange.x) * 0.05;
+      const latBuffer = (latRange.y - latRange.x) * 0.05;
+
+      lonRange.x = Math.max(this.windData.bounds.west, lonRange.x - lonBuffer);
+      lonRange.y = Math.min(this.windData.bounds.east, lonRange.y + lonBuffer);
+      latRange.x = Math.max(this.windData.bounds.south, latRange.x - latBuffer);
+      latRange.y = Math.min(this.windData.bounds.north, latRange.y + latBuffer);
+
       this.viewerParameters.lonRange = lonRange;
       this.viewerParameters.latRange = latRange;
-    }
 
-    const pixelSize = this.viewer.camera.getPixelSize(
-      new BoundingSphere(Cartesian3.ZERO, Ellipsoid.WGS84.maximumRadius),
-      this.viewer.scene.drawingBufferWidth,
-      this.viewer.scene.drawingBufferHeight
-    );
+      // 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;
 
-    if (pixelSize > 0) {
-      this.viewerParameters.pixelSize = pixelSize;
+      // Calculate the ratio of visible area to total data area based on the shortest side
+      const visibleRatioLon = (lonRange.y - lonRange.x) / dataLonRange;
+      const visibleRatioLat = (latRange.y - latRange.x) / dataLatRange;
+      const visibleRatio = Math.min(visibleRatioLon, visibleRatioLat);
+
+      // 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));
     }
 
+
     this.viewerParameters.sceneMode = this.scene.mode;
     this.particleSystem?.applyViewerParameters(this.viewerParameters);
   }