First attempt to bring back 3D view in map

angular.json

@@ -35,13 +35,20 @@
                 "input":"src/assets",
                 "output":"/"
               },
+              {
+                "glob": "**/*",
+                "input": "node_modules/cesium/Build/Cesium",
+                "output": "/assets/cesium"
+              },
               "src/configuration.json"
             ],
             "styles": [
               "src/styles.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/font-awesome/css/font-awesome.min.css",              
-              "fonts/FMIconFont/style.css"
+              "fonts/FMIconFont/style.css",
+              "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
+              "node_modules/ol/ol.css"
             ],
             "scripts": [],
             "es5BrowserSupport": true

package-lock.json

@@ -4,6 +4,20 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@angular-builders/custom-webpack": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-9.1.0.tgz",
+      "integrity": "sha512-Dek6KxNUFBELKqNRO4Im5JIP0/rZF4HmvgA8X+RyqOd9cyDxk16A441WlqTqy3UKX8lcbf6C9RcR5D2dI1ZATQ==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/architect": ">=0.900.0 < 0.1000.0",
+        "@angular-devkit/build-angular": ">=0.900.0 < 0.1000.0",
+        "@angular-devkit/core": "^9.0.0",
+        "lodash": "^4.17.10",
+        "ts-node": "^8.5.2",
+        "webpack-merge": "^4.2.1"
+      }
+    },
     "@angular-devkit/architect": {
       "version": "0.901.0",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.0.tgz",
@@ -2692,14 +2706,12 @@
       }
     },
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.349",
+      "version": "0.0.1-prerelease.398",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.349.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.398.tgz",
-      "integrity": "sha512-CLANnjefX8vpIIOHX/eutPG9H/7PD/rgG5HH/VhmXjTwSjU97W4xf+iLow4SvukVFfikQ1EDnWECx/6uKKRIUg=="
+      "integrity": "sha512-lAOHGwYFUSE4lTqiSIbANbP6KJoAW0uEgor8ag2ridTRHE8X5skj3wYZIkzYOhUA8njPEju+U6wwW8e4wshlCw=="
     },
     "@farmmaps/common-map": {
-      "version": "0.0.1-prerelease.360",
+      "version": "file:dist/common-map"
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.360.tgz",
-      "integrity": "sha512-V7cWPiTHS1gIahwCpt32Qcv+wHxdOWg/+LzmP2x/6X9cJnC0L6XDR5rJFvS8zpGeRJiunq7cSFCm/22MOpnRTQ=="
     },
     "@istanbuljs/schema": {
       "version": "0.1.2",
@@ -4434,6 +4446,11 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "cesium": {
+      "version": "1.73.0",
+      "resolved": "https://registry.npmjs.org/cesium/-/cesium-1.73.0.tgz",
+      "integrity": "sha512-HqvxPbCEsE1Szdm5qPIrBNjHG2cJ9Xk5uYMELmG0GuBL/sYaQ/0IMton43LUBY4E/wblRivNo1Vz7tIQweraFw=="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -9443,6 +9460,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10085,6 +10107,11 @@
         "rbush": "^3.0.1"
       }
     },
+    "ol-cesium": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/ol-cesium/-/ol-cesium-2.11.3.tgz",
+      "integrity": "sha512-rdjk2BjNgSQF1i6wV2FfmGATAdnaLQ5d7DMIhIBoxRVpUYvOOp7swptIQZLDXQMVzqkVJUoY7AKFLEFLbUV+TQ=="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

package.json

@@ -19,8 +19,8 @@
     "@angular/platform-browser": "~9.1.0",
     "@angular/platform-browser-dynamic": "~9.1.0",
     "@angular/router": "~9.1.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.349 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.398 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.349 <0.0.1",
+    "@farmmaps/common-map": "file:dist/common-map",
     "@microsoft/signalr": "^3.1.3",
     "@ng-bootstrap/ng-bootstrap": "^6.0",
     "@ngrx/effects": "^9.0",
@@ -28,21 +28,24 @@
     "@ngrx/store": "^9.0",
     "angular-oauth2-oidc": "^9.1",
     "bootstrap": "^4.4.1",
+    "cesium": "^1.73.0",
     "core-js": "^2.6.11",
     "font-awesome": "^4.7.0",
+    "moment": "^2.27.0",
     "ngrx-store-localstorage": "^9.0",
     "ngx-bootstrap": "^5.6.1",
     "ngx-openlayers": "1.0.0-next.13",
     "ngx-uploadx": "^3.5.1",
     "ol": "6.1.1",
