Merge branch 'develop'
Some checks reported errors
FarmMaps/FarmMapsLib/pipeline/head Something is wrong with the build of this commit
Some checks reported errors
FarmMaps/FarmMapsLib/pipeline/head Something is wrong with the build of this commit
# Conflicts: # README.md # package-lock.json # package.json
This commit is contained in:
commit
b2791eb80b
1
.gitignore
vendored
1
.gitignore
vendored
@ -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/
|
||||
|
||||
@ -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*
|
||||
|
||||
|
||||
39
angular.json
39
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": {
|
||||
|
||||
68
package.json
68
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"
|
||||
}
|
||||
}
|
||||
14
projects/common-map/package-lock.json
generated
14
projects/common-map/package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<Feature<Geometry>>, public query:IQueryState) { }
|
||||
}
|
||||
|
||||
export class ClickFeature implements Action {
|
||||
readonly type = CLICKFEATURE;
|
||||
|
||||
constructor(public feature:Feature<Geometry>) { }
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -64,9 +64,9 @@ export class FeatureListContainerComponent {
|
||||
viewContainerRef.clear();
|
||||
if(showItem) {
|
||||
this.componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).features = null;
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).queryState = queryState;
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = null;
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
|
||||
(<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -23,8 +23,9 @@ export abstract class AbstractFeatureListComponent {
|
||||
|
||||
handleFeatureClick(feature:Feature<Geometry>) {
|
||||
if(feature) {
|
||||
this.store.dispatch(new mapActions.ClickFeature(feature));
|
||||
const action = this.getAction(feature);
|
||||
this.store.dispatch(action);
|
||||
this.store.dispatch(action);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.widget {
|
||||
padding:0.8rem;
|
||||
height:100%;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<div class="row ps-3">
|
||||
<div class="col-8 nopadding"><span i18n>Average</span>:</div>
|
||||
<div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
|
||||
<div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.mean)| number:'1.0-2'}}</div>
|
||||
<div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>
|
||||
<div class="col-4 pull-left nopadding">{{histogram.stddev| number:'1.0-2'}}</div>
|
||||
<div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.stddev)| number:'1.0-2'}}</div>
|
||||
<div class="col-8 nopadding"><span i18n>Min</span>:</div>
|
||||
<div class="col-4 pull-left nopadding">{{histogram.min| number:'1.0-2'}}</div>
|
||||
<div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.min)| number:'1.0-2'}}</div>
|
||||
<div class="col-8 nopadding" ><span i18n>Max</span>:</div>
|
||||
<div class="col-4 pull-left nopadding">{{histogram.max| number:'1.0-2'}}</div>
|
||||
<div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.max)| number:'1.0-2'}}</div>
|
||||
|
||||
<ng-container *ngIf="showConfidenceInterval()">
|
||||
<div class="col-8 nopadding"><span i18n>Confidence interval</span>:</div>
|
||||
<div class="col-4 pull-left nopadding">{{histogram.confidence * 100| number:'1.0-0'}}%</div>
|
||||
<div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.confidence * 100)| number:'1.0-0'}}%</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</ng-container>
|
||||
|
||||
<ng-template #histogram>
|
||||
<fm-map-histogram-details [histogram]="layer.renderer.band.histogram"></fm-map-histogram-details>
|
||||
<fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
|
||||
</ng-template>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -192,6 +192,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
}
|
||||
|
||||
handleFeatureClick(feature: Feature<Geometry>) {
|
||||
this.store.dispatch(new mapActions.ClickFeature(feature));
|
||||
this.clickedFeature.next(feature);
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2020",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"declaration": true,
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2020",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"declaration": true,
|
||||
|
||||
6
projects/common-map3d/package-lock.json
generated
6
projects/common-map3d/package-lock.json
generated
@ -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"
|
||||
}
|
||||
},
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -8,13 +8,6 @@ import {
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(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);
|
||||
|
||||
32
projects/common/package-lock.json
generated
32
projects/common/package-lock.json
generated
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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<string>('fm-common-startpage');
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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) {}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<span class="avatar-container" [title]="name">
|
||||
<ngx-avatar
|
||||
<ngx-avatars
|
||||
class="farmmaps-avatar"
|
||||
[src]="src"
|
||||
[name]="name"
|
||||
[size]="size"
|
||||
[round]='true'
|
||||
>
|
||||
</ngx-avatar>
|
||||
</ngx-avatars>
|
||||
</span>
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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<appCommonReducer.State>) { }
|
||||
|
||||
|
||||
29
projects/common/src/fm/services/download.service.ts
Normal file
29
projects/common/src/fm/services/download.service.ts
Normal file
@ -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<any> {
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${itemCode}/data`);
|
||||
}
|
||||
|
||||
getData2(item: IItem): Observable<any> {
|
||||
if (item.size > 0) {
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/data`)
|
||||
}
|
||||
return of({});
|
||||
}
|
||||
}
|
||||
@ -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<appCommonReducer.State> ) { }
|
||||
|
||||
@ -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<appCommonReducer.State>) { }
|
||||
|
||||
@ -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) { }
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2020",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"declaration": true,
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"target": "es2020",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"declaration": true,
|
||||
|
||||
56
projects/ngx-openlayers/.eslintrc.json
Normal file
56
projects/ngx-openlayers/.eslintrc.json
Normal file
@ -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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
10
projects/ngx-openlayers/ng-package.json
Normal file
10
projects/ngx-openlayers/ng-package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
3
projects/ngx-openlayers/ngcc.config.js
Normal file
3
projects/ngx-openlayers/ngcc.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
ignorableDeepImportMatchers: [/ol\//]
|
||||
};
|
||||
17
projects/ngx-openlayers/package-lock.json
generated
Normal file
17
projects/ngx-openlayers/package-lock.json
generated
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
projects/ngx-openlayers/package.json
Normal file
12
projects/ngx-openlayers/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
18
projects/ngx-openlayers/src/lib/attribution.component.ts
Normal file
18
projects/ngx-openlayers/src/lib/attribution.component.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||
import { Attribution } from 'ol/control';
|
||||
|
||||
@Component({
|
||||
selector: 'aol-attribution',
|
||||
template: '<ng-content></ng-content>',
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
26
projects/ngx-openlayers/src/lib/attributions.component.ts
Normal file
26
projects/ngx-openlayers/src/lib/attributions.component.ts
Normal file
@ -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: '<ng-content></ng-content>',
|
||||
})
|
||||
export class AttributionsComponent implements AfterViewInit {
|
||||
@ContentChildren(AttributionComponent)
|
||||
attributions: QueryList<AttributionComponent>;
|
||||
|
||||
instance: Array<Attribution>;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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: ` <div class="aol-collection-coordinates"></div> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
9
projects/ngx-openlayers/src/lib/content.component.ts
Normal file
9
projects/ngx-openlayers/src/lib/content.component.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'aol-content',
|
||||
template: '<ng-content></ng-content>',
|
||||
})
|
||||
export class ContentComponent {
|
||||
constructor(public elementRef: ElementRef) {}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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<Control>;
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
36
projects/ngx-openlayers/src/lib/controls/rotate.component.ts
Normal file
36
projects/ngx-openlayers/src/lib/controls/rotate.component.ts
Normal file
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
38
projects/ngx-openlayers/src/lib/controls/zoom.component.ts
Normal file
38
projects/ngx-openlayers/src/lib/controls/zoom.component.ts
Normal file
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
80
projects/ngx-openlayers/src/lib/coordinate.component.ts
Normal file
80
projects/ngx-openlayers/src/lib/coordinate.component.ts
Normal file
@ -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: ` <div class="aol-coordinate"></div> `,
|
||||
})
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
projects/ngx-openlayers/src/lib/feature.component.ts
Normal file
35
projects/ngx-openlayers/src/lib/feature.component.ts
Normal file
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import Feature from 'ol/format/Feature';
|
||||
|
||||
export class FormatComponent {
|
||||
public instance: Feature;
|
||||
public componentType = 'format';
|
||||
}
|
||||
30
projects/ngx-openlayers/src/lib/formats/mvt.component.ts
Normal file
30
projects/ngx-openlayers/src/lib/formats/mvt.component.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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: ` <ng-content></ng-content> `,
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
57
projects/ngx-openlayers/src/lib/graticule.component.ts
Normal file
57
projects/ngx-openlayers/src/lib/graticule.component.ts
Normal file
@ -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: '<ng-content></ng-content>',
|
||||
})
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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<Interaction>;
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user