From 22e007b70bf7ca47653ea4bf94d6a6f19f817d54 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Fri, 18 Sep 2020 08:38:05 +0200 Subject: [PATCH] First attempt to bring back 3D view in map --- angular.json | 9 ++- package-lock.json | 39 +++++++-- package.json | 11 ++- projects/common-map/package.json | 2 +- .../src/fm-map/common-map.module.ts | 5 +- .../aol/switch2d3d/switch2d3d.component.ts | 80 +++++++++---------- .../fm-map/components/map/map.component.html | 2 +- src/main.ts | 7 ++ 8 files changed, 101 insertions(+), 54 deletions(-) diff --git a/angular.json b/angular.json index dbe82e7..e346a4f 100644 --- a/angular.json +++ b/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 diff --git a/package-lock.json b/package-lock.json index a6a9530..893b90f 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.349.tgz", - "integrity": "sha512-CLANnjefX8vpIIOHX/eutPG9H/7PD/rgG5HH/VhmXjTwSjU97W4xf+iLow4SvukVFfikQ1EDnWECx/6uKKRIUg==" + "version": "0.0.1-prerelease.398", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.398.tgz", + "integrity": "sha512-lAOHGwYFUSE4lTqiSIbANbP6KJoAW0uEgor8ag2ridTRHE8X5skj3wYZIkzYOhUA8njPEju+U6wwW8e4wshlCw==" }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.360", - "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==" + "version": "file:dist/common-map" }, "@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", diff --git a/package.json b/package.json index 4074ffd..c90ca9a 100644 --- a/package.json +++ b/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-map": ">=0.0.1-prerelease.349 <0.0.1", + "@farmmaps/common": ">=0.0.1-prerelease.398 <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", - "moment": "^2.27.0" + "zone.js": "~0.10.2" }, "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", diff --git a/projects/common-map/package.json b/projects/common-map/package.json index ce20ab4..bfea8b9 100644 --- a/projects/common-map/package.json +++ b/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" } diff --git a/projects/common-map/src/fm-map/common-map.module.ts b/projects/common-map/src/fm-map/common-map.module.ts index 588732c..0666c5b 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/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, diff --git a/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts b/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts index 5e1c22a..090e5ea 100644 --- a/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts +++ b/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts @@ -1,40 +1,40 @@ -// import { Component, OnInit,Input } from '@angular/core'; -//import { MapComponent } from 'ngx-openlayers'; -//import OLCesium from 'olcs/OLCesium.js'; - - -// @Component({ -// selector: 'fm-map-switch2d3d', -// template: '
{{label}}
', -// styles: [`.twotreed { -// width:2.5em; -// height:2.5em; -// background-color: white; -// text-align:center; -// line-height:2.5em; -// font-weight:bold; -// cursor:default;}`] - -// }) -// export class Switch2D3DComponent { - -// @Input() enable:boolean; -// public label: string = "3D"; -// private ol3d: OLCesium; - - -// constructor(private map: MapComponent) { - -// } - -// ngOnInit() { -// this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance -// } - -// handleClick(event) { -// this.enable = !this.enable; -// if (this.enable) -// this.ol3d.setEnabled(this.enable); -// this.label = this.enable?"2D":"3D"; -// } -// } +import { Component, OnInit,Input,Host } from '@angular/core'; +import { MapComponent } from 'ngx-openlayers'; +import OLCesium from 'ol-cesium'; + + +@Component({ + selector: 'fm-map-switch2d3d', + template: '
{{label}}
', + styles: [`.twotreed { + width:2.5em; + height:2.5em; + background-color: white; + text-align:center; + line-height:2.5em; + font-weight:bold; + cursor:default;}`] + +}) +export class Switch2D3DComponent { + + @Input() enable:boolean; + public label: string = "3D"; + private ol3d: OLCesium; + + + constructor(@Host() private map: MapComponent) { + + } + + ngOnInit() { + this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance + } + + handleClick(event) { + this.enable = !this.enable; + if (this.enable) + this.ol3d.setEnabled(this.enable); + this.label = this.enable?"2D":"3D"; + } +} diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index 2b71672..8b807a6 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.html +++ b/projects/common-map/src/fm-map/components/map/map.component.html @@ -39,7 +39,7 @@
- + diff --git a/src/main.ts b/src/main.ts index c7b673c..9a03fb3 100644 --- a/src/main.ts +++ b/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));