test: 添加可视域分析、剖面分析、地下模式、地形开挖功能的测试

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod --base-href ./",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

src/app/app.component.html

@@ -3,6 +3,10 @@
     <app-measure-handler></app-measure-handler>
     <app-sight-line></app-sight-line>
     <app-skyline></app-skyline>
+    <app-viewshed></app-viewshed>
+    <app-profile></app-profile>
+    <app-underground></app-underground>
+    <app-soil-excavation></app-soil-excavation>
     <app-layer-manager></app-layer-manager>
   </div>
 </div>

src/app/app.component.ts

-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ViewerService } from './services';
 
 @Component({

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import {
@@ -7,6 +8,10 @@ import {
   SightLineComponent,
   LayerManagerComponent,
   SkylineComponent,
+  ViewshedComponent,
+  ProfileComponent,
+  UndergroundComponent,
+  SoilExcavationComponent,
 } from './components';
 
 @NgModule({
@@ -16,9 +21,14 @@ import {
     SightLineComponent,
     LayerManagerComponent,
     SkylineComponent,
+    ViewshedComponent,
+    ProfileComponent,
+    UndergroundComponent,
+    SoilExcavationComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule,
   ],
   providers: [
   ],

src/app/components/index.ts

@@ -2,3 +2,7 @@ export * from './measure-handler';
 export * from './sight-line';
 export * from './layer-manager';
 export * from './skyline';
+export * from './viewshed';
+export * from './profile';
+export * from './underground';
+export * from './soil-excavation';

src/app/components/profile/index.ts

+export * from './profile.component';

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

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

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

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

src/app/components/profile/profile.component.spec.ts

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

src/app/components/profile/profile.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  private profile;
+  public result = [];
+
+  constructor(
+    private viewerService: ViewerService,
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  startProfileAnalyze() {
+    const viewer = this.viewerService.viewer;
+    this.profile = new smart3d.Profile(viewer);
+    this.profile.computedEvent.addEventListener(positions => {
+      this.result = positions;
+    });
+
+    // 需要开启
+    viewer.scene.globe.depthTestAgainstTerrain = true;
+    this.profile.start();
+  }
+}

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

+export * from './soil-excavation.component';

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">
+  <label for="soil-excavation">开挖深度：</label>
+  <input type="number" id="soil-excavation" min="0" [(ngModel)]="depth" (ngModelChange)="changeDepth($event)" />
+  <button (click)="startExcavation()">开挖地形</button>
+</div>
\ No newline at end of file

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

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

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

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-soil-excavation',
+  templateUrl: './soil-excavation.component.html',
+  styleUrls: ['./soil-excavation.component.css']
+})
+export class SoilExcavationComponent implements OnInit {
+  public depth = 10;
+  private terrainClip;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) { }
+
+  ngOnInit() {
+    const viewer = this.viewerService.viewer;
+    this.terrainClip = new smart3d.TerrainClip(viewer);
+    this.terrainClip.updateDepth(this.depth);
+  }
+
+  changeDepth(depth: number) {
+    this.terrainClip.updateDepth(depth);
+  }
+
+  startExcavation() {
+    this.terrainClip.start(this.depth);
+  }
+
+}

src/app/components/underground/index.ts

+export * from './underground.component';

src/app/components/underground/underground.component.css

+.underground-container {
+  color: white;
+}
\ No newline at end of file

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

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

src/app/components/underground/underground.component.spec.ts

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

src/app/components/underground/underground.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-underground',
+  templateUrl: './underground.component.html',
+  styleUrls: ['./underground.component.css']
+})
+export class UndergroundComponent implements OnInit {
+
+  public alpha = 0.2;
+  private underground;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  activateUndergroundMode() {
+    if (this.underground instanceof smart3d.Underground) {
+      this.underground.destroy();
+    }
+    const viewer = this.viewerService.viewer;
+    this.underground = new smart3d.Underground(viewer);
+    this.underground.activate(this.alpha);
+  }
+
+  deactivateUndergroundMode() {
+    this.underground.destroy();
+  }
+}

src/app/components/viewshed/index.ts

+export * from './viewshed.component';

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">
+  <label for="horizontalAngle">水平张角：</label>
+  <input type="number" id="horizontalAngle" [(ngModel)]="horizontalAngle"/>
+  <label for="verticalAngle">垂直张角：</label>
+  <input type="number" id="verticalAngle" [(ngModel)]="verticalAngle"/>
+  <label for="distance">可视半径：</label>
+  <input type="number" id="distance" [(ngModel)]="distance"/>
+  是否显示视椎体<input type="checkbox" id="" [(ngModel)]="showFrustum">
+  是否显示可视域<input type="checkbox" id="" [(ngModel)]="showViewshed">
+  <button (click)="buildViewshed()">开始画线进行可视域分析</button>
+</div>

src/app/components/viewshed/viewshed.component.spec.ts

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

src/app/components/viewshed/viewshed.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-viewshed',
+  templateUrl: './viewshed.component.html',
+  styleUrls: ['./viewshed.component.css']
+})
+export class ViewshedComponent implements OnInit {
+
+  public horizontalAngle = 45;
+  public verticalAngle = 60;
+  public distance = 100;
+  public showFrustum = true;
+  public showViewshed = true;
+
+  private viewshed;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  buildViewshed() {
+    const viewer = this.viewerService.viewer;
+    const drawHandler = new smart3d.DrawHandler(viewer, smart3d.DrawMode.Line);
+    const positions = [];
+    drawHandler.anchorEvent.addEventListener(position => {
+      if (positions.push(position) >= 2) {
+        drawHandler.clear();
+
+        const options = {
+          cameraPosition: positions[0],
+          viewPosition: positions[1],
+          horizontalAngle: this.horizontalAngle,
+          verticalAngle: this.verticalAngle,
+          distance: this.distance,
+          frustum: this.showFrustum,
+          show: this.showViewshed,
+          visibleAreaColor: Cesium.Color.BLUE,
+          hiddenAreaColor: Cesium.Color.YELLOW,
+          alpha: 1,
+        };
+        // 需要开启 depthTestAgainstTerrain，可视域才能贴地
+        if (viewer.scene.globe.depthTestAgainstTerrain !== true) {
+          viewer.scene.globe.depthTestAgainstTerrain = true;
+        }
+        if (this.viewshed) {
+          this.viewshed.destroy();
+        }
+        this.viewshed = new smart3d.ViewShed3D(viewer, options);
+        this.viewshed.start();
+
+        drawHandler.destroy();
+      }
+    });
+    drawHandler.activate();
+  }
+
+}