+    "ol-cesium": "^2.11.3",
     "resumablejs": "^1.1.0",
     "rxjs": "^6.5.4",
     "tassign": "^1.0.0",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
+    "zone.js": "~0.10.2"
-    "moment": "^2.27.0"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "9.1.0",
     "@angular-devkit/build-angular": "~0.901.0",
     "@angular-devkit/build-ng-packagr": "~0.901.0",
     "@angular/cli": "^9.1.0",

projects/common-map/package.json

@@ -11,7 +11,7 @@
     "@ngrx/router-store": "^9.0",
     "@ngrx/store": "^9.0",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.308 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.398 <0.0.1",
     "ngx-openlayers": "1.0.0-next.13",
     "ol": "6.1.1"
   }

projects/common-map/src/fm-map/common-map.module.ts

@@ -24,7 +24,7 @@ import { IPeriodState } from './models/period.state';
 
 // components
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
-//import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
+import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
 import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
 import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
 import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
@@ -102,6 +102,7 @@ export {
   MapComponent,
   MetaDataModalComponent,
   RotationResetComponent,
+  Switch2D3DComponent,
   MapSearchComponent,
   SelectPeriodModalComponent,
   LayerListComponent,
@@ -170,6 +171,7 @@ export {
     MapComponent,
     MetaDataModalComponent,
     RotationResetComponent,
+    Switch2D3DComponent,
     MapSearchComponent,
     SelectPeriodModalComponent,
     LayerListComponent,
@@ -240,6 +242,7 @@ export {
        ItemWidgetListComponent,
        WidgetStatusComponent,
        RotationResetComponent,
+       Switch2D3DComponent,
        MapSearchComponent,
        SelectPeriodModalComponent,
        LayerListComponent,

projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts

@@ -1,40 +1,40 @@
-// import { Component, OnInit,Input  } from '@angular/core';
+import { Component, OnInit,Input,Host  } from '@angular/core';
-//import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ngx-openlayers';
-//import OLCesium from 'olcs/OLCesium.js';
+import OLCesium from 'ol-cesium';
 
 
-// @Component({
+@Component({
-//   selector: 'fm-map-switch2d3d',
+  selector: 'fm-map-switch2d3d',
-//   template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
+  template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
-//   styles: [`.twotreed {
+  styles: [`.twotreed {
-//     width:2.5em;
+    width:2.5em;
-//     height:2.5em;
+    height:2.5em;
-//     background-color: white;
+    background-color: white;
-//     text-align:center;
+    text-align:center;
-//     line-height:2.5em;
+    line-height:2.5em;
-//     font-weight:bold;
+    font-weight:bold;
-//     cursor:default;}`]
+    cursor:default;}`]
 
-// })
+})
-// export class Switch2D3DComponent {
+export class Switch2D3DComponent {
 
-//   @Input() enable:boolean;
+  @Input() enable:boolean;
-//   public label: string = "3D";
+  public label: string = "3D";
-//   private ol3d: OLCesium;
+  private ol3d: OLCesium;
 
 
-//   constructor(private map: MapComponent) {
+  constructor(@Host() private map: MapComponent) {
     
-//   }
+  }
 
-//   ngOnInit() {
+  ngOnInit() {
-//     this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
+    this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
-//   }
+  }
 
-//   handleClick(event) {
+  handleClick(event) {
-//     this.enable = !this.enable;
+    this.enable = !this.enable;
-//     if (this.enable)
+    if (this.enable)
-//       this.ol3d.setEnabled(this.enable);
+      this.ol3d.setEnabled(this.enable);
-//       this.label = this.enable?"2D":"3D";
+      this.label = this.enable?"2D":"3D";
-//   }
+  }
-// }
+}

projects/common-map/src/fm-map/components/map/map.component.html

@@ -39,7 +39,7 @@
     </aol-layer-vector>
     <fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="true" [heading]="state.compassHeading"></fm-map-gps-location>
     <div class="control-container">
-  <!--    <switch2d3d></switch2d3d>-->
+     <fm-map-switch2d3d></fm-map-switch2d3d>
       <fm-map-layer-switcher></fm-map-layer-switcher>
       <fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
       <fm-map-rotation-reset></fm-map-rotation-reset>

src/main.ts

@@ -1,12 +1,19 @@
+import * as Cesium from 'cesium'
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+
+
 if (environment.production) {
   enableProdMode();
 }
 
+window['CESIUM_BASE_URL'] = '/assets/cesium/';
+window['Cesium'] = Cesium;
+
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));