diff --git a/.gitignore b/.gitignore index 2a7ed1b..0958d60 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,5 @@ projects/common-map/node_modules/ .angular/* projects/common-map3d/node_modules/ projects/common-map/node_modules/ +projects/ngx-openlayers/node_modules/ projects/common/node_modules/ diff --git a/README.md b/README.md index 8887918..54b3e9d 100644 --- a/README.md +++ b/README.md @@ -51,9 +51,9 @@ npm install -g @angular/cli npm install ng serve ``` -*Go* +*Go*` -Point your browser to http://localhost:4200 +Point your browser to http://localhost:4200 *ESLint* diff --git a/angular.json b/angular.json index 8da460f..6d06409 100644 --- a/angular.json +++ b/angular.json @@ -215,7 +215,7 @@ "tsConfig": "projects/common-map/tsconfig.lib.prod.json" } } -}, + }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { @@ -253,6 +253,43 @@ } } } + }, + "ngx-openlayers": { + "projectType": "library", + "root": "projects/ngx-openlayers", + "sourceRoot": "projects/ngx-openlayers/src", + "prefix": "lib", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "tsConfig": "projects/ngx-openlayers/tsconfig.lib.json", + "project": "projects/ngx-openlayers/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/ngx-openlayers/tsconfig.lib.prod.json" + } + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "projects/ngx-openlayers/src/test.ts", + "tsConfig": "projects/ngx-openlayers/tsconfig.spec.json", + "karmaConfig": "projects/ngx-openlayers/karma.conf.js" + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "projects/ngx-openlayers/**/*.ts", + "projects/ngx-openlayers/**/*.html" + ] + } + } + } } }, "cli": { diff --git a/package.json b/package.json index ad91ae7..8a4749e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "farmmaps-lib-app", - "version": "4.0.1", - "scripts": { + "version": "4.2.0", + "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", @@ -10,24 +10,25 @@ "e2e": "ng e2e" }, "private": true, - "dependencies": { - "@angular/animations": "^14.1.3", - "@angular/common": "^14.1.3", - "@angular/compiler": "^14.1.3", - "@angular/core": "^14.1.3", + "dependencies": { + "@angular/animations": "^16.2.12", + "@angular/common": "^16.2.12", + "@angular/compiler": "^16.2.12", + "@angular/core": "^16.2.12", "@angular-eslint/eslint-plugin": "^15.2.1", - "@angular/forms": "^14.1.3", - "@angular/platform-browser": "^14.1.3", - "@angular/platform-browser-dynamic": "^14.1.3", - "@angular/router": "^14.1.3", + "@angular/forms": "^16.2.12", + "@angular/platform-browser": "^16.2.12", + "@angular/platform-browser-dynamic": "^16.2.12", + "@angular/router": "^16.2.12", "@farmmaps/common": "file:dist/common", "@farmmaps/common-map": "file:dist/common-map", "@farmmaps/common-map3d": "file:dist/common-map3d", + "ngx-openlayers": "file:dist/ngx-openlayers", "@microsoft/signalr": "^3.1.16", - "@ng-bootstrap/ng-bootstrap": "^13.0.0", - "@ngrx/effects": "^14", - "@ngrx/router-store": "^14", - "@ngrx/store": "^14", + "@ng-bootstrap/ng-bootstrap": "^15.0.0", + "@ngrx/effects": "^16", + "@ngrx/router-store": "^16", + "@ngrx/store": "^16", "@popperjs/core": "^2.11.6", "angular-oauth2-oidc": "^13", "assert": "^2.0.0", @@ -38,13 +39,12 @@ "core-js": "^2.6.12", "https-browserify": "^1.0.0", "moment": "^2.29.4", - "ngrx-store-localstorage": "^14", - "ngx-avatar": "^4.1.0", - "ngx-clipboard": "^14.0.1", - "ngx-image-cropper": "^3.3.5", - "ngx-openlayers": "1.0.0-next.19", + "ngrx-store-localstorage": "16.0.0", + "ngx-avatars": "1.5.0", + "ngx-clipboard": "^15.1.0", + "ngx-image-cropper": "^7.2.1", "ngx-uploadx": "^5.2.0", - "ol": "6.14.1", + "ol": "~6.3.1", "olcs": "^2.13.1", "resumablejs": "^1.1.0", "rxjs": "^7.8.1", @@ -54,22 +54,22 @@ "tslib": "^2.4.0", "url": "^0.11.0", "util": "^0.12.4", - "zone.js": "~0.11.4" + "zone.js": "~0.13.3" }, - "devDependencies": { - "@angular-builders/custom-webpack": "^14", - "@angular-devkit/build-angular": "^14.1.3", - "@angular/cli": "^14.1.3", - "@angular/compiler-cli": "^14.1.3", - "@angular/language-service": "^14.1.3", - "@angular/localize": "^14.1.3", + "devDependencies": { + "@angular-builders/custom-webpack": "^15", + "@angular-devkit/build-angular": "^16.2.11", + "@angular/cli": "^16.2.11", + "@angular/compiler-cli": "^16.2.12", + "@angular/language-service": "^16.2.12", + "@angular/localize": "^16.2.12", "@types/arcgis-rest-api": "^10.4.5", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "^2.0.9", "@types/node": "^12.20.15", - "@typescript-eslint/eslint-plugin": "^5.54.0", - "@typescript-eslint/eslint-plugin-tslint": "^5.54.0", - "@typescript-eslint/parser": "^5.54.0", + "@typescript-eslint/eslint-plugin": "^6.18.0", + "@typescript-eslint/eslint-plugin-tslint": "^6.18.0", + "@typescript-eslint/parser": "^6.18.0", "codelyzer": "^0.0.28", "eslint": "^8.35.0", "eslint-config-prettier": "^8.6.0", @@ -81,9 +81,9 @@ "karma-coverage-istanbul-reporter": "^3.0.3", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", - "ng-packagr": "^14.1.0", + "ng-packagr": "^16.2.3", "protractor": "~7.0.0", "ts-node": "^8.8.1", - "typescript": "~4.6.4" + "typescript": "~4.9.3" } } \ No newline at end of file diff --git a/projects/common-map/package-lock.json b/projects/common-map/package-lock.json index 7282916..6039ac4 100644 --- a/projects/common-map/package-lock.json +++ b/projects/common-map/package-lock.json @@ -11,14 +11,14 @@ "tslib": "^2.0.0" }, "peerDependencies": { - "@angular/core": ">=14.0.0", - "@ngrx/effects": ">=14.0.0", - "@ngrx/router-store": ">=14.0.0", - "@ngrx/store": ">=14.0.0", - "ngrx-store-localstorage": ">=14.0.0", - "ngx-openlayers": ">=1.0.0-next.19", + "@angular/core": "^16.2.12", + "@ngrx/effects": "^16", + "@ngrx/router-store": "^16", + "@ngrx/store": "^16", + "ngrx-store-localstorage": "16.0.0", + "ngx-openlayers": "file:dist/ngx-openlayers", "ol": ">=6.8.1", - "tassign": ">=1.0.0" + "tassign": ">1.0.0" } }, "node_modules/tslib": { diff --git a/projects/common-map/package.json b/projects/common-map/package.json index a742667..aff16c0 100644 --- a/projects/common-map/package.json +++ b/projects/common-map/package.json @@ -8,13 +8,13 @@ "tslib": "^2.0.0" }, "peerDependencies": { - "@angular/core": ">=14.0.0", - "ngrx-store-localstorage": ">=14.0.0", - "@ngrx/effects": ">=14.0.0", - "@ngrx/router-store":">=14.0.0", - "@ngrx/store":">=14.0.0", - "tassign": ">=1.0.0", - "ngx-openlayers": ">=1.0.0-next.19", + "@angular/core": "^16.2.12", + "ngrx-store-localstorage": "16.0.0", + "@ngrx/effects": "^16", + "@ngrx/router-store": "^16", + "@ngrx/store": "^16", + "tassign": ">1.0.0", + "ngx-openlayers": "file:dist/ngx-openlayers", "ol": ">=6.8.1" } } diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index 50377f6..5225421 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/projects/common-map/src/fm-map/actions/map.actions.ts @@ -18,6 +18,7 @@ export const SETPARENT = '[Map] SetParent'; export const SETPERIOD = '[Map] SetPeriod'; export const STARTSEARCH = '[Map] StartSearch'; export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess'; +export const CLICKFEATURE = '[Map] ClickFeature'; export const SELECTFEATURE = '[Map] SelectFeature'; export const SELECTITEM = '[Map] SelectItem'; export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess'; @@ -56,6 +57,7 @@ export const GETLAYERVALUE = '[Map] GetLayerValue' export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess' export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide' export const SETVIEWSTATE = '[Map] SetViewState' +export const CLEARFEATURES = '[Map] ClearFeatures'; export class Clear implements Action { @@ -111,6 +113,12 @@ export class StartSearchSuccess implements Action { constructor(public features: Array>, public query:IQueryState) { } } +export class ClickFeature implements Action { + readonly type = CLICKFEATURE; + + constructor(public feature:Feature) { } +} + export class SelectFeature implements Action { readonly type = SELECTFEATURE; @@ -329,12 +337,18 @@ export class SetViewState implements Action { constructor(public enabled:boolean) {} } +export class ClearFeatures implements Action { + readonly type = CLEARFEATURES; + constructor() {} +} + export type Actions = SetMapState | Init | Clear | SetParent | StartSearch | StartSearchSuccess + | ClickFeature | SelectFeature | SelectItem | SelectItemSuccess @@ -374,5 +388,6 @@ export type Actions = SetMapState | GetLayerValue | SetPeriod | ToggleShowDataLayerSlide - | SetViewState; + | SetViewState + | ClearFeatures; diff --git a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss index 0a0f8f6..f7e6679 100644 --- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss +++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss @@ -1,6 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - .gps-location { display:none; } @@ -14,7 +11,7 @@ } .tolerance { - fill: $primary; + fill: var(--bs-primary); fill-opacity:0.4; } @@ -23,20 +20,20 @@ } .border { - fill: $white; + fill: var(--bs-white); } .center { - fill: $primary; + fill: var(--bs-primary); } .stop1 { - stop-color: $primary; + stop-color: var(--bs-primary); stop-opacity:1; } .stop2 { - stop-color:$primary; + stop-color:var(--bs-primary); stop-opacity: 0; } diff --git a/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss b/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss index 8950a6d..86f16ea 100644 --- a/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss +++ b/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss @@ -1,11 +1,8 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - .gps-location { display:block; width:2.5em; height:2.5em; - background-color: $body-bg; + background-color: var(--bs-body-bg); background-size: contain; margin-top:0.5em; border-radius: 1.75em; @@ -17,15 +14,15 @@ } .pan-to { - fill: $secondary; + fill: var(--bs-secondary); } div.gps-location:hover .pan-to { - fill: $white; + fill: var(--bs-white); } .pan-to-centered { - fill: $primary; + fill: var(--bs-primary); } div.gps-location:hover .pan-to-centered { @@ -33,5 +30,5 @@ div.gps-location:hover .pan-to-centered { } .pan-to.pan-to-disabled { - fill: $gray-300; + fill: var(--bs-gray-300); } diff --git a/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss b/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss index a8f7275..bca2a16 100644 --- a/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss +++ b/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .compass { width:2.5em; height:2.5em; @@ -13,7 +11,7 @@ #north { display: none; - fill:$black; + fill:var(--bs-black); } #top-l { @@ -33,23 +31,23 @@ } div.compass:hover #top-l { - fill:$white; + fill:var(--bs-white); } div.compass:hover #top-r { - fill:$gray-300; + fill:var(--bs-gray-300); } div.compass:hover #bottom-l { - fill:$gray-300; + fill:var(--bs-gray-300); } div.compass:hover #bottom-r { - fill:$white; + fill:var(--bs-white); } div.compass:hover #north { - fill:$white; + fill:var(--bs-white); } .compass-n { diff --git a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss b/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss index 68bded7..2557c03 100644 --- a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss @@ -1,14 +1,10 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - - .row { - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid var(--bs-gray-500); user-select: none; } .row.selected { - background-color: $gray-100; + background-color: var(--bs-gray-100); } @media screen and (min-width: 44rem) { diff --git a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts b/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts index da05c3f..e9a332c 100644 --- a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts +++ b/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts @@ -64,9 +64,9 @@ export class FeatureListContainerComponent { viewContainerRef.clear(); if(showItem) { this.componentRef = viewContainerRef.createComponent(componentFactory); - (this.componentRef.instance).features = null; - (this.componentRef.instance).queryState = queryState; - (this.componentRef.instance).selectedFeature = null; + (this.componentRef.instance).features = this.features; + (this.componentRef.instance).queryState = this.queryState; + (this.componentRef.instance).selectedFeature = this.selectedFeature; } } diff --git a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss index 0c480cc..5db84ec 100644 --- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss @@ -1,22 +1,20 @@ -@import "~bootstrap/scss/bootstrap.scss"; - fm-map-feature-list-feature-container { width:100%; pointer-events:none; } .row { - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid var(--bs-gray-500); user-select: none; padding-left:1.5rem; } .row.selected { - background-color: $gray-100; + background-color: var(--bs-gray-100); } .cropfields { - border-top: 1px solid $gray-500; + border-top: 1px solid var(--bs-gray-500); margin-left: -1.25rem; margin-right: -1.25rem; } diff --git a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss index 79ea26a..a45e5ab 100644 --- a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss @@ -1,22 +1,20 @@ -@import "~bootstrap/scss/bootstrap.scss"; - fm-map-feature-list-feature-container { width:100%; pointer-events:none; } .row { - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid var(--bs-gray-500); user-select: none; padding-left:1.5rem; } .row.selected { - background-color: $gray-100; + background-color: var(--bs-gray-100); } .farms { - border-top: 1px solid $gray-500; + border-top: 1px solid var(--bs-gray-500); margin-left: -1.25rem; margin-right: -1.25rem; } diff --git a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss b/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss index eed8c6a..0af39a5 100644 --- a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss @@ -1,7 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - - .card-title { font-size: 1rem; white-space: nowrap; diff --git a/projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.scss b/projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.scss index da7a010..0ea6722 100644 --- a/projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.scss @@ -1,7 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - - .card-title { font-size: 1rem; white-space: nowrap; diff --git a/projects/common-map/src/fm-map/components/feature-list-feature/feature-list-feature.component.scss b/projects/common-map/src/fm-map/components/feature-list-feature/feature-list-feature.component.scss index ca5aac2..ba2bf98 100644 --- a/projects/common-map/src/fm-map/components/feature-list-feature/feature-list-feature.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list-feature/feature-list-feature.component.scss @@ -1,7 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - - .card-title { font-size: 1rem; white-space: nowrap; diff --git a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss index 7e8b6e5..09ea065 100644 --- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss +++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss @@ -1,15 +1,13 @@ -@import "~bootstrap/scss/bootstrap.scss"; - fm-map-feature-list-feature-container { width: 100%; pointer-events: none; } .row { - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid var(--bs-gray-500); user-select: none; } .row.selected { - background-color: $gray-100; + background-color: var(--bs-gray-100); } diff --git a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts index d81bdcf..4f359df 100644 --- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts +++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts @@ -23,8 +23,9 @@ export abstract class AbstractFeatureListComponent { handleFeatureClick(feature:Feature) { if(feature) { + this.store.dispatch(new mapActions.ClickFeature(feature)); const action = this.getAction(feature); - this.store.dispatch(action); + this.store.dispatch(action); } } diff --git a/projects/common-map/src/fm-map/components/item-list-item/item-list-item.component.scss b/projects/common-map/src/fm-map/components/item-list-item/item-list-item.component.scss index ed170c3..872789a 100644 --- a/projects/common-map/src/fm-map/components/item-list-item/item-list-item.component.scss +++ b/projects/common-map/src/fm-map/components/item-list-item/item-list-item.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .widget { padding:0.8rem; height:100%; diff --git a/projects/common-map/src/fm-map/components/item-list/item-list.component.scss b/projects/common-map/src/fm-map/components/item-list/item-list.component.scss index 36a067f..cf5062e 100644 --- a/projects/common-map/src/fm-map/components/item-list/item-list.component.scss +++ b/projects/common-map/src/fm-map/components/item-list/item-list.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .widget-container { overflow:auto; margin-bottom:1rem; @@ -7,7 +5,7 @@ .widget { position:relative; - border: 1px solid $gray-500; + border: 1px solid var(--bs-gray-500); user-select: none; display:inline-block; width:50%; @@ -28,7 +26,7 @@ } .widget:hover { - background-color: $gray-100; + background-color: var(--bs-gray-100); } .widget-container { diff --git a/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.scss b/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.scss index 92bc338..cde5020 100644 --- a/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.scss +++ b/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .widget-container { overflow:auto; margin-bottom:1rem; @@ -7,7 +5,7 @@ .widget { position:relative; - border: 1px solid $gray-500; + border: 1px solid var(--bs-gray-500); user-select: none; display:inline-block; width:50%; @@ -28,7 +26,7 @@ } .widget:hover { - background-color: $gray-100; + background-color: var(--bs-gray-100); } .widget-container { diff --git a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss index ebe5405..03a2bc0 100644 --- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss +++ b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss @@ -1,18 +1,15 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - .layer-switcher { display:block; width:2.5em; height:2.5em; - background-color: $body-bg; + background-color: var(--bs-body-bg); background-size: contain; margin-top:0.5em; text-align: center; line-height: 2.5em; border-radius: 1.75em; padding: 0; - color: $secondary; + color: var(--bs-secondary); } .layer-switcher i { @@ -24,7 +21,7 @@ } .layers { - color:$secondary; + color:var(--bs-secondary); position: absolute; overflow: hidden; bottom: -1em; diff --git a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html index 210a026..34c8a54 100644 --- a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html +++ b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html @@ -1,15 +1,15 @@
Average:
-
{{histogram.mean| number:'1.0-2'}}
+
{{ getScaledValue(histogram.mean)| number:'1.0-2'}}
Standard deviation:
-
{{histogram.stddev| number:'1.0-2'}}
+
{{ getScaledValue(histogram.stddev)| number:'1.0-2'}}
Min:
-
{{histogram.min| number:'1.0-2'}}
+
{{ getScaledValue(histogram.min)| number:'1.0-2'}}
Max:
-
{{histogram.max| number:'1.0-2'}}
+
{{ getScaledValue(histogram.max)| number:'1.0-2'}}
Confidence interval:
-
{{histogram.confidence * 100| number:'1.0-0'}}%
+
{{ getScaledValue(histogram.confidence * 100)| number:'1.0-0'}}%
diff --git a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts index e02a0cf..29cfa8e 100644 --- a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts +++ b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts @@ -14,6 +14,17 @@ export class HistogramDetailsComponent { @Input() histogram: IHistogram; + @Input() + scale: number | null; + + public getScaledValue(value: number): number { + let v = value; + if (this.scale && this.scale != 0) { + v = this.scale * value; + } + return v; + } + showConfidenceInterval(): boolean { return this.histogram.confidence != null && this.histogram.confidence !== 1; } diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.html b/projects/common-map/src/fm-map/components/legend/legend.component.html index e30e66a..f81496d 100644 --- a/projects/common-map/src/fm-map/components/legend/legend.component.html +++ b/projects/common-map/src/fm-map/components/legend/legend.component.html @@ -35,7 +35,7 @@ - + diff --git a/projects/common-map/src/fm-map/components/map-search/map-search.component.scss b/projects/common-map/src/fm-map/components/map-search/map-search.component.scss index 65b673c..7eb4114 100644 --- a/projects/common-map/src/fm-map/components/map-search/map-search.component.scss +++ b/projects/common-map/src/fm-map/components/map-search/map-search.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - div.map-search { position: absolute; top: 0.5rem; @@ -106,7 +104,7 @@ div.map-search.searchcollapsed button[type="submit"] { } .form-control, .form-control:focus { - border-color: $secondary; + border-color: var(--bs-secondary); } diff --git a/projects/common-map/src/fm-map/components/map/map.component.scss b/projects/common-map/src/fm-map/components/map/map.component.scss index dec735c..df5e219 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.scss +++ b/projects/common-map/src/fm-map/components/map/map.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - aol-map { position:absolute;width:100%;height:calc( 100vh );} .arrow { @@ -195,7 +193,7 @@ timespan.menuVisible { width: 4rem; overflow: hidden; text-overflow: ellipsis; - color: $primary; + color: var(--bs-primary); } .shortcut-icon > .farm-icon { diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 692ae43..a3f3b04 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.ts +++ b/projects/common-map/src/fm-map/components/map/map.component.ts @@ -192,6 +192,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } handleFeatureClick(feature: Feature) { + this.store.dispatch(new mapActions.ClickFeature(feature)); this.clickedFeature.next(feature); } diff --git a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.scss b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.scss index 34636d4..0a55c40 100644 --- a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.scss @@ -1,13 +1,9 @@ -@import "~bootstrap/scss/bootstrap.scss"; - - - .row { - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid var(--bs-gray-500); user-select: none; } .row:hover { - background-color: $gray-100; + background-color: var(--bs-gray-100); } diff --git a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss index 9a2f30f..6f2ee2f 100644 --- a/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .big-icon { width: 100%; color: white; diff --git a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss index 0dc571f..f1980d3 100644 --- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .big-icon { width: 100%; color: white; diff --git a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss index e4995c5..9f5978b 100644 --- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .big-icon { width: 100%; color: white; diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss index 0dc571f..f1980d3 100644 --- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .big-icon { width: 100%; color: white; diff --git a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.scss b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.scss index a30d27c..b7c686e 100644 --- a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.scss +++ b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .big-icon { width: 100%; color: white; diff --git a/projects/common-map/src/fm-map/effects/map.effects.ts b/projects/common-map/src/fm-map/effects/map.effects.ts index a411723..b8f9681 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -41,7 +41,7 @@ export const { selectRouteParam, // factory function to select a route param selectRouteData, // select the current route data selectUrl, // select the current url -} = fromRouter.getSelectors(getRouterState); +} = fromRouter.getRouterSelectors(getRouterState); @Injectable() diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index b70ca44..fbd0fa3 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -388,6 +388,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo case mapActions.CLEARLAYERS: { return tassign(state, {overlayLayers: [], selectedOverlayLayer: null}); } + case mapActions.CLEARFEATURES: { + return tassign(state, {features: [], selectedFeature: null}); + } case mapActions.SETVISIBILITY: { const a = action as mapActions.SetVisibility; if(state.selectedItemLayer == a.itemLayer) { diff --git a/projects/common-map/src/test.ts b/projects/common-map/src/test.ts index e771a35..b987c54 100644 --- a/projects/common-map/src/test.ts +++ b/projects/common-map/src/test.ts @@ -9,8 +9,6 @@ import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; - // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, @@ -18,7 +16,3 @@ getTestBed().initTestEnvironment( teardown: { destroyAfterEach: false } } ); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/projects/common-map/tsconfig.lib.json b/projects/common-map/tsconfig.lib.json index 5140cad..8c775b0 100644 --- a/projects/common-map/tsconfig.lib.json +++ b/projects/common-map/tsconfig.lib.json @@ -2,7 +2,6 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/lib", - "target": "es2020", "module": "es2015", "moduleResolution": "node", "declaration": true, diff --git a/projects/common-map/tsconfig.lib.prod.json b/projects/common-map/tsconfig.lib.prod.json index 3372986..d8b6e76 100644 --- a/projects/common-map/tsconfig.lib.prod.json +++ b/projects/common-map/tsconfig.lib.prod.json @@ -2,7 +2,6 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/lib", - "target": "es2020", "module": "es2015", "moduleResolution": "node", "declaration": true, diff --git a/projects/common-map3d/package-lock.json b/projects/common-map3d/package-lock.json index 2039ad5..19ddd44 100644 --- a/projects/common-map3d/package-lock.json +++ b/projects/common-map3d/package-lock.json @@ -11,10 +11,10 @@ "tslib": "^2.0.0" }, "peerDependencies": { - "@angular/common": ">=14.0.0", - "@angular/core": ">=14.0.0", + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", "cesium": ">=1.82.1", - "ngx-openlayers": "1.0.0-next.19", + "ngx-openlayers": "file:dist/ngx-openlayers", "ol-cesium": ">=2.13.0" } }, diff --git a/projects/common-map3d/package.json b/projects/common-map3d/package.json index 4868c2d..99773f9 100644 --- a/projects/common-map3d/package.json +++ b/projects/common-map3d/package.json @@ -5,9 +5,9 @@ "registry": "https://repository.akkerweb.nl/repository/npm-hosted/" }, "peerDependencies": { - "@angular/common": ">=14.0.0", - "@angular/core": ">=14.0.0", - "ngx-openlayers": "1.0.0-next.19", + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", + "ngx-openlayers": "file:dist/ngx-openlayers", "cesium": ">=1.82.1", "ol-cesium": ">=2.13.0" }, diff --git a/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.scss b/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.scss index e1189e6..885c5c7 100644 --- a/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.scss +++ b/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.scss @@ -1,17 +1,15 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .twotreed { display:block; width:2.5em; height:2.5em; - background-color: $body-bg; + background-color: var(--bs-body-bg); background-size: contain; margin-top:0.5em; text-align: center; line-height: 2.5em; border-radius: 1.75em; padding: 0; - color: $secondary; + color: var(--bs-secondary); } .fa-spinner { diff --git a/projects/common-map3d/src/test.ts b/projects/common-map3d/src/test.ts index 9da8445..101d765 100644 --- a/projects/common-map3d/src/test.ts +++ b/projects/common-map3d/src/test.ts @@ -8,13 +8,6 @@ import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; -}; - // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, @@ -22,7 +15,3 @@ getTestBed().initTestEnvironment( teardown: { destroyAfterEach: false } } ); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/projects/common/package-lock.json b/projects/common/package-lock.json index 9e693f0..7a3e029 100644 --- a/projects/common/package-lock.json +++ b/projects/common/package-lock.json @@ -8,22 +8,22 @@ "name": "@farmmaps/common", "version": "2.0.0", "peerDependencies": { - "@angular/common": ">=14.0.0", - "@angular/core": ">=14.0.0", - "@angular/forms": ">=14.0.0", - "@microsoft/signalr": ">=3.1.3", - "@ng-bootstrap/ng-bootstrap": ">=10.0.0", - "@ngrx/effects": ">=14.0.0", - "@ngrx/router-store": ">=14.0.0", - "@ngrx/store": ">=14.0.0", - "angular-oauth2-oidc": ">=13.0.0", - "bootstrap": ">=4.4.1", - "moment": ">=2.27.0", - "ngx-avatar": ">=4.1.0", - "ngx-clipboard": ">=14.0.1", - "ngx-image-cropper": ">=3.3.5", - "ngx-uploadx": ">=5.1.0", - "tassign": ">=1.0.0" + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", + "@angular/forms": "^16.2.12", + "@microsoft/signalr": ">3.1.3", + "@ng-bootstrap/ng-bootstrap": ">=15.0.0", + "@ngrx/effects": "^16", + "@ngrx/router-store": "^16", + "@ngrx/store": "^16", + "angular-oauth2-oidc": "^13", + "bootstrap": "^5.2.0", + "moment": "^2.29.4", + "ngx-avatars": "1.5.0", + "ngx-clipboard": ">15.1.0", + "ngx-image-cropper": ">7.2.1", + "ngx-uploadx": "^5.2.0", + "tassign": ">1.0.0" } } } diff --git a/projects/common/package.json b/projects/common/package.json index 2d27d0c..349d726 100644 --- a/projects/common/package.json +++ b/projects/common/package.json @@ -5,21 +5,21 @@ "registry": "https://repository.akkerweb.nl/repository/npm-hosted/" }, "peerDependencies": { - "@ng-bootstrap/ng-bootstrap": ">=10.0.0", - "@angular/common": ">=14.0.0", - "@angular/core": ">=14.0.0", - "@angular/forms": ">=14.0.0", - "@ngrx/effects": ">=14.0.0", - "@ngrx/router-store": ">=14.0.0", - "@ngrx/store": ">=14.0.0", - "tassign": ">=1.0.0", - "bootstrap": ">=4.4.1", - "@microsoft/signalr": ">=3.1.3", - "ngx-uploadx": ">=5.1.0", - "angular-oauth2-oidc": ">=13.0.0", - "moment": ">=2.27.0", - "ngx-avatar": ">=4.1.0", - "ngx-image-cropper": ">=3.3.5", - "ngx-clipboard": ">=14.0.1" + "@ng-bootstrap/ng-bootstrap": ">=15.0.0", + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", + "@angular/forms": "^16.2.12", + "@ngrx/effects": "^16", + "@ngrx/router-store": "^16", + "@ngrx/store": "^16", + "tassign": ">1.0.0", + "bootstrap": "^5.2.0", + "@microsoft/signalr": ">3.1.3", + "ngx-uploadx": "^5.2.0", + "angular-oauth2-oidc": "^13", + "moment": "^2.29.4", + "ngx-avatars": "1.5.0", + "ngx-image-cropper": ">7.2.1", + "ngx-clipboard": ">15.1.0" } } diff --git a/projects/common/src/fm/common-service.module.ts b/projects/common/src/fm/common-service.module.ts index ce5a272..445472e 100644 --- a/projects/common/src/fm/common-service.module.ts +++ b/projects/common/src/fm/common-service.module.ts @@ -18,6 +18,7 @@ import { EventService } from './services/event.service'; import { TypeaheadService } from './services/typeahead.service'; import { UserService } from './services/user.service'; import { ImageService } from './services/image.service'; +import { DownloadService } from './services/download.service'; import { GeolocatorService } from './services/geolocator.service'; import { WeatherService} from './services/weather.service'; import { AppConfig } from './shared/app.config'; @@ -48,6 +49,7 @@ export { TypeaheadService, UserService, ImageService, + DownloadService, GeolocatorService, WeatherService, AppConfig, diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index a352b6d..3f0ef16 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -68,7 +68,7 @@ import { BackButtonComponent } from './components/back-button/back-button.compon import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component'; import { AvatarComponent } from './components/avatar/avatar.component'; import { ItemLinkComponent } from './components/item-link/item-link.component'; -import { AvatarModule } from 'ngx-avatar'; +import { AvatarModule } from 'ngx-avatars'; import { ImageCropperModule } from 'ngx-image-cropper'; export const FM_COMMON_STARTPAGE = new InjectionToken('fm-common-startpage'); diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss index 763dc46..14da6dd 100644 --- a/projects/common/src/fm/components/app/app.component.scss +++ b/projects/common/src/fm/components/app/app.component.scss @@ -1,9 +1,3 @@ -/* Import Bootstrap & Fonts */ - -@import "~bootstrap/scss/bootstrap.scss"; - - - // custom styles .btn:focus { @@ -16,7 +10,7 @@ .form-control:focus { box-shadow: none; - border-color: $input-border-color; + border-color: var(--bs-input-border-color); } diff --git a/projects/common/src/fm/components/auth-callback/auth-callback.guard.ts b/projects/common/src/fm/components/auth-callback/auth-callback.guard.ts index 14b70e6..f3b7917 100644 --- a/projects/common/src/fm/components/auth-callback/auth-callback.guard.ts +++ b/projects/common/src/fm/components/auth-callback/auth-callback.guard.ts @@ -1,4 +1,4 @@ -import { Router, CanActivate } from '@angular/router'; +import { Router } from '@angular/router'; import { Injectable } from '@angular/core'; import { OAuthService } from 'angular-oauth2-oidc'; import { } from '@angular/router'; @@ -6,7 +6,7 @@ import { } from '@angular/router'; @Injectable({ providedIn: 'root', }) -export class AuthCallbackGuard implements CanActivate { +export class AuthCallbackGuard { constructor(private router$: Router,private oauthService$:OAuthService) {} diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html index 5e2d47e..01910bf 100644 --- a/projects/common/src/fm/components/avatar/avatar.component.html +++ b/projects/common/src/fm/components/avatar/avatar.component.html @@ -1,10 +1,10 @@ - - + \ No newline at end of file diff --git a/projects/common/src/fm/components/back-button/back-button.component.scss b/projects/common/src/fm/components/back-button/back-button.component.scss index d1a735f..9efccbe 100644 --- a/projects/common/src/fm/components/back-button/back-button.component.scss +++ b/projects/common/src/fm/components/back-button/back-button.component.scss @@ -1,12 +1,10 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .back-button { cursor: default; - color: $primary; + color: var(--bs-primary); display: block; } .back-button:hover { cursor: pointer; - color: $secondary; + color: var(--bs-secondary); } diff --git a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss index 3e520a4..55a33e1 100644 --- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss +++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss @@ -1,7 +1,3 @@ -/* Import Bootstrap & Fonts */ - -@import "~bootstrap/scss/bootstrap.scss"; - div.resumable-file-upload { position: fixed; right: 0px; @@ -76,7 +72,7 @@ div.card-header span.fa { } .upload-file.busy > div > span.fa-times { - color: $danger; + color: var(--bs-danger); width: 20px; display: inline-block; vertical-align: middle; @@ -94,7 +90,7 @@ div.card-header span.fa { } .upload-file > div.errormessage { - color: $danger; + color: var(--bs-danger); display: none; } diff --git a/projects/common/src/fm/services/auth-guard.service.ts b/projects/common/src/fm/services/auth-guard.service.ts index 46e77f7..5c619e8 100644 --- a/projects/common/src/fm/services/auth-guard.service.ts +++ b/projects/common/src/fm/services/auth-guard.service.ts @@ -1,11 +1,5 @@ import { Injectable } from '@angular/core'; -import { - CanActivate, Router, CanLoad, Route, CanActivateChild , - ActivatedRouteSnapshot, - RouterStateSnapshot, - UrlSegment, - UrlTree -} from '@angular/router'; +import { Router, Route, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router'; import { Store } from '@ngrx/store'; @@ -19,7 +13,7 @@ import * as appCommonReducer from '../reducers/app-common.reducer'; @Injectable({ providedIn: 'root', }) -export class AuthGuard implements CanActivate, CanLoad, CanActivateChild { +export class AuthGuard { constructor(private oauthService: OAuthService, private router: Router, private store: Store) { } diff --git a/projects/common/src/fm/services/download.service.ts b/projects/common/src/fm/services/download.service.ts new file mode 100644 index 0000000..62fe48a --- /dev/null +++ b/projects/common/src/fm/services/download.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { IItem } from '../models/item'; +import { HttpClient } from "@angular/common/http"; +import { AppConfig } from "../shared/app.config"; +import {ItemTypeService} from './itemtype.service'; + +@Injectable({ + providedIn: 'root', +}) +export class DownloadService { + constructor(public httpClient: HttpClient, public appConfig: AppConfig,private itemTypeService:ItemTypeService) { + } + + ApiEndpoint() { + return this.appConfig.getConfig("apiEndPoint"); + } + + getData(itemCode: string): Observable { + return this.httpClient.get(`${this.ApiEndpoint()}/api/v1/items/${itemCode}/data`); + } + + getData2(item: IItem): Observable { + if (item.size > 0) { + return this.httpClient.get(`${this.ApiEndpoint()}/api/v1/items/${item.code}/data`) + } + return of({}); + } +} diff --git a/projects/common/src/fm/services/full-screen-guard.service.ts b/projects/common/src/fm/services/full-screen-guard.service.ts index 9238eb4..292884c 100644 --- a/projects/common/src/fm/services/full-screen-guard.service.ts +++ b/projects/common/src/fm/services/full-screen-guard.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'; +import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Store } from '@ngrx/store'; @@ -10,7 +10,7 @@ import * as appCommonActions from '../actions/app-common.actions'; @Injectable({ providedIn: 'root', }) -export class FullScreenGuard implements CanActivate,CanActivateChild { +export class FullScreenGuard { private loginDispatched = false; constructor(private store: Store ) { } diff --git a/projects/common/src/fm/services/nav-bar-guard.service.ts b/projects/common/src/fm/services/nav-bar-guard.service.ts index be6b91e..83c4c0a 100644 --- a/projects/common/src/fm/services/nav-bar-guard.service.ts +++ b/projects/common/src/fm/services/nav-bar-guard.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { CanLoad, Route, CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; +import { Route, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Store } from '@ngrx/store'; @@ -10,7 +10,7 @@ import * as appCommonActions from '../actions/app-common.actions'; @Injectable({ providedIn: 'root', }) -export class NavBarGuard implements CanActivate { +export class NavBarGuard { private loginDispatched = false; constructor(private store: Store) { } diff --git a/projects/common/src/fm/services/package-guard.service.ts b/projects/common/src/fm/services/package-guard.service.ts index 74004fc..79c00bf 100644 --- a/projects/common/src/fm/services/package-guard.service.ts +++ b/projects/common/src/fm/services/package-guard.service.ts @@ -1,11 +1,11 @@ import {Injectable} from '@angular/core'; -import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router'; +import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import {PackageService} from './package.service'; @Injectable({ providedIn: 'root', }) -export class PackageGuard implements CanActivate { +export class PackageGuard { constructor(private packageService: PackageService) { } diff --git a/projects/common/src/test.ts b/projects/common/src/test.ts index e771a35..b987c54 100644 --- a/projects/common/src/test.ts +++ b/projects/common/src/test.ts @@ -9,8 +9,6 @@ import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; - // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, @@ -18,7 +16,3 @@ getTestBed().initTestEnvironment( teardown: { destroyAfterEach: false } } ); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/projects/common/tsconfig.lib.json b/projects/common/tsconfig.lib.json index 670cd24..59954cd 100644 --- a/projects/common/tsconfig.lib.json +++ b/projects/common/tsconfig.lib.json @@ -2,7 +2,6 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/lib", - "target": "es2020", "module": "es2015", "moduleResolution": "node", "declaration": true, diff --git a/projects/common/tsconfig.lib.prod.json b/projects/common/tsconfig.lib.prod.json index 3372986..d8b6e76 100644 --- a/projects/common/tsconfig.lib.prod.json +++ b/projects/common/tsconfig.lib.prod.json @@ -2,7 +2,6 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/lib", - "target": "es2020", "module": "es2015", "moduleResolution": "node", "declaration": true, diff --git a/projects/ngx-openlayers/.eslintrc.json b/projects/ngx-openlayers/.eslintrc.json new file mode 100644 index 0000000..300efbd --- /dev/null +++ b/projects/ngx-openlayers/.eslintrc.json @@ -0,0 +1,56 @@ +{ + "extends": "../../.eslintrc.json", + "ignorePatterns": [ + "!**/*" + ], + "overrides": [ + { + "files": [ + "*.ts" + ], + "parserOptions": { + "project": [ + "projects/ngx-openlayers/tsconfig.lib.json", + "projects/ngx-openlayers/tsconfig.spec.json" + ], + "createDefaultProgram": true + }, + "rules": { + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "aol", + "style": "kebab-case" + } + ], + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "aol", + "style": "camelCase" + } + ], + "@typescript-eslint/explicit-member-accessibility": [ + "off", + { + "accessibility": "explicit" + } + ], + "arrow-parens": [ + "off", + "always" + ], + "import/order": "off", + "no-underscore-dangle": "off" + } + }, + { + "files": [ + "*.html" + ], + "rules": {} + } + ] +} diff --git a/projects/ngx-openlayers/ng-package.json b/projects/ngx-openlayers/ng-package.json new file mode 100644 index 0000000..ff20cdf --- /dev/null +++ b/projects/ngx-openlayers/ng-package.json @@ -0,0 +1,10 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ngx-openlayers", + "assets": [ + "ngcc.config.js" + ], + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/projects/ngx-openlayers/ngcc.config.js b/projects/ngx-openlayers/ngcc.config.js new file mode 100644 index 0000000..c26aaf1 --- /dev/null +++ b/projects/ngx-openlayers/ngcc.config.js @@ -0,0 +1,3 @@ +module.exports = { + ignorableDeepImportMatchers: [/ol\//] +}; diff --git a/projects/ngx-openlayers/package-lock.json b/projects/ngx-openlayers/package-lock.json new file mode 100644 index 0000000..b1a2c95 --- /dev/null +++ b/projects/ngx-openlayers/package-lock.json @@ -0,0 +1,17 @@ +{ + "name": "ngx-openlayers", + "version": "2.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "ngx-openlayers", + "version": "2.0.0", + "peerDependencies": { + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", + "ol": ">=6.3.1" + } + } + } +} diff --git a/projects/ngx-openlayers/package.json b/projects/ngx-openlayers/package.json new file mode 100644 index 0000000..47cbaa1 --- /dev/null +++ b/projects/ngx-openlayers/package.json @@ -0,0 +1,12 @@ +{ + "name": "ngx-openlayers", + "version": "2.0.0", + "publishConfig": { + "registry": "https://repository.akkerweb.nl/repository/npm-hosted/" + }, + "peerDependencies": { + "@angular/common": "^16.2.12", + "@angular/core": "^16.2.12", + "ol": ">=6.3.1" + } +} \ No newline at end of file diff --git a/projects/ngx-openlayers/src/lib/attribution.component.ts b/projects/ngx-openlayers/src/lib/attribution.component.ts new file mode 100644 index 0000000..9d0300f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/attribution.component.ts @@ -0,0 +1,18 @@ +import { Component, ElementRef, OnInit } from '@angular/core'; +import { Attribution } from 'ol/control'; + +@Component({ + selector: 'aol-attribution', + template: '', +}) +export class AttributionComponent implements OnInit { + instance: Attribution; + html: string; + + constructor(private elementRef: ElementRef) {} + + ngOnInit() { + this.html = this.elementRef.nativeElement.innerHTML; + this.instance = new Attribution(this); + } +} diff --git a/projects/ngx-openlayers/src/lib/attributions.component.ts b/projects/ngx-openlayers/src/lib/attributions.component.ts new file mode 100644 index 0000000..17fb3bf --- /dev/null +++ b/projects/ngx-openlayers/src/lib/attributions.component.ts @@ -0,0 +1,26 @@ +import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core'; +import { Attribution } from 'ol/control'; +import { AttributionComponent } from './attribution.component'; +import { SourceComponent } from './sources/source.component'; + +@Component({ + selector: 'aol-attributions', + template: '', +}) +export class AttributionsComponent implements AfterViewInit { + @ContentChildren(AttributionComponent) + attributions: QueryList; + + instance: Array; + + constructor(@Host() private source: SourceComponent) {} + + /* we can do this at the very end */ + ngAfterViewInit() { + if (this.attributions.length) { + this.instance = this.attributions.map((cmp) => cmp.instance); + // console.log('setting attributions:', this.instance); + this.source.instance.setAttributions(this.instance); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts b/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts new file mode 100644 index 0000000..277bc9f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts @@ -0,0 +1,89 @@ +import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { Coordinate } from 'ol/coordinate'; +import { transform } from 'ol/proj'; +import { GeometryLinestringComponent } from './geom/geometrylinestring.component'; +import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component'; +import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component'; +import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component'; +import { GeometryPolygonComponent } from './geom/geometrypolygon.component'; +import { MapComponent } from './map.component'; + +@Component({ + selector: 'aol-collection-coordinates', + template: `
`, +}) +export class CollectionCoordinatesComponent implements OnChanges, OnInit { + @Input() + coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][]; + @Input() + srid = 'EPSG:3857'; + + private host: any; + private mapSrid = 'EPSG:3857'; + + constructor( + private map: MapComponent, + @Optional() geometryLinestring: GeometryLinestringComponent, + @Optional() geometryPolygon: GeometryPolygonComponent, + @Optional() geometryMultipoint: GeometryMultiPointComponent, + @Optional() geometryMultilinestring: GeometryMultiLinestringComponent, + @Optional() geometryMultipolygon: GeometryMultiPolygonComponent + ) { + if (!!geometryLinestring) { + this.host = geometryLinestring; + } else if (!!geometryPolygon) { + this.host = geometryPolygon; + } else if (!!geometryMultipoint) { + this.host = geometryMultipoint; + } else if (!!geometryMultilinestring) { + this.host = geometryMultilinestring; + } else if (!!geometryMultipolygon) { + this.host = geometryMultipolygon; + } else { + throw new Error('aol-collection-coordinates must be a child of a geometry component'); + } + } + + ngOnInit() { + this.map.instance.on('change:view', (e) => this.onMapViewChanged(e)); + this.mapSrid = this.map.instance.getView().getProjection().getCode(); + this.transformCoordinates(); + } + + ngOnChanges(changes: SimpleChanges) { + this.transformCoordinates(); + } + + private onMapViewChanged(event) { + this.mapSrid = event.target.get(event.key).getProjection().getCode(); + this.transformCoordinates(); + } + + private transformCoordinates() { + let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][]; + + if (this.srid === this.mapSrid) { + transformedCoordinates = this.coordinates; + } else { + switch (this.host.componentType) { + case 'geometry-linestring': + case 'geometry-multipoint': + transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid)); + break; + case 'geometry-polygon': + case 'geometry-multilinestring': + transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) => + cc.map((c) => transform(c, this.srid, this.mapSrid)) + ); + break; + case 'geometry-multipolygon': + transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) => + ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid))) + ); + break; + } + } + + this.host.instance.setCoordinates(transformedCoordinates); + } +} diff --git a/projects/ngx-openlayers/src/lib/content.component.ts b/projects/ngx-openlayers/src/lib/content.component.ts new file mode 100644 index 0000000..d03c05f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/content.component.ts @@ -0,0 +1,9 @@ +import { Component, ElementRef } from '@angular/core'; + +@Component({ + selector: 'aol-content', + template: '', +}) +export class ContentComponent { + constructor(public elementRef: ElementRef) {} +} diff --git a/projects/ngx-openlayers/src/lib/controls/attribution.component.ts b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts new file mode 100644 index 0000000..fd6c8a5 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts @@ -0,0 +1,30 @@ +import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Attribution } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-attribution', + template: ``, +}) +export class ControlAttributionComponent implements OnInit, OnDestroy { + @Input() + collapsible: boolean; + + componentType = 'control'; + instance: Attribution; + target: Element; + + constructor(private map: MapComponent, private element: ElementRef) {} + + ngOnInit() { + this.target = this.element.nativeElement; + // console.log('ol.control.Attribution init: ', this); + this.instance = new Attribution(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-attribution'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/control.component.ts b/projects/ngx-openlayers/src/lib/controls/control.component.ts new file mode 100644 index 0000000..ef686d5 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/control.component.ts @@ -0,0 +1,33 @@ +import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core'; +import { Control } from 'ol/control'; +import { ContentComponent } from '../content.component'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control', + template: ` `, +}) +export class ControlComponent implements OnInit, OnDestroy { + @ContentChild(ContentComponent, { static: true }) + content: ContentComponent; + + componentType = 'control'; + instance: Control; + element: Element; + + constructor(private map: MapComponent) {} + + ngOnInit() { + if (this.content) { + this.element = this.content.elementRef.nativeElement; + this.instance = new Control(this); + this.map.instance.addControl(this.instance); + } + } + + ngOnDestroy() { + if (this.instance) { + this.map.instance.removeControl(this.instance); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/default.component.ts b/projects/ngx-openlayers/src/lib/controls/default.component.ts new file mode 100644 index 0000000..f98afee --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/default.component.ts @@ -0,0 +1,42 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Collection } from 'ol'; +import { Control, defaults } from 'ol/control'; +import { Options as AttributionOptions } from 'ol/control/Attribution'; +import { Options as RotateOptions } from 'ol/control/Rotate'; +import { Options as ZoomOptions } from 'ol/control/Zoom'; + +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-defaults', + template: '', +}) +export class DefaultControlComponent implements OnInit, OnDestroy { + @Input() + attribution: boolean; + @Input() + attributionOptions: AttributionOptions; + @Input() + rotate: boolean; + @Input() + rotateOptions: RotateOptions; + @Input() + zoom: boolean; + @Input() + zoomOptions: ZoomOptions; + + instance: Collection; + + constructor(private map: MapComponent) {} + + ngOnInit() { + // console.log('ol.control.defaults init: ', this); + this.instance = defaults(this); + this.instance.forEach((c) => this.map.instance.addControl(c)); + } + + ngOnDestroy() { + // console.log('removing aol-control-defaults'); + this.instance.forEach((c) => this.map.instance.removeControl(c)); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts new file mode 100644 index 0000000..b4dca7f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts @@ -0,0 +1,36 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { FullScreen } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-fullscreen', + template: ` `, +}) +export class ControlFullScreenComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + label: string; + @Input() + labelActive: string; + @Input() + tipLabel: string; + @Input() + keys: boolean; + + instance: FullScreen; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-fullscreen'); + } + + ngOnInit() { + this.instance = new FullScreen(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-fullscreen'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts new file mode 100644 index 0000000..ab7ee08 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts @@ -0,0 +1,33 @@ +import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; +import MousePosition from 'ol/control/MousePosition'; +import { CoordinateFormat } from 'ol/coordinate'; +import { ProjectionLike } from 'ol/proj'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-mouseposition', + template: ``, +}) +export class ControlMousePositionComponent implements OnInit, OnDestroy { + @Input() + coordinateFormat: CoordinateFormat; + @Input() + projection: ProjectionLike; + target: Element; + + instance: MousePosition; + + constructor(private map: MapComponent, private element: ElementRef) {} + + ngOnInit() { + this.target = this.element.nativeElement; + // console.log('ol.control.MousePosition init: ', this); + this.instance = new MousePosition(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-mouseposition'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts new file mode 100644 index 0000000..984e33c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { View } from 'ol'; +import { OverviewMap } from 'ol/control'; +import { Layer } from 'ol/layer'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-overviewmap', + template: ` `, +}) +export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy { + @Input() + collapsed: boolean; + @Input() + collapseLabel: string; + @Input() + collapsible: boolean; + @Input() + label: string; + @Input() + layers: Layer[]; + @Input() + target: Element; + @Input() + tipLabel: string; + @Input() + view: View; + + instance: OverviewMap; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new OverviewMap(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeControl(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance != null && changes.hasOwnProperty('view')) { + this.reloadInstance(); + } + } + + private reloadInstance() { + this.map.instance.removeControl(this.instance); + this.instance = new OverviewMap(this); + this.map.instance.addControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/rotate.component.ts b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts new file mode 100644 index 0000000..775866f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts @@ -0,0 +1,36 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Rotate } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-rotate', + template: ` `, +}) +export class ControlRotateComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + label: string; + @Input() + tipLabel: string; + @Input() + duration: number; + @Input() + autoHide: boolean; + + instance: Rotate; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-rotate'); + } + + ngOnInit() { + this.instance = new Rotate(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-rotate'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts new file mode 100644 index 0000000..4f86891 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ScaleLine } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-scaleline', + template: ` `, +}) +export class ControlScaleLineComponent implements OnInit, OnDestroy { + @Input() + units: string; + + instance: ScaleLine; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-scaleline'); + } + + ngOnInit() { + this.instance = new ScaleLine(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-scaleline'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/zoom.component.ts b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts new file mode 100644 index 0000000..4c1e934 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts @@ -0,0 +1,38 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Zoom } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-zoom', + template: ` `, +}) +export class ControlZoomComponent implements OnInit, OnDestroy { + @Input() + duration: number; + @Input() + zoomInLabel: string | Node; + @Input() + zoomOutLabel: string | Node; + @Input() + zoomInTipLabel: string; + @Input() + zoomOutTipLabel: string; + @Input() + delta: number; + + instance: Zoom; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-zoom'); + } + + ngOnInit() { + this.instance = new Zoom(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-zoom'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts new file mode 100644 index 0000000..c7d11ba --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts @@ -0,0 +1,34 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ZoomSlider } from 'ol/control'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-zoomslider', + template: ` `, +}) +export class ControlZoomSliderComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + duration: number; + @Input() + maxResolution: number; + @Input() + minResolution: number; + + instance: ZoomSlider; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-zoomslider'); + } + + ngOnInit() { + this.instance = new ZoomSlider(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-zoomslider'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts new file mode 100644 index 0000000..e484be0 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts @@ -0,0 +1,35 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ZoomToExtent } from 'ol/control'; +import { Extent } from 'ol/extent'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-control-zoomtoextent', + template: ` `, +}) +export class ControlZoomToExtentComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + label: string | Node; + @Input() + tipLabel: string; + @Input() + extent: Extent; + + instance: ZoomToExtent; + + constructor(private map: MapComponent) { + // console.log('instancing aol-control-zoomtoextent'); + } + + ngOnInit() { + this.instance = new ZoomToExtent(this); + this.map.instance.addControl(this.instance); + } + + ngOnDestroy() { + // console.log('removing aol-control-zoomtoextent'); + this.map.instance.removeControl(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/coordinate.component.ts b/projects/ngx-openlayers/src/lib/coordinate.component.ts new file mode 100644 index 0000000..17f3a38 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/coordinate.component.ts @@ -0,0 +1,80 @@ +import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { transform } from 'ol/proj'; +import { GeometryCircleComponent } from './geom/geometrycircle.component'; +import { GeometryPointComponent } from './geom/geometrypoint.component'; +import { MapComponent } from './map.component'; +import { OverlayComponent } from './overlay.component'; +import { ViewComponent } from './view.component'; + +@Component({ + selector: 'aol-coordinate', + template: `
`, +}) +export class CoordinateComponent implements OnChanges, OnInit { + @Input() + x: number; + @Input() + y: number; + @Input() + srid = 'EPSG:3857'; + + private host: any; + private mapSrid = 'EPSG:3857'; + + constructor( + private map: MapComponent, + @Optional() viewHost: ViewComponent, + @Optional() geometryPointHost: GeometryPointComponent, + @Optional() geometryCircleHost: GeometryCircleComponent, + @Optional() overlayHost: OverlayComponent + ) { + // console.log('instancing aol-coordinate'); + if (geometryPointHost !== null) { + this.host = geometryPointHost; + } else if (geometryCircleHost !== null) { + this.host = geometryCircleHost; + } else if (viewHost !== null) { + this.host = viewHost; + } else if (overlayHost !== null) { + this.host = overlayHost; + } + } + + ngOnInit() { + this.map.instance.on('change:view', (e) => this.onMapViewChanged(e)); + this.mapSrid = this.map.instance.getView().getProjection().getCode(); + this.transformCoordinates(); + } + + ngOnChanges(changes: SimpleChanges) { + this.transformCoordinates(); + } + + private onMapViewChanged(event) { + this.mapSrid = event.target.get(event.key).getProjection().getCode(); + this.transformCoordinates(); + } + + private transformCoordinates() { + let transformedCoordinates: number[]; + + if (this.srid === this.mapSrid) { + transformedCoordinates = [this.x, this.y]; + } else { + transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid); + } + + switch (this.host.componentType) { + case 'geometry-point': + this.host.instance.setCoordinates(transformedCoordinates); + break; + case 'geometry-circle': + case 'view': + this.host.instance.setCenter(transformedCoordinates); + break; + case 'overlay': + this.host.instance.setPosition(transformedCoordinates); + break; + } + } +} diff --git a/projects/ngx-openlayers/src/lib/feature.component.ts b/projects/ngx-openlayers/src/lib/feature.component.ts new file mode 100644 index 0000000..d6a5acf --- /dev/null +++ b/projects/ngx-openlayers/src/lib/feature.component.ts @@ -0,0 +1,35 @@ +import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { Feature } from 'ol'; +import { SourceVectorComponent } from './sources/vector.component'; + +@Component({ + selector: 'aol-feature', + template: ` `, +}) +export class FeatureComponent implements OnInit, OnDestroy, OnChanges { + @Input() + id: string | number | undefined; + + componentType = 'feature'; + instance: Feature; + + constructor(private host: SourceVectorComponent) {} + + ngOnInit() { + this.instance = new Feature(); + if (this.id !== undefined) { + this.instance.setId(this.id); + } + this.host.instance.addFeature(this.instance); + } + + ngOnDestroy() { + this.host.instance.removeFeature(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance) { + this.instance.setId(this.id); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/formats/format.component.ts b/projects/ngx-openlayers/src/lib/formats/format.component.ts new file mode 100644 index 0000000..74c60ef --- /dev/null +++ b/projects/ngx-openlayers/src/lib/formats/format.component.ts @@ -0,0 +1,6 @@ +import Feature from 'ol/format/Feature'; + +export class FormatComponent { + public instance: Feature; + public componentType = 'format'; +} diff --git a/projects/ngx-openlayers/src/lib/formats/mvt.component.ts b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts new file mode 100644 index 0000000..25a5e7a --- /dev/null +++ b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts @@ -0,0 +1,30 @@ +import { Component, forwardRef, Input } from '@angular/core'; +import { MVT } from 'ol/format'; +import { Geometry } from 'ol/geom'; +import GeometryType from 'ol/geom/GeometryType'; +import { FormatComponent } from './format.component'; + +@Component({ + selector: 'aol-format-mvt', + template: '', + providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }], +}) +export class FormatMVTComponent extends FormatComponent { + @Input() + featureClass: + | ((geom: Geometry | { [k: string]: any }) => any) + | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any); + @Input() + geometryName: string; + @Input() + layerName: string; + @Input() + layers: string[]; + + instance: MVT; + + constructor() { + super(); + this.instance = new MVT(this); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts new file mode 100644 index 0000000..439a3b7 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Circle } from 'ol/geom'; +import { FeatureComponent } from '../feature.component'; +import { MapComponent } from '../map.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; + +@Component({ + selector: 'aol-geometry-circle', + template: ` `, +}) +export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit { + componentType = 'geometry-circle'; + instance: Circle; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + // defaulting coordinates to [0,0]. To be overridden in child component. + this.instance = new Circle([0, 0]); + } + + @Input() + get radius(): number { + return this.instance.getRadius(); + } + set radius(radius: number) { + this.instance.setRadius(radius); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts new file mode 100644 index 0000000..23f9d1c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { LineString } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-linestring', + template: ` `, +}) +export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-linestring'; + public instance: LineString; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new LineString([ + [0, 0], + [1, 1], + ]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts new file mode 100644 index 0000000..92316cb --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiLineString } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multilinestring', + template: ` `, +}) +export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multilinestring'; + public instance: MultiLineString; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiLineString([ + [ + [0, 0], + [1, 1], + ], + ]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts new file mode 100644 index 0000000..71414c2 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiPoint } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multipoint', + template: ` `, +}) +export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multipoint'; + public instance: MultiPoint; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiPoint([ + [0, 0], + [1, 1], + ]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts new file mode 100644 index 0000000..d802b13 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiPolygon } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multipolygon', + template: ` `, +}) +export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multipolygon'; + public instance: MultiPolygon; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiPolygon([ + [ + [ + [0, 0], + [1, 1], + [0, 1], + ], + ], + ]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts new file mode 100644 index 0000000..23b1997 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { Point } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-point', + template: ` `, +}) +export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-point'; + public instance: Point; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new Point([0, 0]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts new file mode 100644 index 0000000..8a1158f --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { Polygon } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-polygon', + template: ` `, +}) +export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-polygon'; + public instance: Polygon; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new Polygon([ + [ + [0, 0], + [1, 1], + [0, 1], + ], + ]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts b/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts new file mode 100644 index 0000000..0c7c8a9 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts @@ -0,0 +1,18 @@ +import { Directive, Input, OnInit } from '@angular/core'; +import SimpleGeometry from 'ol/geom/SimpleGeometry'; +import { FeatureComponent } from '../feature.component'; +import { MapComponent } from '../map.component'; + +@Directive() +export abstract class SimpleGeometryComponent implements OnInit { + @Input() srid: string; + + instance: SimpleGeometry; + componentType = 'simple-geometry'; + + constructor(protected map: MapComponent, protected host: FeatureComponent) {} + + ngOnInit() { + this.host.instance.setGeometry(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/graticule.component.ts b/projects/ngx-openlayers/src/lib/graticule.component.ts new file mode 100644 index 0000000..db7c48e --- /dev/null +++ b/projects/ngx-openlayers/src/lib/graticule.component.ts @@ -0,0 +1,57 @@ +import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; +import { Graticule } from 'ol'; +import { Stroke } from 'ol/style'; +import { MapComponent } from './map.component'; + +@Component({ + selector: 'aol-graticule', + template: '', +}) +export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy { + @Input() + strokeStyle: Stroke; + @Input() + showLabels: boolean; + @Input() + lonLabelPosition: number; + @Input() + latLabelPosition: number; + + instance: any; + componentType = 'graticule'; + + constructor(private map: MapComponent) {} + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + + if (!this.instance) { + return; + } + + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + properties[key] = changes[key].currentValue; + } + } + + if (properties) { + this.instance = new Graticule(properties); + } + this.instance.setMap(this.map.instance); + } + + ngAfterContentInit(): void { + this.instance = new Graticule({ + strokeStyle: this.strokeStyle, + showLabels: this.showLabels, + lonLabelPosition: this.lonLabelPosition, + latLabelPosition: this.latLabelPosition, + }); + this.instance.setMap(this.map.instance); + } + + ngOnDestroy(): void { + this.instance.setMap(null); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/default.component.ts b/projects/ngx-openlayers/src/lib/interactions/default.component.ts new file mode 100644 index 0000000..e0a44e2 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/default.component.ts @@ -0,0 +1,23 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { defaults, Interaction } from 'ol/interaction'; +import { Collection } from 'ol'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-default', + template: '', +}) +export class DefaultInteractionComponent implements OnInit, OnDestroy { + instance: Collection; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = defaults(); + this.instance.forEach((i) => this.map.instance.addInteraction(i)); + } + + ngOnDestroy() { + this.instance.forEach((i) => this.map.instance.removeInteraction(i)); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts new file mode 100644 index 0000000..b82d6c2 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { DoubleClickZoom } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-doubleclickzoom', + template: '', +}) +export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy { + @Input() + duration: number; + @Input() + delta: number; + + instance: DoubleClickZoom; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DoubleClickZoom(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts new file mode 100644 index 0000000..7bc72e6 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts @@ -0,0 +1,31 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import Feature from 'ol/format/Feature'; +import { DragAndDrop } from 'ol/interaction'; +import { ProjectionLike } from 'ol/proj'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-draganddrop', + template: '', +}) +export class DragAndDropInteractionComponent implements OnInit, OnDestroy { + @Input() + formatConstructors: ((n: Feature) => any)[]; + @Input() + projection: ProjectionLike; + @Input() + target: Element; + + instance: DragAndDrop; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragAndDrop(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts new file mode 100644 index 0000000..d25b116 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts @@ -0,0 +1,31 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Condition } from 'ol/events/condition'; +import { DragBox } from 'ol/interaction'; +import { EndCondition } from 'ol/interaction/DragBox'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-dragbox', + template: '', +}) +export class DragBoxInteractionComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + condition: Condition; + @Input() + boxEndCondition: EndCondition; + + instance: DragBox; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragBox(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts new file mode 100644 index 0000000..9e521e6 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts @@ -0,0 +1,29 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import Kinetic from 'ol/Kinetic'; +import { Condition } from 'ol/events/condition'; +import { DragPan } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-dragpan', + template: '', +}) +export class DragPanInteractionComponent implements OnInit, OnDestroy { + @Input() + condition: Condition; + @Input() + kinetic: Kinetic; + + instance: DragPan; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragPan(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts new file mode 100644 index 0000000..9b34a9b --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Condition } from 'ol/events/condition'; +import { DragRotate } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-dragrotate', + template: '', +}) +export class DragRotateInteractionComponent implements OnInit, OnDestroy { + @Input() + condition: Condition; + @Input() + duration: number; + + instance: DragRotate; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragRotate(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts new file mode 100644 index 0000000..263259a --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Condition } from 'ol/events/condition'; +import { DragRotateAndZoom } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-dragrotateandzoom', + template: '', +}) +export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy { + @Input() + condition: Condition; + @Input() + duration: number; + + instance: DragRotateAndZoom; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragRotateAndZoom(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts new file mode 100644 index 0000000..3d13b1a --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Condition } from 'ol/events/condition'; +import { DragZoom } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-dragzoom', + template: '', +}) +export class DragZoomInteractionComponent implements OnInit, OnDestroy { + @Input() + className: string; + @Input() + condition: Condition; + @Input() + duration: number; + @Input() + out: boolean; + + instance: DragZoom; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new DragZoom(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/draw.component.ts b/projects/ngx-openlayers/src/lib/interactions/draw.component.ts new file mode 100644 index 0000000..3323c21 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/draw.component.ts @@ -0,0 +1,76 @@ +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Collection, Feature } from 'ol'; +import { Condition } from 'ol/events/condition'; +import GeometryType from 'ol/geom/GeometryType'; +import { Draw } from 'ol/interaction'; +import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw'; +import { Vector } from 'ol/source'; +import { Style } from 'ol/style'; +import { StyleFunction } from 'ol/style/Style'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-draw', + template: '', +}) +export class DrawInteractionComponent implements OnInit, OnDestroy { + @Input() + clickTolerance?: number; + @Input() + features?: Collection; + @Input() + source?: Vector; + @Input() + snapTolerance?: number; + @Input() + type: GeometryType; + @Input() + maxPoints?: number; + @Input() + minPoints?: number; + @Input() + finishCondition?: Condition; + @Input() + style?: Style | Style[] | StyleFunction; + @Input() + geometryFunction?: GeometryFunction; + @Input() + geometryName?: string; + @Input() + condition?: Condition; + @Input() + freehandCondition?: Condition; + @Input() + freehand?: boolean; + @Input() + wrapX?: boolean; + + @Output() + olChange = new EventEmitter(); + @Output() + olChangeActive = new EventEmitter(); + @Output() + drawEnd = new EventEmitter(); + @Output() + drawStart = new EventEmitter(); + @Output() + propertyChange = new EventEmitter(); + + instance: Draw; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new Draw(this); + this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event)); + this.instance.on('change:active', (event: DrawEvent) => this.olChangeActive.emit(event)); + this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event)); + this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event)); + this.instance.on('propertychange', (event: DrawEvent) => this.propertyChange.emit(event)); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/modify.component.ts b/projects/ngx-openlayers/src/lib/interactions/modify.component.ts new file mode 100644 index 0000000..c0e3be3 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/modify.component.ts @@ -0,0 +1,59 @@ +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Collection, Feature } from 'ol'; +import { Condition } from 'ol/events/condition'; +import { Modify } from 'ol/interaction'; +import { ModifyEvent } from 'ol/interaction/Modify'; +import { Vector } from 'ol/source'; +import { Style } from 'ol/style'; +import { StyleFunction } from 'ol/style/Style'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-modify', + template: '', +}) +export class ModifyInteractionComponent implements OnInit, OnDestroy { + @Input() + condition?: Condition; + @Input() + deleteCondition?: Condition; + @Input() + pixelTolerance?: number; + @Input() + style?: Style | Style[] | StyleFunction; + @Input() + features: Collection; + @Input() + wrapX?: boolean; + @Input() + source?: Vector; + + @Output() + modifyEnd = new EventEmitter(); + @Output() + modifyStart = new EventEmitter(); + @Output() + olChange = new EventEmitter(); + @Output() + olChangeActive = new EventEmitter(); + @Output() + propertyChange = new EventEmitter(); + + instance: Modify; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new Modify(this); + this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event)); + this.instance.on('change:active', (event: ModifyEvent) => this.olChangeActive.emit(event)); + this.instance.on('propertychange', (event: ModifyEvent) => this.propertyChange.emit(event)); + this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event)); + this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event)); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts new file mode 100644 index 0000000..39b3b9c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts @@ -0,0 +1,29 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { MouseWheelZoom } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-mousewheelzoom', + template: '', +}) +export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy { + @Input() + duration: number; + @Input() + timeout: number; + @Input() + useAnchor: boolean; + + instance: MouseWheelZoom; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new MouseWheelZoom(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts new file mode 100644 index 0000000..c6811c1 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { PinchZoom } from 'ol/interaction'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-pinchzoom', + template: '', +}) +export class PinchZoomInteractionComponent implements OnInit, OnDestroy { + @Input() + duration: number; + @Input() + constrainResolution: boolean; + + instance: PinchZoom; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new PinchZoom(this); + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/select.component.ts b/projects/ngx-openlayers/src/lib/interactions/select.component.ts new file mode 100644 index 0000000..b3154a9 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/select.component.ts @@ -0,0 +1,61 @@ +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Collection, Feature } from 'ol'; +import { Condition } from 'ol/events/condition'; +import { Select } from 'ol/interaction'; +import { FilterFunction, SelectEvent } from 'ol/interaction/Select'; +import { Layer } from 'ol/layer'; +import { Style } from 'ol/style'; +import { StyleFunction } from 'ol/style/Style'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-select', + template: '', +}) +export class SelectInteractionComponent implements OnInit, OnDestroy { + @Input() + addCondition?: Condition; + @Input() + condition?: Condition; + @Input() + layers?: Layer[] | ((layer: Layer) => boolean); + @Input() + style?: Style | Style[] | StyleFunction; + @Input() + removeCondition?: Condition; + @Input() + toggleCondition?: Condition; + @Input() + multi?: boolean; + @Input() + features?: Collection; + @Input() + filter?: FilterFunction; + @Input() + wrapX?: boolean; + + @Output() + olChange = new EventEmitter(); + @Output() + olSelect = new EventEmitter(); + @Output() + propertyChange = new EventEmitter(); + + instance: Select; + + constructor(private map: MapComponent) {} + + ngOnInit() { + this.instance = new Select(this); + + this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event)); + this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event)); + this.instance.on('propertychange', (event: SelectEvent) => this.propertyChange.emit(event)); + + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/interactions/translate.component.ts b/projects/ngx-openlayers/src/lib/interactions/translate.component.ts new file mode 100644 index 0000000..b05aef8 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/interactions/translate.component.ts @@ -0,0 +1,56 @@ +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Collection, Feature } from 'ol'; +import { Translate } from 'ol/interaction'; +import { TranslateEvent } from 'ol/interaction/Translate'; +import { Layer } from 'ol/layer'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-interaction-translate', + template: '', +}) +export class TranslateInteractionComponent implements OnInit, OnDestroy { + @Input() + features?: Collection; + @Input() + layers?: Layer[] | ((layer: Layer) => boolean); + @Input() + hitTolerance?: number; + + @Output() + olChange: EventEmitter; + @Output() + propertyChange: EventEmitter; + @Output() + translateEnd: EventEmitter; + @Output() + translateStart: EventEmitter; + @Output() + translating: EventEmitter; + + instance: Translate; + + constructor(private map: MapComponent) { + this.olChange = new EventEmitter(); + this.propertyChange = new EventEmitter(); + this.translateEnd = new EventEmitter(); + this.translateStart = new EventEmitter(); + this.translating = new EventEmitter(); + } + + ngOnInit() { + this.instance = new Translate(this); + + this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event)); + this.instance.on('propertychange', (event: TranslateEvent) => this.propertyChange.emit(event)); + this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event)); + this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event)); + this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event)); + + this.map.instance.addInteraction(this.instance); + } + + ngOnDestroy() { + this.map.instance.removeInteraction(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layer.component.ts b/projects/ngx-openlayers/src/lib/layers/layer.component.ts new file mode 100644 index 0000000..5399f9a --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layer.component.ts @@ -0,0 +1,67 @@ +import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { Event } from 'ol/events'; +import { Extent } from 'ol/extent'; +import { MapComponent } from '../map.component'; +import { LayerGroupComponent } from './layergroup.component'; + +@Directive() +export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy { + @Input() + opacity: number; + @Input() + visible: boolean; + @Input() + extent: Extent; + @Input() + zIndex: number; + @Input() + minResolution: number; + @Input() + maxResolution: number; + + @Input() + prerender: (evt: Event) => void; + @Input() + postrender: (evt: Event) => void; + + instance: any; + componentType = 'layer'; + + constructor(protected host: MapComponent | LayerGroupComponent) {} + + ngOnInit() { + if (this.prerender !== null && this.prerender !== undefined) { + this.instance.on('prerender', this.prerender); + } + if (this.postrender !== null && this.postrender !== undefined) { + this.instance.on('postrender', this.postrender); + } + this.host.instance.getLayers().push(this.instance); + } + + ngOnDestroy() { + this.host.instance.getLayers().remove(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + properties[key] = changes[key].currentValue; + if (key === 'prerender') { + this.instance.un('prerender', changes[key].previousValue); + this.instance.on('prerender', changes[key].currentValue); + } + if (key === 'postrender') { + this.instance.un('postrender', changes[key].previousValue); + this.instance.on('postrender', changes[key].currentValue); + } + } + } + // console.log('changes detected in aol-layer, setting new properties: ', properties); + this.instance.setProperties(properties, false); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts new file mode 100644 index 0000000..00b0737 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts @@ -0,0 +1,27 @@ +import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core'; +import { Group } from 'ol/layer'; +import { LayerComponent } from './layer.component'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-layer-group', + template: ` `, +}) +export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy { + public instance: Group; + + constructor( + map: MapComponent, + @SkipSelf() + @Optional() + group?: LayerGroupComponent + ) { + super(group || map); + } + + ngOnInit() { + // console.log(`creating ol.layer.Group instance with:`, this); + this.instance = new Group(this); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts new file mode 100644 index 0000000..58a6f49 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts @@ -0,0 +1,40 @@ +import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { Extent } from 'ol/extent'; +import { Image } from 'ol/layer'; +import { MapComponent } from '../map.component'; +import { LayerComponent } from './layer.component'; +import { LayerGroupComponent } from './layergroup.component'; + +@Component({ + selector: 'aol-layer-image', + template: ` `, +}) +export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges { + @Input() + opacity: number; + @Input() + visible: boolean; + @Input() + extent: Extent; + @Input() + minResolution: number; + @Input() + maxResolution: number; + @Input() + zIndex: number; + + source: Image; + + constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) { + super(group || map); + } + + ngOnInit() { + this.instance = new Image(this); + super.ngOnInit(); + } + + ngOnChanges(changes: SimpleChanges) { + super.ngOnChanges(changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layertile.component.ts b/projects/ngx-openlayers/src/lib/layers/layertile.component.ts new file mode 100644 index 0000000..0489508 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layertile.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { Tile } from 'ol/layer'; +import { MapComponent } from '../map.component'; +import { LayerComponent } from './layer.component'; +import { LayerGroupComponent } from './layergroup.component'; + +@Component({ + selector: 'aol-layer-tile', + template: ` `, +}) +export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges { + @Input() + preload: number; + @Input() + useInterimTilesOnError: boolean; + + source: Tile; + + constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) { + super(group || map); + } + + ngOnInit() { + // console.log('creating ol.layer.Tile instance with:', this); + this.instance = new Tile(this); + super.ngOnInit(); + } + + ngOnChanges(changes: SimpleChanges) { + super.ngOnChanges(changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layervector.component.ts b/projects/ngx-openlayers/src/lib/layers/layervector.component.ts new file mode 100644 index 0000000..65c6806 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layervector.component.ts @@ -0,0 +1,41 @@ +import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { Vector } from 'ol/layer'; +import { Style } from 'ol/style'; +import { StyleFunction } from 'ol/style/Style'; +import { MapComponent } from '../map.component'; +import { LayerComponent } from './layer.component'; +import { LayerGroupComponent } from './layergroup.component'; + +@Component({ + selector: 'aol-layer-vector', + template: ` `, +}) +export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges { + @Input() + renderBuffer: number; + + @Input() + style: Style | Style[] | StyleFunction; + + @Input() + updateWhileAnimating: boolean; + + @Input() + updateWhileInteracting: boolean; + + source: Vector; + + constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) { + super(group || map); + } + + ngOnInit() { + // console.log('creating ol.layer.Vector instance with:', this); + this.instance = new Vector(this); + super.ngOnInit(); + } + + ngOnChanges(changes: SimpleChanges) { + super.ngOnChanges(changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts b/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts new file mode 100644 index 0000000..c50d8f9 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core'; +import { VectorTile } from 'ol/layer'; +import { RenderType } from 'ol/layer/VectorTile'; +import { Feature } from 'ol'; +import { Style } from 'ol/style'; +import { MapComponent } from '../map.component'; +import { LayerComponent } from './layer.component'; +import { LayerGroupComponent } from './layergroup.component'; +import { StyleFunction } from 'ol/style/Style'; + +@Component({ + selector: 'aol-layer-vectortile', + template: ` `, +}) +export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges { + @Input() + renderBuffer: number; + @Input() + renderMode: RenderType | string; + /* not marked as optional in the typings */ + @Input() + renderOrder: (feature1: Feature, feature2: Feature) => number; + @Input() + style: Style | Style[] | StyleFunction; + @Input() + updateWhileAnimating: boolean; + @Input() + updateWhileInteracting: boolean; + @Input() + visible: boolean; + + constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) { + super(group || map); + } + + ngOnInit() { + // console.log('creating ol.layer.VectorTile instance with:', this); + this.instance = new VectorTile(this); + super.ngOnInit(); + } + + ngOnChanges(changes: SimpleChanges) { + super.ngOnChanges(changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/map.component.ts b/projects/ngx-openlayers/src/lib/map.component.ts new file mode 100644 index 0000000..3979c29 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/map.component.ts @@ -0,0 +1,122 @@ +import { + AfterViewInit, + Component, + ElementRef, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, +} from '@angular/core'; +import Map from 'ol/Map'; +import MapBrowserEvent from 'ol/MapBrowserEvent'; +import MapEvent from 'ol/MapEvent'; +import ObjectEvent from 'ol/Object'; +import { Control } from 'ol/control'; +import { Interaction } from 'ol/interaction'; +import RenderEvent from 'ol/render/Event'; + +@Component({ + selector: 'aol-map', + template: ` +
+ + `, +}) +export class MapComponent implements OnInit, AfterViewInit, OnChanges { + @Input() + width = '100%'; + @Input() + height = '100%'; + @Input() + pixelRatio: number; + @Input() + keyboardEventTarget: Element | string; + @Input() + loadTilesWhileAnimating: boolean; + @Input() + loadTilesWhileInteracting: boolean; + @Input() + logo: string | boolean; + @Input() + renderer: 'canvas' | 'webgl'; + + @Output() + olClick: EventEmitter; + @Output() + dblClick: EventEmitter; + @Output() + moveStart: EventEmitter; + @Output() + moveEnd: EventEmitter; + @Output() + pointerDrag: EventEmitter; + @Output() + pointerMove: EventEmitter; + @Output() + onpostrender: EventEmitter; + @Output() + postRender: EventEmitter; + @Output() + onprerender: EventEmitter; + @Output() + propertyChange: EventEmitter; + @Output() + singleClick: EventEmitter; + + instance: Map; + componentType = 'map'; + // we pass empty arrays to not get default controls/interactions because we have our own directives + controls: Control[] = []; + interactions: Interaction[] = []; + + constructor(private host: ElementRef) { + this.olClick = new EventEmitter(); + this.dblClick = new EventEmitter(); + this.moveStart = new EventEmitter(); + this.moveEnd = new EventEmitter(); + this.pointerDrag = new EventEmitter(); + this.pointerMove = new EventEmitter(); + this.onpostrender = new EventEmitter(); + this.postRender = new EventEmitter(); + this.onprerender = new EventEmitter(); + this.propertyChange = new EventEmitter(); + this.singleClick = new EventEmitter(); + } + + ngOnInit() { + // console.log('creating ol.Map instance with:', this); + this.instance = new Map(this); + this.instance.setTarget(this.host.nativeElement.firstElementChild); + this.instance.on('click', (event: MapBrowserEvent) => this.olClick.emit(event)); + this.instance.on('dblclick', (event: MapBrowserEvent) => this.dblClick.emit(event)); + this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event)); + this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event)); + this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.pointerDrag.emit(event)); + this.instance.on('pointermove', (event: MapBrowserEvent) => this.pointerMove.emit(event)); + this.instance.on('postrender', (event: RenderEvent) => this.onpostrender.emit(event)); + this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event)); + this.instance.on('prerender', (event: RenderEvent) => this.onprerender.emit(event)); + this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event)); + this.instance.on('singleclick', (event: MapBrowserEvent) => this.singleClick.emit(event)); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + properties[key] = changes[key].currentValue; + } + } + // console.log('changes detected in aol-map, setting new properties: ', properties); + this.instance.setProperties(properties, false); + } + + ngAfterViewInit() { + this.instance.updateSize(); + } +} diff --git a/projects/ngx-openlayers/src/lib/overlay.component.ts b/projects/ngx-openlayers/src/lib/overlay.component.ts new file mode 100644 index 0000000..6cea458 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/overlay.component.ts @@ -0,0 +1,51 @@ +import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core'; +import { Overlay, PanOptions } from 'ol'; +import OverlayPositioning from 'ol/OverlayPositioning'; +import { ContentComponent } from './content.component'; +import { MapComponent } from './map.component'; + +@Component({ + selector: 'aol-overlay', + template: '', +}) +export class OverlayComponent implements OnInit, OnDestroy { + @ContentChild(ContentComponent, { static: true }) + content: ContentComponent; + + @Input() + id: number | string; + @Input() + offset: number[]; + @Input() + positioning: OverlayPositioning | string; + @Input() + stopEvent: boolean; + @Input() + insertFirst: boolean; + @Input() + autoPan: boolean; + @Input() + autoPanAnimation: PanOptions; + @Input() + autoPanMargin: number; + + componentType = 'overlay'; + instance: Overlay; + element: Element; + + constructor(private map: MapComponent) {} + + ngOnInit() { + if (this.content) { + this.element = this.content.elementRef.nativeElement; + this.instance = new Overlay(this); + this.map.instance.addOverlay(this.instance); + } + } + + ngOnDestroy() { + if (this.instance) { + this.map.instance.removeOverlay(this.instance); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts b/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts new file mode 100644 index 0000000..1eeb7d1 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts @@ -0,0 +1,42 @@ +import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; +import { LoadFunction } from 'ol/Tile'; +import { BingMaps } from 'ol/source'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-bingmaps', + template: `
`, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }], +}) +export class SourceBingmapsComponent extends SourceComponent implements OnInit { + @Input() + cacheSize: number; + @Input() + hidpi: boolean; + @Input() + culture: string; + @Input() + key: string; + @Input() + imagerySet: 'Road' | 'Aerial' | 'AerialWithLabels' | 'collinsBart' | 'ordnanceSurvey' = 'Aerial'; + @Input() + maxZoom: number; + @Input() + reprojectionErrorThreshold: number; + @Input() + tileLoadFunction: LoadFunction; + @Input() + wrapX: boolean; + + instance: BingMaps; + + constructor(@Host() layer: LayerTileComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new BingMaps(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/cluster.component.ts b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts new file mode 100644 index 0000000..b732a8c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts @@ -0,0 +1,53 @@ +import { + AfterContentInit, + Component, + ContentChild, + forwardRef, + Host, + Input, + OnChanges, + SimpleChanges, +} from '@angular/core'; +import { Feature } from 'ol'; +import { Point } from 'ol/geom'; +import { Cluster, Vector } from 'ol/source'; + +import { LayerVectorComponent } from '../layers/layervector.component'; +import { SourceComponent } from './source.component'; +import { SourceVectorComponent } from './vector.component'; + +@Component({ + selector: 'aol-source-cluster', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }], +}) +export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges { + @Input() + distance: number; + @Input() + geometryFunction?: (feature: Feature) => Point; + @Input() + wrapX?: boolean; + + @ContentChild(SourceVectorComponent) + sourceVectorComponent: SourceVectorComponent; + source: Vector; + instance: Cluster; + + constructor(@Host() layer: LayerVectorComponent) { + super(layer); + } + + ngAfterContentInit() { + this.source = this.sourceVectorComponent.instance; + + this.instance = new Cluster(this); + this.host.instance.setSource(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance && changes.hasOwnProperty('distance')) { + this.instance.setDistance(this.distance); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/geojson.component.ts b/projects/ngx-openlayers/src/lib/sources/geojson.component.ts new file mode 100644 index 0000000..5f9f734 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/geojson.component.ts @@ -0,0 +1,36 @@ +import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; +import { Feature } from 'ol'; +import { GeoJSON } from 'ol/format'; +import { ProjectionLike } from 'ol/proj'; +import { Vector } from 'ol/source'; +import { LayerVectorComponent } from '../layers/layervector.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-geojson', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }], +}) +export class SourceGeoJSONComponent extends SourceComponent implements OnInit { + @Input() + defaultDataProjection: ProjectionLike; + @Input() + featureProjection: ProjectionLike; + @Input() + geometryName: string; + @Input() + url: string; + + instance: Vector; + format: Feature; + + constructor(@Host() layer: LayerVectorComponent) { + super(layer); + } + + ngOnInit() { + this.format = new GeoJSON(this); + this.instance = new Vector(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts new file mode 100644 index 0000000..9d964f0 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts @@ -0,0 +1,62 @@ +import { + Component, + EventEmitter, + forwardRef, + Host, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, +} from '@angular/core'; +import { LoadFunction } from 'ol/Image'; +import { ProjectionLike } from 'ol/proj'; +import { ImageArcGISRest } from 'ol/source'; +import { ImageSourceEvent } from 'ol/source/Image'; +import { AttributionLike } from 'ol/source/Source'; +import { LayerImageComponent } from '../layers/layerimage.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-imagearcgisrest', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }], +}) +export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges { + @Input() projection: ProjectionLike | string; + @Input() url: string; + @Input() attributions: AttributionLike[]; + @Input() crossOrigin?: string; + @Input() imageLoadFunction?: LoadFunction; + @Input() params?: { [k: string]: any }; + @Input() ratio = 1.5; + @Input() resolutions?: number[]; + @Input() wrapX?: boolean; + + @Output() + imageLoadStart = new EventEmitter(); + @Output() + imageLoadEnd = new EventEmitter(); + @Output() + imageLoadError = new EventEmitter(); + + instance: ImageArcGISRest; + + constructor(@Host() layer: LayerImageComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new ImageArcGISRest(this); + this.host.instance.setSource(this.instance); + this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event)); + this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event)); + this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event)); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance && changes.hasOwnProperty('params')) { + this.instance.updateParams(this.params); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts new file mode 100644 index 0000000..0df3044 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts @@ -0,0 +1,88 @@ +import { + Component, + EventEmitter, + Host, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, + forwardRef, +} from '@angular/core'; +import { LoadFunction } from 'ol/Image'; +import { Extent } from 'ol/extent'; +import { ProjectionLike } from 'ol/proj'; +import { Size } from 'ol/size'; +import { ImageStatic } from 'ol/source'; +import { ImageSourceEvent } from 'ol/source/Image'; +import { AttributionLike } from 'ol/source/Source'; +import { LayerImageComponent } from '../layers/layerimage.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-imagestatic', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }], +}) +export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges { + @Input() + projection: ProjectionLike | string; + @Input() + imageExtent: Extent; + @Input() + url: string; + @Input() + attributions: AttributionLike; + @Input() + crossOrigin?: string; + @Input() + imageLoadFunction?: LoadFunction; + @Input() + imageSize?: Size; + + @Output() + imageLoadStart = new EventEmitter(); + @Output() + imageLoadEnd = new EventEmitter(); + @Output() + imageLoadError = new EventEmitter(); + + instance: ImageStatic; + + constructor(@Host() layer: LayerImageComponent) { + super(layer); + } + + setLayerSource(): void { + this.instance = new ImageStatic(this); + this.host.instance.setSource(this.instance); + this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event)); + this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event)); + this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event)); + } + + ngOnInit() { + this.setLayerSource(); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + switch (key) { + case 'url': + this.url = changes[key].currentValue; + this.setLayerSource(); + break; + default: + break; + } + properties[key] = changes[key].currentValue; + } + } + this.instance.setProperties(properties, false); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts new file mode 100644 index 0000000..2fc085d --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts @@ -0,0 +1,73 @@ +import { + Component, + Host, + Input, + OnChanges, + OnInit, + forwardRef, + SimpleChanges, + Output, + EventEmitter, +} from '@angular/core'; +import { ImageWMS } from 'ol/source'; +import { LayerImageComponent } from '../layers/layerimage.component'; +import { SourceComponent } from './source.component'; +import { ProjectionLike } from 'ol/proj'; +import { AttributionLike } from 'ol/source/Source'; +import { LoadFunction } from 'ol/Image'; +import { ImageSourceEvent } from 'ol/source/Image'; + +@Component({ + selector: 'aol-source-imagewms', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }], +}) +export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit { + @Input() + attributions: AttributionLike; + @Input() + crossOrigin: string; + @Input() + hidpi: boolean; + @Input() + serverType: string; + @Input() + imageLoadFunction?: LoadFunction; + @Input() + params: { [key: string]: any }; + @Input() + projection: ProjectionLike | string; + @Input() + ratio: number; + @Input() + resolutions: Array; + @Input() + url: string; + + @Output() + imageLoadStart = new EventEmitter(); + @Output() + imageLoadEnd = new EventEmitter(); + @Output() + imageLoadError = new EventEmitter(); + + instance: ImageWMS; + + constructor(@Host() layer: LayerImageComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new ImageWMS(this); + this.host.instance.setSource(this.instance); + this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event)); + this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event)); + this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event)); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance && changes.hasOwnProperty('params')) { + this.instance.updateParams(this.params); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/osm.component.ts b/projects/ngx-openlayers/src/lib/sources/osm.component.ts new file mode 100644 index 0000000..62cf7c4 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/osm.component.ts @@ -0,0 +1,64 @@ +import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core'; +import { OSM } from 'ol/source'; +import { AttributionLike } from 'ol/source/Source'; +import { TileSourceEvent } from 'ol/source/Tile'; +import { LoadFunction } from 'ol/Tile'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { SourceComponent } from './source.component'; +import { SourceXYZComponent } from './xyz.component'; + +@Component({ + selector: 'aol-source-osm', + template: `
`, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }], +}) +export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit { + @Input() + attributions: AttributionLike; + @Input() + cacheSize: number; + @Input() + crossOrigin: string; + @Input() + maxZoom: number; + @Input() + opaque: boolean; + @Input() + reprojectionErrorThreshold: number; + @Input() + tileLoadFunction: LoadFunction; + @Input() + url: string; + @Input() + wrapX: boolean; + + @Output() + tileLoadStart: EventEmitter = new EventEmitter(); + @Output() + tileLoadEnd: EventEmitter = new EventEmitter(); + @Output() + tileLoadError: EventEmitter = new EventEmitter(); + + instance: OSM; + + constructor( + @Optional() + @Host() + protected layer?: LayerTileComponent + ) { + super(layer); + } + + ngAfterContentInit() { + if (this.tileGridXYZ) { + this.tileGrid = this.tileGridXYZ.instance; + } + + this.instance = new OSM(this); + + this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event)); + this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event)); + this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event)); + this._register(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/raster.component.ts b/projects/ngx-openlayers/src/lib/sources/raster.component.ts new file mode 100644 index 0000000..b091aa5 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/raster.component.ts @@ -0,0 +1,68 @@ +import { + AfterContentInit, + Component, + ContentChild, + EventEmitter, + forwardRef, + Host, + Input, + Output, +} from '@angular/core'; +import { Raster, Source } from 'ol/source'; +import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster'; + +import { LayerImageComponent } from '../layers/layerimage.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-raster', + template: ` `, + providers: [ + { + provide: SourceComponent, + useExisting: forwardRef(() => SourceRasterComponent), + }, + ], +}) +export class SourceRasterComponent extends SourceComponent implements AfterContentInit { + @Input() + operation?: Operation; + @Input() + threads?: number; + @Input() + lib?: any; + @Input() + operationType?: RasterOperationType; + + @Output() + beforeOperations: EventEmitter = new EventEmitter(); + @Output() + afterOperations: EventEmitter = new EventEmitter(); + + instance: Raster; + sources: Source[] = []; + + constructor(@Host() layer: LayerImageComponent) { + super(layer); + } + + @ContentChild(SourceComponent) + set source(sourceComponent: SourceComponent) { + this.sources = [sourceComponent.instance]; + if (this.instance) { + // Openlayer doesn't handle sources update. Just recreate Raster instance. + this.init(); + } + } + + ngAfterContentInit() { + this.init(); + } + + init() { + this.instance = new Raster(this); + this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event)); + this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event)); + this._register(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/source.component.ts b/projects/ngx-openlayers/src/lib/sources/source.component.ts new file mode 100644 index 0000000..252339c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/source.component.ts @@ -0,0 +1,27 @@ +import { Directive, Input, OnDestroy } from '@angular/core'; +import { Source } from 'ol'; + +import { LayerComponent } from '../layers/layer.component'; + +@Directive() +export abstract class SourceComponent implements OnDestroy { + @Input() + attributions: any; + + public instance: Source; + public componentType = 'source'; + + constructor(protected host: LayerComponent) {} + + ngOnDestroy() { + if (this.host && this.host.instance) { + this.host.instance.setSource(null); + } + } + + protected _register(s: Source) { + if (this.host) { + this.host.instance.setSource(s); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts new file mode 100644 index 0000000..f98a0ed --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts @@ -0,0 +1,25 @@ +import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; +import { TileJSON } from 'ol/source'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-tilejson', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }], +}) +export class SourceTileJSONComponent extends SourceComponent implements OnInit { + @Input() + url: string; + + instance: TileJSON; + + constructor(@Host() layer: LayerTileComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new TileJSON(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts new file mode 100644 index 0000000..c2fe0fc --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts @@ -0,0 +1,57 @@ +import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { SourceComponent } from './source.component'; +import { TileWMS } from 'ol/source'; +import { TileGrid } from 'ol/tilegrid'; +import { LoadFunction } from 'ol/Tile'; + +@Component({ + selector: 'aol-source-tilewms', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }], +}) +export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit { + @Input() + cacheSize: number; + @Input() + crossOrigin: string; + @Input() + gutter: number; + @Input() + hidpi: boolean; + @Input() + params: { [key: string]: any }; + @Input() + projection: string; + @Input() + reprojectionErrorThreshold: number; + @Input() + serverType: string; + @Input() + tileGrid: TileGrid; + @Input() + tileLoadFunction: LoadFunction; + @Input() + url: string; + @Input() + urls: string[]; + @Input() + wrapX: boolean; + + instance: TileWMS; + + constructor(@Host() layer: LayerTileComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new TileWMS(this); + this.host.instance.setSource(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (this.instance && changes.hasOwnProperty('params')) { + this.instance.updateParams(this.params); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts new file mode 100644 index 0000000..1cbf51c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts @@ -0,0 +1,117 @@ +import { + Component, + Host, + Input, + forwardRef, + AfterContentInit, + ContentChild, + SimpleChanges, + OnChanges, + Output, + EventEmitter, +} from '@angular/core'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { SourceComponent } from './source.component'; +import { TileGridWMTSComponent } from '../tilegridwmts.component'; +import { WMTS } from 'ol/source'; +import { WMTS as TileGridWMTS } from 'ol/tilegrid'; +import { WMTSRequestEncoding } from 'ol/source'; +import { ProjectionLike } from 'ol/proj'; +import { LoadFunction } from 'ol/Tile'; +import { TileSourceEvent } from 'ol/source/Tile'; + +@Component({ + selector: 'aol-source-tilewmts', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }], +}) +export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges { + @Input() + cacheSize?: number; + @Input() + crossOrigin?: string; + @Input() + tileGrid: TileGridWMTS; + @Input() + projection: ProjectionLike; + @Input() + reprojectionErrorThreshold?: number; + @Input() + requestEncoding?: WMTSRequestEncoding | string; + @Input() + layer: string; + @Input() + style: string; + @Input() + tileClass?: any; + @Input() + tilePixelRatio?: number; + @Input() + version?: string; + @Input() + format?: string; + @Input() + matrixSet: string; + @Input() + dimensions?: any; + @Input() + url?: string; + @Input() + tileLoadFunction?: LoadFunction; + @Input() + urls?: string[]; + @Input() + wrapX?: boolean; + + @Output() + tileLoadStart: EventEmitter = new EventEmitter(); + @Output() + tileLoadEnd: EventEmitter = new EventEmitter(); + @Output() + tileLoadError: EventEmitter = new EventEmitter(); + + @ContentChild(TileGridWMTSComponent) + tileGridWMTS: TileGridWMTSComponent; + + instance: WMTS; + + constructor(@Host() layer: LayerTileComponent) { + super(layer); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + switch (key) { + case 'url': + this.url = changes[key].currentValue; + this.setLayerSource(); + break; + default: + break; + } + properties[key] = changes[key].currentValue; + } + } + this.instance.setProperties(properties, false); + } + + setLayerSource(): void { + this.instance = new WMTS(this); + this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event)); + this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event)); + this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event)); + this.host.instance.setSource(this.instance); + } + + ngAfterContentInit(): void { + if (this.tileGridWMTS) { + this.tileGrid = this.tileGridWMTS.instance; + this.setLayerSource(); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts b/projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts new file mode 100644 index 0000000..6dfa57c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts @@ -0,0 +1,25 @@ +import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; +import { SourceComponent } from './source.component'; +import { LayerTileComponent } from '../layers/layertile.component'; +import { UTFGrid } from 'ol/source'; + +@Component({ + selector: 'aol-source-utfgrid', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }], +}) +export class SourceUTFGridComponent extends SourceComponent implements OnInit { + @Input() tileJSON: JSON; + @Input() url: string; + + instance: UTFGrid; + + constructor(@Host() layer: LayerTileComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new UTFGrid(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/vector.component.ts b/projects/ngx-openlayers/src/lib/sources/vector.component.ts new file mode 100644 index 0000000..6a58c90 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/vector.component.ts @@ -0,0 +1,37 @@ +import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; +import { Vector } from 'ol/source'; +import Feature from 'ol/format/Feature'; +import { LayerVectorComponent } from '../layers/layervector.component'; +import { SourceComponent } from './source.component'; +import { LoadingStrategy } from 'ol/source/Vector'; + +@Component({ + selector: 'aol-source-vector', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }], +}) +export class SourceVectorComponent extends SourceComponent implements OnInit { + @Input() + overlaps: boolean; + @Input() + useSpatialIndex: boolean; + @Input() + wrapX: boolean; + @Input() + url: string; + @Input() + format: Feature; + @Input() + strategy: LoadingStrategy; + + instance: Vector; + + constructor(@Host() layer: LayerVectorComponent) { + super(layer); + } + + ngOnInit() { + this.instance = new Vector(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts b/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts new file mode 100644 index 0000000..75ba2c9 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts @@ -0,0 +1,57 @@ +import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core'; +import { VectorTile } from 'ol'; +import Feature from 'ol/format/Feature'; +import TileGrid from 'ol/tilegrid/TileGrid'; +import { LayerVectorTileComponent } from '../layers/layervectortile.component'; +import { FormatComponent } from '../formats/format.component'; +import { TileGridComponent } from '../tilegrid.component'; +import { SourceComponent } from './source.component'; +import { ProjectionLike } from 'ol/proj'; +import { UrlFunction } from 'ol/Tile'; + +@Component({ + selector: 'aol-source-vectortile', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }], +}) +export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit { + @Input() + cacheSize: number; + @Input() + overlaps: boolean; + @Input() + projection: ProjectionLike; + @Input() + tilePixelRatio: number; + @Input() + tileUrlFunction: UrlFunction; + @Input() + url: string; + @Input() + urls: string[]; + @Input() + wrapX: boolean; + + @ContentChild(FormatComponent) + formatComponent: FormatComponent; + @ContentChild(TileGridComponent) + tileGridComponent: TileGridComponent; + + format: Feature; + tileGrid: TileGrid; + + instance: VectorTile; + + constructor(@Host() layer: LayerVectorTileComponent) { + super(layer); + } + + /* need the children to construct the OL3 object */ + ngAfterContentInit() { + this.format = this.formatComponent.instance; + this.tileGrid = this.tileGridComponent.instance; + // console.log('creating ol.source.VectorTile instance with:', this); + this.instance = new VectorTile(this); + this.host.instance.setSource(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts new file mode 100644 index 0000000..fd869e3 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts @@ -0,0 +1,115 @@ +import { + AfterContentInit, + Component, + ContentChild, + EventEmitter, + forwardRef, + Host, + Input, + OnChanges, + Optional, + Output, + SimpleChanges, +} from '@angular/core'; +import { Size } from 'ol/size'; +import { XYZ } from 'ol/source'; +import { TileSourceEvent } from 'ol/source/Tile'; +import { LoadFunction, UrlFunction } from 'ol/Tile'; +import TileGrid from 'ol/tilegrid/TileGrid'; + +import { LayerTileComponent } from '../layers/layertile.component'; +import { TileGridComponent } from '../tilegrid.component'; +import { SourceComponent } from './source.component'; + +@Component({ + selector: 'aol-source-xyz', + template: ` `, + providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }], +}) +export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges { + @Input() + cacheSize: number; + @Input() + crossOrigin: string; + @Input() + opaque: boolean; + @Input() + projection: string; + @Input() + reprojectionErrorThreshold: number; + @Input() + minZoom: number; + @Input() + maxZoom: number; + @Input() + tileGrid: TileGrid; + @Input() + tileLoadFunction?: LoadFunction; + @Input() + tilePixelRatio: number; + @Input() + tileSize: number | Size; + @Input() + tileUrlFunction?: UrlFunction; + @Input() + url: string; + @Input() + urls: string[]; + @Input() + wrapX: boolean; + + @ContentChild(TileGridComponent) + tileGridXYZ: TileGridComponent; + + @Output() + tileLoadStart: EventEmitter = new EventEmitter(); + @Output() + tileLoadEnd: EventEmitter = new EventEmitter(); + @Output() + tileLoadError: EventEmitter = new EventEmitter(); + + instance: XYZ; + + constructor( + @Optional() + @Host() + protected layer?: LayerTileComponent + ) { + super(layer); + } + + ngAfterContentInit() { + if (this.tileGridXYZ) { + this.tileGrid = this.tileGridXYZ.instance; + } + this.init(); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + properties[key] = changes[key].currentValue; + } + } + + this.instance.setProperties(properties, false); + if (changes.hasOwnProperty('url')) { + this.init(); + } + } + + init() { + this.instance = new XYZ(this); + + this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event)); + this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event)); + this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event)); + + this._register(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/circle.component.ts b/projects/ngx-openlayers/src/lib/styles/circle.component.ts new file mode 100644 index 0000000..78c5586 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/circle.component.ts @@ -0,0 +1,60 @@ +import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; +import { AtlasManager, Circle, Fill, Stroke } from 'ol/style'; +import { StyleComponent } from './style.component'; + +@Component({ + selector: 'aol-style-circle', + template: ` `, +}) +export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy { + @Input() + fill: Fill; + @Input() + radius: number; + @Input() + snapToPixel: boolean; + @Input() + stroke: Stroke; + @Input() + atlasManager: AtlasManager; + + componentType = 'style-circle'; + instance: Circle; + + constructor(@Host() private host: StyleComponent) {} + + /** + * WORK-AROUND: since the re-rendering is not triggered on style change + * we trigger a radius change. + * see openlayers #6233 and #5775 + */ + update() { + if (!!this.instance) { + // console.log('setting ol.style.Circle instance\'s radius'); + this.instance.setRadius(this.radius); + } + this.host.update(); + } + + ngAfterContentInit() { + // console.log('creating ol.style.Circle instance with: ', this); + this.instance = new Circle(this); + this.host.instance.setImage(this.instance); + this.host.update(); + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.instance) { + return; + } + if (changes.radius) { + this.instance.setRadius(changes.radius.currentValue); + } + // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue); + } + + ngOnDestroy() { + // console.log('removing aol-style-circle'); + this.host.instance.setImage(null); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/fill.component.ts b/projects/ngx-openlayers/src/lib/styles/fill.component.ts new file mode 100644 index 0000000..a577716 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/fill.component.ts @@ -0,0 +1,70 @@ +import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { Fill } from 'ol/style'; +import { StyleComponent } from './style.component'; +import { StyleCircleComponent } from './circle.component'; +import { StyleTextComponent } from './text.component'; +import { Color } from 'ol/color'; +import { ColorLike } from 'ol/colorlike'; + +@Component({ + selector: 'aol-style-fill', + template: `
`, +}) +export class StyleFillComponent implements OnInit, OnChanges { + @Input() + color: Color | ColorLike; + + instance: Fill; + /* the typings do not have the setters */ + private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any; + + constructor( + @Optional() styleHost: StyleComponent, + @Optional() styleCircleHost: StyleCircleComponent, + @Optional() styleTextHost: StyleTextComponent + ) { + if (!styleHost) { + throw new Error('aol-style-stroke must be a descendant of aol-style'); + } + if (!!styleTextHost) { + this.host = styleTextHost; + } else if (!!styleCircleHost) { + this.host = styleCircleHost; + } else { + this.host = styleHost; + } + // console.log('creating aol-style-fill with: ', this); + } + + ngOnInit() { + // console.log('creating ol.style.Fill instance with: ', this); + this.instance = new Fill(this); + switch (this.host.componentType) { + case 'style': + this.host.instance.setFill(this.instance); + // console.log('setting ol.style instance\'s fill:', this.host); + break; + case 'style-text': + this.host.instance.setFill(this.instance); + break; + case 'style-circle': + this.host.fill = this.instance; + // console.log('setting ol.style.circle instance\'s fill:', this.host); + break; + default: + throw new Error('unknown host type: ' + this.host); + // break; + } + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.instance) { + return; + } + if (changes.color) { + this.instance.setColor(changes.color.currentValue); + } + this.host.update(); + // console.log('changes detected in aol-style-fill, setting new color: ', changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/icon.component.ts b/projects/ngx-openlayers/src/lib/styles/icon.component.ts new file mode 100644 index 0000000..d9e7731 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/icon.component.ts @@ -0,0 +1,77 @@ +import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { Icon } from 'ol/style'; +import IconAnchorUnits from 'ol/style/IconAnchorUnits'; +import IconOrigin from 'ol/style/IconOrigin'; +import { StyleComponent } from './style.component'; + +@Component({ + selector: 'aol-style-icon', + template: `
`, +}) +export class StyleIconComponent implements OnInit, OnChanges { + @Input() + anchor: [number, number]; + @Input() + anchorXUnits: IconAnchorUnits; + @Input() + anchorYUnits: IconAnchorUnits; + @Input() + anchorOrigin: IconOrigin; + @Input() + color: [number, number, number, number]; + @Input() + crossOrigin: IconOrigin; + @Input() + img: string; + @Input() + offset: [number, number]; + @Input() + offsetOrigin: IconOrigin; + @Input() + opacity: number; + @Input() + scale: number; + @Input() + snapToPixel: boolean; + @Input() + rotateWithView: boolean; + @Input() + rotation: number; + @Input() + size: [number, number]; + @Input() + imgSize: [number, number]; + @Input() + src: string; + + instance: Icon; + + constructor(@Host() private host: StyleComponent) {} + + ngOnInit() { + // console.log('creating ol.style.Icon instance with: ', this); + this.instance = new Icon(this); + this.host.instance.setImage(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.instance) { + return; + } + if (changes.opacity) { + this.instance.setOpacity(changes.opacity.currentValue); + } + if (changes.rotation) { + this.instance.setRotation(changes.rotation.currentValue); + } + if (changes.scale) { + this.instance.setScale(changes.scale.currentValue); + } + if (changes.src) { + this.instance = new Icon(this); + this.host.instance.setImage(this.instance); + } + this.host.update(); + // console.log('changes detected in aol-style-icon: ', changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/stroke.component.ts b/projects/ngx-openlayers/src/lib/styles/stroke.component.ts new file mode 100644 index 0000000..fa0afd0 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/stroke.component.ts @@ -0,0 +1,95 @@ +import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { Stroke } from 'ol/style'; +import { StyleComponent } from './style.component'; +import { StyleCircleComponent } from './circle.component'; +import { StyleTextComponent } from './text.component'; +import { Color } from 'ol/color'; +import { ColorLike } from 'ol/colorlike'; + +@Component({ + selector: 'aol-style-stroke', + template: `
`, +}) +export class StyleStrokeComponent implements OnInit, OnChanges { + @Input() + color: Color | ColorLike; + @Input() + lineCap: string; + @Input() + lineDash: number[]; + @Input() + lineJoin: string; + @Input() + miterLimit: number; + @Input() + width: number; + + instance: Stroke; + /* the typings do not have the setters */ + host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any; + + constructor( + @Optional() styleHost: StyleComponent, + @Optional() styleCircleHost: StyleCircleComponent, + @Optional() styleTextHost: StyleTextComponent + ) { + if (!styleHost) { + throw new Error('aol-style-stroke must be a descendant of aol-style'); + } + if (!!styleTextHost) { + this.host = styleTextHost; + } else if (!!styleCircleHost) { + this.host = styleCircleHost; + } else { + this.host = styleHost; + } + // console.log('creating aol-style-stroke with: ', this); + } + + ngOnInit() { + // console.log('creating ol.style.Stroke instance with: ', this); + this.instance = new Stroke(this); + switch (this.host.componentType) { + case 'style': + this.host.instance.setStroke(this.instance); + // console.log('setting ol.style instance\'s stroke:', this.host); + break; + case 'style-text': + this.host.instance.setStroke(this.instance); + break; + case 'style-circle': + this.host.stroke = this.instance; + // console.log('setting ol.style.circle instance\'s stroke:', this.host); + break; + default: + throw new Error('unknown host type: ' + this.host); + // break; + } + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.instance) { + return; + } + if (changes.color) { + this.instance.setColor(changes.color.currentValue); + } + if (changes.lineCap) { + this.instance.setLineCap(changes.lineCap.currentValue); + } + if (changes.lineDash) { + this.instance.setLineDash(changes.lineDash.currentValue); + } + if (changes.lineJoin) { + this.instance.setLineJoin(changes.lineJoin.currentValue); + } + if (changes.miterLimit) { + this.instance.setMiterLimit(changes.miterLimit.currentValue); + } + if (changes.width) { + this.instance.setWidth(changes.width.currentValue); + } + this.host.update(); + // console.log('changes detected in aol-style-stroke, setting new properties: ', changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/style.component.ts b/projects/ngx-openlayers/src/lib/styles/style.component.ts new file mode 100644 index 0000000..92cec3d --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/style.component.ts @@ -0,0 +1,48 @@ +import { Component, Input, Optional, OnInit } from '@angular/core'; +import { Fill, Image, Stroke, Style, Text } from 'ol/style'; +import { Geometry } from 'ol/geom'; +import { FeatureComponent } from '../feature.component'; +import { LayerVectorComponent } from '../layers/layervector.component'; +import { GeometryFunction } from 'ol/style/Style'; + +@Component({ + selector: 'aol-style', + template: ` `, +}) +export class StyleComponent implements OnInit { + @Input() + geometry: string | Geometry | GeometryFunction; + @Input() + fill: Fill; + @Input() + image: Image; + @Input() + stroke: Stroke; + @Input() + text: Text; + @Input() + zIndex: number; + + instance: Style; + componentType = 'style'; + private host: FeatureComponent | LayerVectorComponent; + + constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) { + // console.log('creating aol-style'); + this.host = !!featureHost ? featureHost : layerHost; + if (!this.host) { + throw new Error('aol-style must be applied to a feature or a layer'); + } + } + + update() { + // console.log('updating style\'s host: ', this.host); + this.host.instance.changed(); + } + + ngOnInit() { + // console.log('creating aol-style instance with: ', this); + this.instance = new Style(this); + this.host.instance.setStyle(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/styles/text.component.ts b/projects/ngx-openlayers/src/lib/styles/text.component.ts new file mode 100644 index 0000000..f6848bd --- /dev/null +++ b/projects/ngx-openlayers/src/lib/styles/text.component.ts @@ -0,0 +1,76 @@ +import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { Text } from 'ol/style'; +import { StyleComponent } from './style.component'; + +@Component({ + selector: 'aol-style-text', + template: `
`, +}) +export class StyleTextComponent implements OnInit, OnChanges { + @Input() + font: string | undefined; + @Input() + offsetX: number | undefined; + @Input() + offsetY: number | undefined; + @Input() + scale: number | undefined; + @Input() + rotateWithView: boolean | undefined; + @Input() + rotation: number | undefined; + @Input() + text: string | undefined; + @Input() + textAlign: string | undefined; + @Input() + textBaseLine: string | undefined; + + instance: Text; + componentType = 'style-text'; + + constructor(@Optional() private host: StyleComponent) { + if (!host) { + throw new Error('aol-style-text must be a descendant of aol-style'); + } + // console.log('creating aol-style-text with: ', this); + } + + ngOnInit() { + // console.log('creating ol.style.Text instance with: ', this); + this.instance = new Text(this); + this.host.instance.setText(this.instance); + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.instance) { + return; + } + if (changes.font) { + this.instance.setFont(changes.font.currentValue); + } + if (changes.offsetX) { + this.instance.setOffsetX(changes.offsetX.currentValue); + } + if (changes.offsetY) { + this.instance.setOffsetY(changes.offsetY.currentValue); + } + if (changes.scale) { + this.instance.setScale(changes.scale.currentValue); + } + if (changes.rotation) { + this.instance.setRotation(changes.rotation.currentValue); + } + if (changes.text) { + this.instance.setText(changes.text.currentValue); + } + if (changes.textAlign) { + this.instance.setTextAlign(changes.textAlign.currentValue); + } + if (changes.textBaseLine) { + this.instance.setTextBaseline(changes.textBaseLine.currentValue); + } + this.host.update(); + // console.log('changes detected in aol-style-text, setting new properties: ', changes); + } +} diff --git a/projects/ngx-openlayers/src/lib/tilegrid.component.ts b/projects/ngx-openlayers/src/lib/tilegrid.component.ts new file mode 100644 index 0000000..aaf0a11 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/tilegrid.component.ts @@ -0,0 +1,43 @@ +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { createXYZ } from 'ol/tilegrid'; +import TileGrid from 'ol/tilegrid/TileGrid'; +import { Extent } from 'ol/extent'; +import { Coordinate } from 'ol/coordinate'; +import { Size } from 'ol/size'; + +@Component({ + selector: 'aol-tilegrid', + template: '', +}) +export class TileGridComponent implements OnInit, OnChanges { + @Input() + extent: Extent; + @Input() + maxZoom: number; + @Input() + minZoom: number; + @Input() + tileSize: number | Size; + @Input() + origin?: Coordinate; + @Input() + resolutions: number[]; + + instance: TileGrid; + + ngOnInit() { + if (!this.resolutions) { + this.instance = createXYZ(this); + } else { + this.instance = new TileGrid(this); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (!this.resolutions) { + this.instance = createXYZ(this); + } else { + this.instance = new TileGrid(this); + } + } +} diff --git a/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts b/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts new file mode 100644 index 0000000..5fc658c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, OnInit } from '@angular/core'; +import WMTS from 'ol/tilegrid/WMTS'; +import { TileGridComponent } from './tilegrid.component'; +import { Coordinate } from 'ol/coordinate'; +import { Size } from 'ol/size'; + +@Component({ + selector: 'aol-tilegrid-wmts', + template: '', +}) +export class TileGridWMTSComponent extends TileGridComponent implements OnInit { + @Input() + origin?: Coordinate; + @Input() + origins?: Coordinate[]; + @Input() + resolutions: number[]; + @Input() + matrixIds: string[]; + @Input() + sizes?: Size[]; + @Input() + tileSizes?: (number | Size)[]; + @Input() + widths?: number[]; + + instance: WMTS; + + ngOnInit() { + this.instance = new WMTS(this); + } +} diff --git a/projects/ngx-openlayers/src/lib/view.component.ts b/projects/ngx-openlayers/src/lib/view.component.ts new file mode 100644 index 0000000..b2d6737 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/view.component.ts @@ -0,0 +1,116 @@ +import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core'; +import View from 'ol/View'; +import { MapComponent } from './map.component'; +import { ObjectEvent } from 'ol'; +import { Extent } from 'ol/extent'; +import { Coordinate } from 'ol/coordinate'; + +@Component({ + selector: 'aol-view', + template: ` `, +}) +export class ViewComponent implements OnInit, OnChanges, OnDestroy { + @Input() + constrainRotation: boolean | number; + @Input() + enableRotation: boolean; + @Input() + extent: Extent; + @Input() + maxResolution: number; + @Input() + minResolution: number; + @Input() + maxZoom: number; + @Input() + minZoom: number; + @Input() + resolution: number; + @Input() + resolutions: number[]; + @Input() + rotation: number; + @Input() + zoom: number; + @Input() + zoomFactor: number; + @Input() + center: Coordinate; + @Input() + projection: string; + @Input() + constrainOnlyCenter: boolean; + @Input() + smoothExtentConstraint: boolean; + @Input() + constrainResolution: boolean; + @Input() + smoothResolutionConstraint: boolean; + @Input() + showFullExtent: boolean; + @Input() + multiWorld: boolean; + + @Input() + zoomAnimation = false; + + @Output() + changeZoom: EventEmitter = new EventEmitter(); + @Output() + changeResolution: EventEmitter = new EventEmitter(); + @Output() + changeCenter: EventEmitter = new EventEmitter(); + + instance: View; + componentType = 'view'; + + constructor(private host: MapComponent) {} + + ngOnInit() { + // console.log('creating ol.View instance with: ', this); + this.instance = new View(this); + this.host.instance.setView(this.instance); + + this.instance.on('change:zoom', (event: ObjectEvent) => this.changeZoom.emit(event)); + this.instance.on('change:resolution', (event: ObjectEvent) => this.changeResolution.emit(event)); + this.instance.on('change:center', (event: ObjectEvent) => this.changeCenter.emit(event)); + } + + ngOnChanges(changes: SimpleChanges) { + const properties: { [index: string]: any } = {}; + if (!this.instance) { + return; + } + for (const key in changes) { + if (changes.hasOwnProperty(key)) { + switch (key) { + case 'zoom': + /** Work-around: setting the zoom via setProperties does not work. */ + if (this.zoomAnimation) { + this.instance.animate({ zoom: changes[key].currentValue }); + } else { + this.instance.setZoom(changes[key].currentValue); + } + break; + case 'projection': + this.instance = new View(this); + this.host.instance.setView(this.instance); + break; + case 'center': + /** Work-around: setting the center via setProperties does not work. */ + this.instance.setCenter(changes[key].currentValue); + break; + default: + break; + } + properties[key] = changes[key].currentValue; + } + } + // console.log('changes detected in aol-view, setting new properties: ', properties); + this.instance.setProperties(properties, false); + } + + ngOnDestroy() { + // console.log('removing aol-view'); + } +} diff --git a/projects/ngx-openlayers/src/public-api.ts b/projects/ngx-openlayers/src/public-api.ts new file mode 100644 index 0000000..f682fd0 --- /dev/null +++ b/projects/ngx-openlayers/src/public-api.ts @@ -0,0 +1,246 @@ +/* + * Public API Surface of ngx-openlayers + */ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SimpleGeometryComponent } from './lib/geom/simplegeometry.component'; +import { SourceComponent } from './lib/sources/source.component'; +import { ViewComponent } from './lib/view.component'; +import { GraticuleComponent } from './lib/graticule.component'; +import { LayerGroupComponent } from './lib/layers/layergroup.component'; +import { LayerImageComponent } from './lib/layers/layerimage.component'; +import { LayerTileComponent } from './lib/layers/layertile.component'; +import { MapComponent } from './lib/map.component'; +import { LayerVectorComponent } from './lib/layers/layervector.component'; +import { LayerVectorTileComponent } from './lib/layers/layervectortile.component'; +import { SourceOsmComponent } from './lib/sources/osm.component'; +import { SourceBingmapsComponent } from './lib/sources/bingmaps.component'; +import { SourceClusterComponent } from './lib/sources/cluster.component'; +import { SourceVectorComponent } from './lib/sources/vector.component'; +import { SourceXYZComponent } from './lib/sources/xyz.component'; +import { SourceTileWMTSComponent } from './lib/sources/tilewmts.component'; +import { SourceVectorTileComponent } from './lib/sources/vectortile.component'; +import { SourceTileWMSComponent } from './lib/sources/tilewms.component'; +import { SourceTileJSONComponent } from './lib/sources/tilejson.component'; +import { SourceGeoJSONComponent } from './lib/sources/geojson.component'; +import { SourceImageStaticComponent } from './lib/sources/imagestatic.component'; +import { SourceImageWMSComponent } from './lib/sources/imagewms.component'; +import { SourceImageArcGISRestComponent } from './lib/sources/imagearcgisrest.component'; +import { SourceRasterComponent } from './lib/sources/raster.component'; +import { FeatureComponent } from './lib/feature.component'; +import { GeometryCircleComponent } from './lib/geom/geometrycircle.component'; +import { GeometryLinestringComponent } from './lib/geom/geometrylinestring.component'; +import { GeometryMultiLinestringComponent } from './lib/geom/geometrymultilinestring.component'; +import { GeometryMultiPointComponent } from './lib/geom/geometrymultipoint.component'; +import { GeometryMultiPolygonComponent } from './lib/geom/geometrymultipolygon.component'; +import { GeometryPointComponent } from './lib/geom/geometrypoint.component'; +import { GeometryPolygonComponent } from './lib/geom/geometrypolygon.component'; +import { CoordinateComponent } from './lib/coordinate.component'; +import { CollectionCoordinatesComponent } from './lib/collectioncoordinates.component'; +import { StyleComponent } from './lib/styles/style.component'; +import { StyleCircleComponent } from './lib/styles/circle.component'; +import { StyleStrokeComponent } from './lib/styles/stroke.component'; +import { StyleIconComponent } from './lib/styles/icon.component'; +import { StyleFillComponent } from './lib/styles/fill.component'; +import { StyleTextComponent } from './lib/styles/text.component'; +import { DefaultControlComponent } from './lib/controls/default.component'; +import { ControlComponent } from './lib/controls/control.component'; +import { ControlAttributionComponent } from './lib/controls/attribution.component'; +import { ControlFullScreenComponent } from './lib/controls/fullscreen.component'; +import { ControlMousePositionComponent } from './lib/controls/mouseposition.component'; +import { ControlOverviewMapComponent } from './lib/controls/overviewmap.component'; +import { ControlRotateComponent } from './lib/controls/rotate.component'; +import { ControlScaleLineComponent } from './lib/controls/scaleline.component'; +import { ControlZoomComponent } from './lib/controls/zoom.component'; +import { ControlZoomSliderComponent } from './lib/controls/zoomslider.component'; +import { ControlZoomToExtentComponent } from './lib/controls/zoomtoextent.component'; +import { FormatMVTComponent } from './lib/formats/mvt.component'; +import { TileGridComponent } from './lib/tilegrid.component'; +import { TileGridWMTSComponent } from './lib/tilegridwmts.component'; +import { DefaultInteractionComponent } from './lib/interactions/default.component'; +import { DoubleClickZoomInteractionComponent } from './lib/interactions/doubleclickzoom.component'; +import { DragAndDropInteractionComponent } from './lib/interactions/draganddrop.component'; +import { DragBoxInteractionComponent } from './lib/interactions/dragbox.component'; +import { DragPanInteractionComponent } from './lib/interactions/dragpan.component'; +import { DragRotateInteractionComponent } from './lib/interactions/dragrotate.component'; +import { DragRotateAndZoomInteractionComponent } from './lib/interactions/dragrotateandzoom.component'; +import { DragZoomInteractionComponent } from './lib/interactions/dragzoom.component'; +import { MouseWheelZoomInteractionComponent } from './lib/interactions/mousewheelzoom.component'; +import { PinchZoomInteractionComponent } from './lib/interactions/pinchzoom.component'; +import { DrawInteractionComponent } from './lib/interactions/draw.component'; +import { SelectInteractionComponent } from './lib/interactions/select.component'; +import { ModifyInteractionComponent } from './lib/interactions/modify.component'; +import { TranslateInteractionComponent } from './lib/interactions/translate.component'; +import { OverlayComponent } from './lib/overlay.component'; +import { ContentComponent } from './lib/content.component'; +import { AttributionsComponent } from './lib/attributions.component'; +import { AttributionComponent } from './lib/attribution.component'; +import { SourceUTFGridComponent } from './lib/sources/utfgrid.component'; +import { LayerComponent } from './lib/layers/layer.component'; + +export { + MapComponent, + ViewComponent, + GraticuleComponent, + LayerComponent, + LayerGroupComponent, + LayerImageComponent, + LayerTileComponent, + LayerVectorComponent, + LayerVectorTileComponent, + SourceComponent, + SourceOsmComponent, + SourceBingmapsComponent, + SourceClusterComponent, + SourceUTFGridComponent, + SourceVectorComponent, + SourceXYZComponent, + SourceVectorTileComponent, + SourceTileWMSComponent, + SourceTileWMTSComponent, + SourceTileJSONComponent, + SourceGeoJSONComponent, + SourceImageStaticComponent, + SourceImageWMSComponent, + SourceRasterComponent, + SourceImageArcGISRestComponent, + SimpleGeometryComponent, + FeatureComponent, + GeometryLinestringComponent, + GeometryMultiLinestringComponent, + GeometryMultiPointComponent, + GeometryMultiPolygonComponent, + GeometryPointComponent, + GeometryPolygonComponent, + GeometryCircleComponent, + CoordinateComponent, + CollectionCoordinatesComponent, + StyleComponent, + StyleCircleComponent, + StyleFillComponent, + StyleIconComponent, + StyleStrokeComponent, + StyleTextComponent, + DefaultControlComponent, + ControlComponent, + ControlAttributionComponent, + ControlFullScreenComponent, + ControlMousePositionComponent, + ControlOverviewMapComponent, + ControlRotateComponent, + ControlScaleLineComponent, + ControlZoomComponent, + ControlZoomSliderComponent, + ControlZoomToExtentComponent, + FormatMVTComponent, + TileGridComponent, + TileGridWMTSComponent, + DefaultInteractionComponent, + DoubleClickZoomInteractionComponent, + DragAndDropInteractionComponent, + DragBoxInteractionComponent, + DragPanInteractionComponent, + DragRotateInteractionComponent, + DragRotateAndZoomInteractionComponent, + DragZoomInteractionComponent, + MouseWheelZoomInteractionComponent, + PinchZoomInteractionComponent, + DrawInteractionComponent, + SelectInteractionComponent, + ModifyInteractionComponent, + TranslateInteractionComponent, + OverlayComponent, + ContentComponent, + AttributionsComponent, + AttributionComponent, +}; + +const COMPONENTS = [ + MapComponent, + + ViewComponent, + GraticuleComponent, + + LayerGroupComponent, + LayerImageComponent, + LayerTileComponent, + LayerVectorComponent, + LayerVectorTileComponent, + + SourceOsmComponent, + SourceBingmapsComponent, + SourceClusterComponent, + SourceUTFGridComponent, + SourceVectorComponent, + SourceXYZComponent, + SourceVectorTileComponent, + SourceTileWMSComponent, + SourceTileWMTSComponent, + SourceTileJSONComponent, + SourceGeoJSONComponent, + SourceImageStaticComponent, + SourceImageWMSComponent, + SourceImageArcGISRestComponent, + SourceRasterComponent, + + FeatureComponent, + GeometryLinestringComponent, + GeometryMultiLinestringComponent, + GeometryMultiPointComponent, + GeometryMultiPolygonComponent, + GeometryPointComponent, + GeometryPolygonComponent, + GeometryCircleComponent, + CoordinateComponent, + CollectionCoordinatesComponent, + + StyleComponent, + StyleCircleComponent, + StyleFillComponent, + StyleIconComponent, + StyleStrokeComponent, + StyleTextComponent, + + DefaultControlComponent, + ControlComponent, + ControlAttributionComponent, + ControlFullScreenComponent, + ControlMousePositionComponent, + ControlOverviewMapComponent, + ControlRotateComponent, + ControlScaleLineComponent, + ControlZoomComponent, + ControlZoomSliderComponent, + ControlZoomToExtentComponent, + + FormatMVTComponent, + TileGridComponent, + TileGridWMTSComponent, + + DefaultInteractionComponent, + DoubleClickZoomInteractionComponent, + DragAndDropInteractionComponent, + DragBoxInteractionComponent, + DragPanInteractionComponent, + DragRotateInteractionComponent, + DragRotateAndZoomInteractionComponent, + DragZoomInteractionComponent, + MouseWheelZoomInteractionComponent, + PinchZoomInteractionComponent, + DrawInteractionComponent, + SelectInteractionComponent, + ModifyInteractionComponent, + TranslateInteractionComponent, + + OverlayComponent, + ContentComponent, + AttributionsComponent, + AttributionComponent, +]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class AngularOpenlayersModule {} diff --git a/projects/ngx-openlayers/src/test.ts b/projects/ngx-openlayers/src/test.ts new file mode 100644 index 0000000..8cd315d --- /dev/null +++ b/projects/ngx-openlayers/src/test.ts @@ -0,0 +1,11 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js'; +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { + teardown: { destroyAfterEach: true }, +}); diff --git a/projects/ngx-openlayers/tsconfig.lib.json b/projects/ngx-openlayers/tsconfig.lib.json new file mode 100644 index 0000000..773f568 --- /dev/null +++ b/projects/ngx-openlayers/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declarationMap": true, + "declaration": true, + "inlineSources": true, + "types": [], + "lib": [ + "dom", + "es2020" + ] + }, + "angularCompilerOptions": { + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "enableResourceInlining": true + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/projects/ngx-openlayers/tsconfig.lib.prod.json b/projects/ngx-openlayers/tsconfig.lib.prod.json new file mode 100644 index 0000000..6330633 --- /dev/null +++ b/projects/ngx-openlayers/tsconfig.lib.prod.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} \ No newline at end of file diff --git a/projects/ngx-openlayers/tsconfig.spec.json b/projects/ngx-openlayers/tsconfig.spec.json new file mode 100644 index 0000000..16da33d --- /dev/null +++ b/projects/ngx-openlayers/tsconfig.spec.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/src/app/landingpage/landingpage.component.scss b/src/app/landingpage/landingpage.component.scss index a362474..5829310 100644 --- a/src/app/landingpage/landingpage.component.scss +++ b/src/app/landingpage/landingpage.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - /*! * Start Bootstrap - Landing Page v5.0.8 (https://startbootstrap.com/themes/landing-page) * Copyright 2013-2020 Start Bootstrap diff --git a/src/app/menu/menu.component.scss b/src/app/menu/menu.component.scss index 2d5f69f..5e31b7a 100644 --- a/src/app/menu/menu.component.scss +++ b/src/app/menu/menu.component.scss @@ -1,5 +1,3 @@ -@import "~bootstrap/scss/bootstrap.scss"; - .menu-card { padding-left:7px; padding-right:7px; @@ -29,7 +27,7 @@ width: 4rem; overflow: hidden; text-overflow: ellipsis; - color: $primary; + color: var(--bs-primary); } .shortcut-icon > .farm-icon { diff --git a/src/test.ts b/src/test.ts index cd31d85..a9fa5c0 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,22 +1,16 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), { - teardown: { destroyAfterEach: false } -} -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), { + teardown: { destroyAfterEach: false } +} +); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 3dd2928..8439a52 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "allowSyntheticDefaultImports": true, "importHelpers": true, "skipLibCheck": true, - "target": "es2020", + "target": "ES2022", "typeRoots": [ "node_modules/@types" ], @@ -31,7 +31,11 @@ "common-map3d": [ "dist/common-map3d/common-map3d", "dist/common-map3d" + ], + "ngx-openlayers/*": [ + "dist/ngx-openlayers/*" ] - } + }, + "useDefineForClassFields": false } } \ No newline at end of file