test: 添加粒子特效、模型剖切

src/app/app.component.html

 <div id="container">
-  <div class="widgets">
+  <div class="widgets text-white">
     <app-measure-handler></app-measure-handler>
     <app-sight-line></app-sight-line>
     <app-skyline></app-skyline>
@@ -7,6 +7,8 @@
     <app-profile></app-profile>
     <app-underground></app-underground>
     <app-soil-excavation></app-soil-excavation>
+    <app-particle-effect></app-particle-effect>
+    <app-tileset-clipping></app-tileset-clipping>
     <app-layer-manager></app-layer-manager>
   </div>
 </div>

src/app/app.module.ts

@@ -12,6 +12,8 @@ import {
   ProfileComponent,
   UndergroundComponent,
   SoilExcavationComponent,
+  ParticleEffectComponent,
+  TilesetClippingComponent,
 } from './components';
 
 @NgModule({
@@ -25,6 +27,8 @@ import {
     ProfileComponent,
     UndergroundComponent,
     SoilExcavationComponent,
+    ParticleEffectComponent,
+    TilesetClippingComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/index.ts

@@ -6,3 +6,5 @@ export * from './viewshed';
 export * from './profile';
 export * from './underground';
 export * from './soil-excavation';
+export * from './particle-effect';
+export * from './tileset-clipping';

src/app/components/measure-handler/measure-hander.component.ts

@@ -8,7 +8,7 @@ import { ViewerService } from 'src/app/services';
 })
 export class MeasureHandlerComponent implements OnInit {
 
-  public handleMeasure: (measureMode: number, isGround: boolean, showLabel: boolean) => any;
+  public handleMeasure: (measureMode: number, isGround?: boolean, showLabel?: boolean) => any;
   public measureMode = smart3d.MeasureMode;
 
   constructor(

src/app/components/particle-effect/index.ts

+export * from './particle-effect.component';

src/app/components/particle-effect/particle-effect.component.html

+<div>
+  <button (click)="enableParticleEffect('rain')">开启雨</button>
+  <input type="range" (change)="handleChangeRange('rain', $event)" max="1" min="0" step="0.1" [disabled]="rainEffect === undefined">
+  <button (click)="enableParticleEffect('snow')">开启雪</button>
+  <input type="range" (change)="handleChangeRange('snow', $event)" max="1" min="0" step="0.1" [disabled]="snowEffect === undefined">
+  <button (click)="enableParticleEffect('fog')">开启雾</button>
+  <input type="range" (change)="handleChangeRange('fog', $event)" max="1" min="0" step="0.1" [disabled]="fogEffect === undefined">
+  <button (click)="enableParticleEffect('smoke')">添加烟</button>
+  <button (click)="enableParticleEffect('fire')">添加火</button>
+</div>
\ No newline at end of file

src/app/components/particle-effect/particle-effect.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticleEffectComponent } from './particle-effect.component';
+
+describe('ParticleEffectComponent', () => {
+  let component: ParticleEffectComponent;
+  let fixture: ComponentFixture<ParticleEffectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParticleEffectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParticleEffectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/particle-effect/particle-effect.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-particle-effect',
+  templateUrl: './particle-effect.component.html',
+  styleUrls: ['./particle-effect.component.css']
+})
+export class ParticleEffectComponent implements OnInit {
+  private particleEffect;
+  public rainEffect;
+  public snowEffect;
+  public fogEffect;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) { }
+
+  ngOnInit(
+  ) {
+    const viewer = this.viewerService.viewer;
+    this.particleEffect = new smart3d.ParticleEffect(viewer);
+  }
+
+  enableParticleEffect(type: string) {
+    const viewer = this.viewerService.viewer;
+    const cartesian = Cesium.Cartesian3.fromDegrees(115, 24, 250);
+    let options;
+
+    switch (type) {
+      case 'rain':
+        if (undefined === this.rainEffect) {
+          this.rainEffect = new smart3d.RainEffect(viewer.scene);
+          this.rainEffect.add();
+        }
+        break;
+      case 'snow':
+        if (undefined === this.snowEffect) {
+          this.snowEffect = new smart3d.SnowEffect(viewer.scene);
+          this.snowEffect.add();
+        }
+        break;
+      case 'fog':
+        if (undefined === this.fogEffect) {
+          this.fogEffect = new smart3d.FogEffect(viewer.scene);
+          this.fogEffect.add();
+        }
+        break;
+      case 'smoke':
+        const entity = viewer.entities.add({
+          position: cartesian
+        });
+        options = {
+          particleMode: smart3d.ParticleMode.SMOKE,
+          entity,
+          minimumSpeed: 1,
+          maximumSpeed: 5,
+          minimumParticleLife: 1,
+          maximumParticleLife: 4,
+          startScale: 1,
+          endScale: 5,
+          emissionRate: 5,
+          imageSize: 25
+        };
+        this.particleEffect.add(options);
+        viewer.camera.lookAt(cartesian, new Cesium.Cartesian3(-100, 0, 100));
+        viewer.camera._setTransform(Cesium.Matrix4.IDENTITY);
+        break;
+      case 'fire':
+        const fireEntity = viewer.entities.add({
+          position: cartesian
+        });
+        options = {
+          particleMode: smart3d.ParticleMode.FIRE,
+          entity: fireEntity,
+          minimumSpeed: 1,
+          maximumSpeed: 5,
+          minimumParticleLife: 1,
+          maximumParticleLife: 20,
+          startScale: 0,
+          endScale: 10,
+          emissionRate: 14,
+          imageSize: 10
+        };
+        this.particleEffect.add(options);
+        viewer.camera.lookAt(cartesian, new Cesium.Cartesian3(-100, 0, 100));
+        viewer.camera._setTransform(Cesium.Matrix4.IDENTITY);
+        break;
+    }
+
+  }
+
+  handleChangeRange(type: string, e): void {
+    const value: number = Cesium.Math.clamp(e.target.value, 0.0, 1.0);
+    switch (type) {
+      case 'rain':
+        break;
+      case 'snow':
+        this.snowEffect.update(value);
+        break;
+      case 'fog':
+        this.fogEffect.update(value);
+        break;
+    }
+  }
+}

src/app/components/profile/profile.component.css

-.profile-container {
-  color: white;
-}

src/app/components/profile/profile.component.html

-<div class="profile-container">
+<div>
   <button (click)="startProfileAnalyze()">点击开始剖面分析</button>
   剖面分析结果长度：{{ result.length }}
 </div>
\ No newline at end of file

src/app/components/soil-excavation/soil-excavation.component.css

-.soil-excavation-container {
-  color: white;
-}

src/app/components/soil-excavation/soil-excavation.component.html

-<div class="soil-excavation-container">
+<div>
   <label for="soil-excavation">开挖深度：</label>
-  <input type="number" id="soil-excavation" min="0" [(ngModel)]="depth" (ngModelChange)="changeDepth($event)" />
-  <button (click)="startExcavation()">开挖地形</button>
+  <input type="number" id="soil-excavation" min="0" [(ngModel)]="depth" />
+  <button (click)="handleSoilExcavation()">开挖地形</button>
 </div>

src/app/components/soil-excavation/soil-excavation.component.ts

@@ -20,11 +20,8 @@ export class SoilExcavationComponent implements OnInit {
     this.terrainClip.updateDepth(this.depth);
   }
 
-  changeDepth(depth: number) {
-    this.terrainClip.updateDepth(depth);
-  }
-
-  startExcavation() {
+  handleSoilExcavation() {
+    this.terrainClip.updateDepth(this.depth);
     this.terrainClip.start(this.depth);
   }
 

src/app/components/tileset-clipping/index.ts

+export * from './tileset-clipping.component';

src/app/components/tileset-clipping/tileset-clipping.component.html

+<select [(ngModel)]="clippingPlane">
+  <option value="Z">Z</option>
+  <option value="Y">Y</option>
+  <option value="X">X</option>
+</select>
+<button (click)="enableClipping()">开启模型剖切</button>
+<button (click)="enableClipping(false)">关闭模型剖切</button>
\ No newline at end of file

src/app/components/tileset-clipping/tileset-clipping.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TilesetClippingComponent } from './tileset-clipping.component';
+
+describe('TilesetClippingComponent', () => {
+  let component: TilesetClippingComponent;
+  let fixture: ComponentFixture<TilesetClippingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TilesetClippingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TilesetClippingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/tileset-clipping/tileset-clipping.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+const tilesetUrl = 'https://www.south-smart.com/cesium/modeldata/nanfangcehuiBIM/NFCH0911/CHDLFC/tileset.json';
+
+@Component({
+  selector: 'app-tileset-clipping',
+  templateUrl: './tileset-clipping.component.html',
+  styleUrls: ['./tileset-clipping.component.css']
+})
+export class TilesetClippingComponent implements OnInit {
+  public clippingPlane: 'X' | 'Y' | 'Z' = 'Z';
+
+  private tileset;
+  private clipping;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  enableClipping(enable?: boolean) {
+    const viewer = this.viewerService.viewer;
+
+    if (this.clipping) {
+      this.clipping.destroy();
+    }
+
+    if (false === enable) {
+      return;
+    }
+
+    const clippingOptions = {
+      dimensions: 2,
+      material: Cesium.Color.BLUE.withAlpha(0.2),
+      outline: true,
+      outlineColor: Cesium.Color.RED,
+      edgeStylingEnabled: true,
+      debugBoundingVolumesEnabled: true,
+    };
+    const that = this;
+
+    function createAndStartClipping() {
+      that.clipping = new smart3d.Clipping(viewer, clippingOptions);
+      that.clipping.start(that.tileset, smart3d.ClippingMode[that.clippingPlane]);
+    }
+
+    if (undefined === this.tileset) {
+      this.tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+        url: tilesetUrl,
+      }));
+      this.tileset.readyPromise.then(tileset => {
+        createAndStartClipping();
+        viewer.flyTo(tileset);
+      });
+    } else {
+      createAndStartClipping();
+      viewer.flyTo(this.tileset);
+    }
+  }
+}

src/app/components/underground/underground.component.html

-<div class="underground-container">
+<div>
   不透明度：<input type="number" id="" max="1" min="0" step="0.1" [(ngModel)]="alpha" />
   <button (click)="activateUndergroundMode()">开启地下模式</button>
   <button (click)="deactivateUndergroundMode()">取消地下模式</button>

src/app/components/viewshed/viewshed.component.css

-.form-container {
-  /* display: flex; */
-  /* flex-direction: column; */
-  /* flex-grow: 0; */
-  color: white;
-}
\ No newline at end of file

src/app/components/viewshed/viewshed.component.html

-<div class="form-container">
+<div>
   <label for="horizontalAngle">水平张角：</label>
   <input type="number" id="horizontalAngle" [(ngModel)]="horizontalAngle"/>
   <label for="verticalAngle">垂直张角：</label>

src/styles.css

@@ -2,3 +2,7 @@
 body {
   margin: 0;
 }
+
+.text-white {
+  color: white;
+}