working now

hongfaqiu · Oct 10, 2024 · 432eda0 · 432eda0
1 parent 00a987e
commit 432eda0
Show file tree

Hide file tree

Showing 15 changed files with 224 additions and 513 deletions.
diff --git a/example/index.html b/example/index.html
@@ -12,10 +12,18 @@
         padding: 0;
         overflow: hidden;
       }
+      #sceneModePicker {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        width: 30px;
+        height: 30px;
+      }
     </style>
   </head>
   <body>
     <div id="cesiumContainer"></div>
     <script type="module" src="/src/main.ts"></script>
+    <div id="sceneModePicker"></div>
   </body>
 </html>
diff --git a/example/public/wind.json b/example/public/wind.json
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -1,4 +1,4 @@
-import { Viewer, Rectangle, ArcGisMapServerImageryProvider, ImageryLayer, SceneMode } from 'cesium';
+import { Viewer, Rectangle, ArcGisMapServerImageryProvider, ImageryLayer, SceneModePicker } from 'cesium';
 import { WindLayer, WindLayerOptions, WindData } from 'cesium-wind-layer';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 
@@ -19,18 +19,38 @@ const viewer = new Viewer('cesiumContainer', {
   useBrowserRecommendedResolution: false,
   orderIndependentTranslucency: false,
   // sceneMode: SceneMode.SCENE2D,
+  sceneModePicker: false,
 });
 
+new SceneModePicker('sceneModePicker', viewer.scene, 0)
+
 // Define wind layer options
 const options: WindLayerOptions = {
   particleHeight: 1000.0,
   fadeOpacity: 0.996,
   dropRate: 0.003,
   dropRateBump: 0.01,
-  speedFactor: 1.0,
-  lineWidth: 10.0,
+  speedFactor: 10.0,
+  lineWidth: 6.0,
   particlesTextureSize: 100,
-  colors: ['#ffffff', '#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
+  colors: [
+    'rgb(36,104, 180)',
+    'rgb(60,157, 194)',
+    'rgb(128,205,193 )',
+    'rgb(151,218,168 )',
+    'rgb(198,231,181)',
+    'rgb(238,247,217)',
+    'rgb(255,238,159)',
+    'rgb(252,217,125)',
+    'rgb(255,182,100)',
+    'rgb(252,150,75)',
+    'rgb(250,112,52)',
+    'rgb(245,64,32)',
+    'rgb(237,45,28)',
+    'rgb(220,24,32)',
+    'rgb(180,0,35)',
+  ],
+  flipY: true,
 };
 let windLayer: WindLayer;
 fetch('/wind.json').then(res => res.json()).then(data => {

diff --git a/packages/cesium-wind-layer/src/cesium-extensions.d.ts b/packages/cesium-wind-layer/src/cesium-extensions.d.ts
@@ -83,6 +83,7 @@ declare module 'cesium' {
       pass: Pass;
     });
     framebuffer?: Framebuffer;
+    execute(context: any): void;
   }
 
   export class RenderState {
@@ -123,10 +124,18 @@ declare module 'cesium' {
     destroy(): void;
   }
 
+  export enum TextureWrap {
+    CLAMP_TO_EDGE,
+    REPEAT,
+    MIRRORED_REPEAT,
+  }
+
   export class Sampler {
     constructor(options: {
-      minificationFilter: TextureMinificationFilter;
-      magnificationFilter: TextureMagnificationFilter;
+      minificationFilter?: TextureMinificationFilter;
+      magnificationFilter?: TextureMagnificationFilter;
+      wrapS?: TextureWrap;
+      wrapT?: TextureWrap;
     });
   }
 

diff --git a/packages/cesium-wind-layer/src/index.ts b/packages/cesium-wind-layer/src/index.ts
@@ -15,6 +15,8 @@ import { WindParticleSystem } from './windParticleSystem';
 
 export class WindLayer {
   private _show: boolean = true;
+  private _resized: boolean = false;
+  windData: WindData;
 
   get show(): boolean {
     return this._show;
@@ -51,6 +53,7 @@ export class WindLayer {
     this.viewer = viewer;
     this.scene = viewer.scene;
     this.options = options;
+    this.windData = windData;
 
     this.viewerParameters = {
       lonRange: new Cartesian2(0, 0),
@@ -78,8 +81,8 @@ export class WindLayer {
   private setupEventListeners(): void {
     this.viewer.camera.moveStart.addEventListener(this.moveStartFun);
     this.viewer.camera.moveEnd.addEventListener(this.moveEndFun);
-    window.addEventListener("resize", this.resizeFun);
     this.scene.preRender.addEventListener(this.preRenderFun);
+    window.addEventListener("resize", this.resizeFun);
   }
 
   private removeEventListeners(): void {
@@ -100,29 +103,49 @@ export class WindLayer {
   }
 
   private onResize(): void {
+    this._resized = true;
     this.remove();
-    this.particleSystem.canvasResize(this.scene.context);
-    this.addPrimitives();
   }
 
   private onPreRender(): void {
     this.preUpdateEvent.raiseEvent();
     this.postUpdateEvent.raiseEvent();
+    if (this._resized) {
+      this.particleSystem.canvasResize(this.scene.context);
+      this.addPrimitives();
+      this._resized = false;
+    }
   }
 
   private updateViewerParameters(): void {
     const viewRectangle = this.viewer.camera.computeViewRectangle();
     if (viewRectangle) {
-      this.viewerParameters.lonRange.x = CesiumMath.toDegrees(Math.max(viewRectangle.west, -Math.PI));
-      this.viewerParameters.lonRange.y = CesiumMath.toDegrees(Math.min(viewRectangle.east, Math.PI));
-      this.viewerParameters.latRange.x = CesiumMath.toDegrees(Math.max(viewRectangle.south, -Math.PI / 2));
-      this.viewerParameters.latRange.y = CesiumMath.toDegrees(Math.min(viewRectangle.north, Math.PI / 2));
+      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));
+      // 计算经纬度范围的交集
+      const lonRange = new Cartesian2(
+        Math.max(this.windData.bounds.west, minLon),
+        Math.min(this.windData.bounds.east, maxLon)
+      );
+      const latRange = new Cartesian2(
+        Math.max(this.windData.bounds.south, minLat),
+        Math.min(this.windData.bounds.north, maxLat)
+      );
+      this.viewerParameters.lonRange = lonRange;
+      this.viewerParameters.latRange = latRange;
     }
-    this.viewerParameters.pixelSize = 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
     );
+    if (pixelSize > 0) {
+      this.viewerParameters.pixelSize = pixelSize;
+    }
+
     this.viewerParameters.sceneMode = this.scene.mode;
   }
 
@@ -133,15 +156,13 @@ export class WindLayer {
 
   private addPrimitives(): void {
     this.primitives = this.particleSystem.getPrimitives();
-    console.log('Adding primitives to scene:', this.primitives);
     this.primitives.forEach(primitive => {
       this.scene.primitives.add(primitive);
     });
     this.updatePrimitivesVisibility();
   }
 
   remove(): void {
-    this.removeEventListeners();
     this.primitives.forEach(primitive => {
       this.scene.primitives.remove(primitive);
     });
@@ -154,6 +175,7 @@ export class WindLayer {
 
   destroy(): void {
     this.remove();
+    this.removeEventListeners();
     this.particleSystem.destroy();
     this._isDestroyed = true;
   }

diff --git a/packages/cesium-wind-layer/src/material.ts b/packages/cesium-wind-layer/src/material.ts