test: 添加 smart3d.MeasureHandler 的测试

src/app/app.component.css

-.button {
-  position: fixed;
-  top: 20px;
-  left: 20px;
+#container {
+  position: relative;
 }

src/app/app.component.html

-<div id="container" #ref></div>
-<button class="button" (click)="handleClick()">测量</button>
+<h1>Ng smart3d</h1>
+<div id="container">
\ No newline at end of file
+  <app-measure-handler></app-measure-handler>
+</div>

src/app/app.component.ts

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { ViewerService } from './viewer.service';
+import { ViewerService } from './services';
 
 @Component({
   selector: 'app-root',
@@ -9,26 +9,16 @@ import { ViewerService } from './viewer.service';
 export class AppComponent implements OnInit {
 
   private viewer;
-  @ViewChild('ref', { static: true }) divRef: ElementRef;
 
   constructor(
     private viewerService: ViewerService,
-  ) {
-    // this.viewer = undefined;
-  }
+  ) { }
 
   ngOnInit(): void {
-    console.log(this.divRef.nativeElement);
     this.viewer = this.viewerService.initViewer('container', {
       sceneMode: smart3d.SceneMode.SCENE3D,
       scene3DOnly: true,
-      terrainProvider: Cesium.createWorldTerrain()
+      terrainProvider: smart3d.TerrainManager.createWorldTerrain()
     });
-    // this.viewer = new Cesium.Viewer('container');
-  }
-
-  handleClick() {
-    const distanceHandler = new smart3d.MeasureHandler(this.viewer, smart3d.MeasureMode.Distance);
-    distanceHandler.activate();
   }
 }

src/app/app.module.ts

@@ -2,10 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { MeasureHandlerComponent } from './components';
+import { SightLineComponent } from './components/sight-line/sight-line.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MeasureHandlerComponent,
+    SightLineComponent,
   ],
   imports: [
     BrowserModule
@@ -14,4 +18,5 @@ import { AppComponent } from './app.component';
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/components/index.ts

+export * from './measure-handler';
+export * from './sight-line';

src/app/components/measure-handler/index.ts

+export * from './measure-hander.component';

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

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-measure-handler',
+  templateUrl: './measure-handler.component.html',
+  styleUrls: ['./measure-handler.component.css']
+})
+export class MeasureHandlerComponent implements OnInit {
+
+  public handleMeasure: (measureMode: number, options?: {
+    isGround: boolean;
+    showLabel: boolean;
+  }) => any;
+  public measureMode = smart3d.MeasureMode;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) {
+  }
+  ngOnInit(): void {
+    this.handleMeasure = this.viewerService.handleMeasure;
+  }
+}

src/app/components/measure-handler/measure-handler.component.css

+.buttons {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
\ No newline at end of file

src/app/components/measure-handler/measure-handler.component.html

+<div class="buttons">
+  <button (click)="handleMeasure(measureMode.Distance)">不贴地距离测量</button>
+  <button (click)="handleMeasure(measureMode.Distance, {
+    isGround: true
+  })">贴地距离测量</button>
+  <button (click)="handleMeasure(measureMode.Area)">不贴地面积测量</button>
+  <button (click)="handleMeasure(measureMode.Area, {
+    isGround: true
+  })">贴地面积测量</button>
+  <button (click)="handleMeasure(measureMode.Angle)">角度测量</button>
+  <button (click)="handleMeasure(measureMode.DVH )">空间距离，水平距离，垂直距离模式测量</button>
+</div>
\ No newline at end of file

src/app/components/sight-line/index.ts

+export * from './sight-line.component';

src/app/components/sight-line/sight-line.component.html

+<p>sight-line works!</p>

src/app/components/sight-line/sight-line.component.spec.ts

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

src/app/components/sight-line/sight-line.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sight-line',
+  templateUrl: './sight-line.component.html',
+  styleUrls: ['./sight-line.component.css']
+})
+export class SightLineComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/services/index.ts

+export * from './viewer';

src/app/services/viewer/index.ts

+export * from './viewer.service';

src/app/services/viewer/viewer.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewerService {
+
+  // tslint:disable-next-line: variable-name
+  private _viewer;
+  private measureHandler;
+
+  constructor() {
+    console.log('%c viewer service constructed! ', 'background-color: red; color: white; padding: 5px');
+    this.handleMeasure = this.handleMeasure.bind(this);
+  }
+
+  get viewer() {
+    return this._viewer;
+  }
+
+  initViewer(container: string | Element, options?: object): object {
+    if (!this._viewer) {
+      this._viewer = new smart3d.Viewer(container, options || {});
+    }
+    return this._viewer;
+  }
+
+  handleMeasure(measureMode: number, options?: {
+    isGround: boolean;
+    showLabel: boolean;
+  }) {
+    if (
+      measureMode !== smart3d.MeasureMode.Distance &&
+      measureMode !== smart3d.MeasureMode.Angle &&
+      measureMode !== smart3d.MeasureMode.Area &&
+      measureMode !== smart3d.MeasureMode.DVH
+    ) {
+      throw new Cesium.DeveloperError('measure mode must be one of smart3d.MeasureMode');
+    }
+
+    if (this._viewer) {
+      this.measureHandler = new smart3d.MeasureHandler(this.viewer, measureMode, options && options);
+      this.measureHandler.activate();
+    }
+  }
+}

src/app/viewer.service.ts

-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ViewerService {
-
-  private viewer;
-
-  constructor() { }
-
-  initViewer(containerId: string, options?) {
-    if (!this.viewer) {
-      this.viewer = new smart3d.Viewer(containerId, options || {});
-    }
-  }
-}

src/assets/smart3d/dist/smart3d/smart3d.css

@@ -1426,10 +1426,7 @@ span.cesium-projectionPicker-wrapper {
 }
 
 .Smart3D-Compass-svg {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-51%, -51%);
+  transform: translate(-1%, -1%);
 }
 .Smart3D-Compass-Container {
   position: absolute;

src/main.ts

@@ -13,7 +13,7 @@ Cesium.buildModuleUrl.setBaseUrl('./assets/cesium/Build/Cesium/');
 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYzY3ZWMwNi00OGNkLTQ5MWUtOTUyYy05Nzk3YWU5Njg2YmIiLCJpZCI6MTQ3NjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjYzMTE1Mjh9.iI2yOydFdlu0fLAyWqbTL399gNrnS_l-LAVXarKdLv8';
 
 // tslint:disable-next-line
-window['SMART3D_BASE_URL'] = 'smart3d/dist/smart3d/';
+window['SMART3D_BASE_URL'] = './assets/smart3d/dist/smart3d/';
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));