test: 添加飞行管理

src/app/app.component.html

@@ -9,10 +9,14 @@
     <app-soil-excavation></app-soil-excavation>
     <app-particle-effect></app-particle-effect>
     <div style="border: 1px solid white; padding: 5px; margin: 5px;">
+
       <div><app-layer-manager></app-layer-manager></div>
       <div>3D tiles 剖切：<app-tileset-clipping></app-tileset-clipping></div>
       <div>3D tiles 位置编辑：<app-tileset-editor></app-tileset-editor></div>
       <app-pick></app-pick>
     </div>
+    <app-fly-manager></app-fly-manager>
+
+    <button (click)="addHexagonalGridImagery()">添加六边形网格底图</button>
   </div>
 </div>

src/app/app.component.ts

@@ -18,9 +18,23 @@ export class AppComponent implements OnInit {
     this.viewer = this.viewerService.initViewer('container', {
       sceneMode: smart3d.SceneMode.SCENE3D,
       scene3DOnly: true,
-      // terrainProvider: smart3d.TerrainManager.createWorldTerrain(),
+      terrainProvider: smart3d.TerrainManager.createWorldTerrain(),
       baseMapMode: smart3d.BaseMapMode.ESRI,
       helper: false,
     });
   }
+
+  addHexagonalGridImagery() {
+    const lineColor = new Cesium.Color(17 / 255, 54 / 255, 212 / 255, 0.5 / 1);
+    const hexagonalGridImageryProvider = new smart3d.HexagonalGridImageryProvider({
+      color: lineColor,
+      lineWidth: 3,
+      cells: 32,
+      backgroundColor: Cesium.Color.BLACK.withAlpha(0.0),
+      canvasSize: 2048,
+      tileWidth: 2048,
+      tileHeight: 2048,
+    });
+    this.viewer.imageryLayers.addImageryProvider(hexagonalGridImageryProvider);
+  }
 }

src/app/app.module.ts

@@ -16,6 +16,7 @@ import {
   TilesetClippingComponent,
   TilesetEditorComponent,
   PickComponent,
+  FlyManagerComponent,
 } from './components';
 
 @NgModule({
@@ -33,6 +34,7 @@ import {
     TilesetClippingComponent,
     TilesetEditorComponent,
     PickComponent,
+    FlyManagerComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/fly-manager/fly-manager.component.html

+<button (click)="handleDrawPath({
+    clampToGround: true
+})">规划路径</button>
+<button (click)="startFly()">开始飞行</button>

src/app/components/fly-manager/fly-manager.component.spec.ts

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

src/app/components/fly-manager/fly-manager.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ViewerService } from 'src/app/services';
+
+@Component({
+  selector: 'app-fly-manager',
+  templateUrl: './fly-manager.component.html',
+  styleUrls: ['./fly-manager.component.css']
+})
+export class FlyManagerComponent implements OnInit {
+
+  private viewer;
+  private flyManager;
+  private flyMnaagerOptions;
+
+  constructor(
+    private viewerService: ViewerService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.viewer = this.viewerService.viewer;
+    this.flyMnaagerOptions = {
+      perspective: smart3d.FlyPerspective.THIRD,
+      duration: 100,
+      infinite: false,
+      // camera: { followX: 200, followZ: 100 }, // FlyPerspective.FIRST
+      path: { width: 4, material: new Cesium.PolylineGlowMaterialProperty({ color: Cesium.Color.RED }) },
+      point: { pixelSize: 0 },
+      model: { uri: 'assets/models/boat.gltf' },
+      // label
+      // site
+    };
+    this.flyManager = new smart3d.FlyManager(this.viewer, this.flyMnaagerOptions);
+  }
+
+  handleDrawPath(options: {
+    clampToGround?: boolean
+  }) {
+    this.flyManager.drawNewRoute({
+      isGround: undefined !== options.clampToGround ? options.clampToGround : true,
+    });
+  }
+
+  startFly() {
+    this.flyManager.start();
+  }
+
+}

src/app/components/fly-manager/index.ts

+export * from './fly-manager.component';

src/app/components/index.ts

@@ -10,3 +10,4 @@ export * from './particle-effect';
 export * from './tileset-clipping';
 export * from './tileset-editor';
 export * from './pick';
+export * from './fly-manager';