Merge branch 'feature/AW5739Angular_v16' into develop
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
This commit is contained in:
commit
d36185dbbf
1
.gitignore
vendored
1
.gitignore
vendored
@ -51,4 +51,5 @@ projects/common-map/node_modules/
|
|||||||
.angular/*
|
.angular/*
|
||||||
projects/common-map3d/node_modules/
|
projects/common-map3d/node_modules/
|
||||||
projects/common-map/node_modules/
|
projects/common-map/node_modules/
|
||||||
|
projects/common-aol/node_modules/
|
||||||
projects/common/node_modules/
|
projects/common/node_modules/
|
||||||
|
|||||||
28
angular.json
28
angular.json
@ -253,6 +253,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"common-aol": {
|
||||||
|
"projectType": "library",
|
||||||
|
"root": "projects/common-aol",
|
||||||
|
"sourceRoot": "projects/common-aol/src",
|
||||||
|
"prefix": "fm-aol",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:ng-packagr:build",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": "projects/common-aol/tsconfig.lib.json",
|
||||||
|
"project": "projects/common-aol/ng-package.json"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"tsConfig": "projects/common-aol/tsconfig.lib.prod.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "projects/common-aol/src/test.ts",
|
||||||
|
"tsConfig": "projects/common-aol/tsconfig.spec.json",
|
||||||
|
"karmaConfig": "projects/common-aol/karma.conf.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"cli": {
|
"cli": {
|
||||||
|
|||||||
19437
package-lock.json
generated
19437
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
61
package.json
61
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "farmmaps-lib-app",
|
"name": "farmmaps-lib-app",
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
@ -10,23 +10,24 @@
|
|||||||
"e2e": "ng e2e"
|
"e2e": "ng e2e"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^14.1.3",
|
|
||||||
"@angular/common": "^14.1.3",
|
|
||||||
"@angular/compiler": "^14.1.3",
|
|
||||||
"@angular/core": "^14.1.3",
|
|
||||||
"@angular-eslint/eslint-plugin": "^15.2.1",
|
"@angular-eslint/eslint-plugin": "^15.2.1",
|
||||||
"@angular/forms": "^14.1.3",
|
"@angular/animations": "^16.2.12",
|
||||||
"@angular/platform-browser": "^14.1.3",
|
"@angular/common": "^16.2.12",
|
||||||
"@angular/platform-browser-dynamic": "^14.1.3",
|
"@angular/compiler": "^16.2.12",
|
||||||
"@angular/router": "^14.1.3",
|
"@angular/core": "^16.2.12",
|
||||||
|
"@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": "file:dist/common",
|
||||||
|
"@farmmaps/common-aol": "file:dist/common-aol",
|
||||||
"@farmmaps/common-map": "file:dist/common-map",
|
"@farmmaps/common-map": "file:dist/common-map",
|
||||||
"@farmmaps/common-map3d": "file:dist/common-map3d",
|
"@farmmaps/common-map3d": "file:dist/common-map3d",
|
||||||
"@microsoft/signalr": "^3.1.16",
|
"@microsoft/signalr": "^8.0.0",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^13.0.0",
|
"@ng-bootstrap/ng-bootstrap": "^15.0.0",
|
||||||
"@ngrx/effects": "^14",
|
"@ngrx/effects": "^15",
|
||||||
"@ngrx/router-store": "^14",
|
"@ngrx/router-store": "^15",
|
||||||
"@ngrx/store": "^14",
|
"@ngrx/store": "^14",
|
||||||
"@popperjs/core": "^2.11.6",
|
"@popperjs/core": "^2.11.6",
|
||||||
"angular-oauth2-oidc": "^13",
|
"angular-oauth2-oidc": "^13",
|
||||||
@ -39,10 +40,9 @@
|
|||||||
"https-browserify": "^1.0.0",
|
"https-browserify": "^1.0.0",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"ngrx-store-localstorage": "^14",
|
"ngrx-store-localstorage": "^14",
|
||||||
"ngx-avatar": "^4.1.0",
|
"ngx-avatars": "^1.7.0",
|
||||||
"ngx-clipboard": "^14.0.1",
|
"ngx-clipboard": "^15.1.0",
|
||||||
"ngx-image-cropper": "^3.3.5",
|
"ngx-image-cropper": "^6.0.2",
|
||||||
"ngx-openlayers": "1.0.0-next.19",
|
|
||||||
"ngx-uploadx": "^5.2.0",
|
"ngx-uploadx": "^5.2.0",
|
||||||
"ol": "6.14.1",
|
"ol": "6.14.1",
|
||||||
"olcs": "^2.13.1",
|
"olcs": "^2.13.1",
|
||||||
@ -54,15 +54,15 @@
|
|||||||
"tslib": "^2.4.0",
|
"tslib": "^2.4.0",
|
||||||
"url": "^0.11.0",
|
"url": "^0.11.0",
|
||||||
"util": "^0.12.4",
|
"util": "^0.12.4",
|
||||||
"zone.js": "~0.11.4"
|
"zone.js": "~0.13.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-builders/custom-webpack": "^14",
|
"@angular-builders/custom-webpack": "^16.0.1",
|
||||||
"@angular-devkit/build-angular": "^14.1.3",
|
"@angular-devkit/build-angular": "^16.2.11",
|
||||||
"@angular/cli": "^14.1.3",
|
"@angular/cli": "^16.2.11",
|
||||||
"@angular/compiler-cli": "^14.1.3",
|
"@angular/compiler-cli": "^16.2.12",
|
||||||
"@angular/language-service": "^14.1.3",
|
"@angular/language-service": "^16.2.12",
|
||||||
"@angular/localize": "^14.1.3",
|
"@angular/localize": "^16.2.12",
|
||||||
"@types/arcgis-rest-api": "^10.4.5",
|
"@types/arcgis-rest-api": "^10.4.5",
|
||||||
"@types/jasmine": "~2.8.8",
|
"@types/jasmine": "~2.8.8",
|
||||||
"@types/jasminewd2": "^2.0.9",
|
"@types/jasminewd2": "^2.0.9",
|
||||||
@ -70,7 +70,6 @@
|
|||||||
"@typescript-eslint/eslint-plugin": "^5.54.0",
|
"@typescript-eslint/eslint-plugin": "^5.54.0",
|
||||||
"@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
|
"@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
|
||||||
"@typescript-eslint/parser": "^5.54.0",
|
"@typescript-eslint/parser": "^5.54.0",
|
||||||
"codelyzer": "^0.0.28",
|
|
||||||
"eslint": "^8.35.0",
|
"eslint": "^8.35.0",
|
||||||
"eslint-config-prettier": "^8.6.0",
|
"eslint-config-prettier": "^8.6.0",
|
||||||
"eslint-plugin-import": "^2.27.5",
|
"eslint-plugin-import": "^2.27.5",
|
||||||
@ -81,9 +80,9 @@
|
|||||||
"karma-coverage-istanbul-reporter": "^3.0.3",
|
"karma-coverage-istanbul-reporter": "^3.0.3",
|
||||||
"karma-jasmine": "^5.1.0",
|
"karma-jasmine": "^5.1.0",
|
||||||
"karma-jasmine-html-reporter": "^2.0.0",
|
"karma-jasmine-html-reporter": "^2.0.0",
|
||||||
"ng-packagr": "^14.1.0",
|
"ng-packagr": "^16.2.3",
|
||||||
"protractor": "~7.0.0",
|
"protractor": "^7.0.0",
|
||||||
"ts-node": "^8.8.1",
|
"ts-node": "^8.8.1",
|
||||||
"typescript": "~4.6.4"
|
"typescript": "~5.1.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
22
projects/common-aol/.eslintrc.js
Normal file
22
projects/common-aol/.eslintrc.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module.exports = {
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended"
|
||||||
|
],
|
||||||
|
"overrides": [
|
||||||
|
],
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": "latest",
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"@typescript-eslint"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
}
|
||||||
|
}
|
||||||
24
projects/common-aol/README.MD
Normal file
24
projects/common-aol/README.MD
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# CommonAol
|
||||||
|
|
||||||
|
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Run `ng generate component component-name --project common-aol` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project common-aol`.
|
||||||
|
> Note: Don't forget to add `--project common-aol` or else it will be added to the default project in your `angular.json` file.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build common-aol` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||||
|
|
||||||
|
## Publishing
|
||||||
|
|
||||||
|
After building your library with `ng build common-aol`, go to the dist folder `cd dist/common-aol` and run `npm publish`.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test common-aol` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||||
10
projects/common-aol/ng-package.json
Normal file
10
projects/common-aol/ng-package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||||
|
"dest": "../../dist/common-aol",
|
||||||
|
"lib": {
|
||||||
|
"entryFile": "src/public-api.ts"
|
||||||
|
},
|
||||||
|
"allowedNonPeerDependencies": [
|
||||||
|
"."
|
||||||
|
]
|
||||||
|
}
|
||||||
2548
projects/common-aol/package-lock.json
generated
Normal file
2548
projects/common-aol/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
projects/common-aol/package.json
Normal file
21
projects/common-aol/package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "@farmmaps/common-aol",
|
||||||
|
"version": "2.1.0",
|
||||||
|
"publishConfig": {
|
||||||
|
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.0.0",
|
||||||
|
"@types/openlayers": "4.3.x || 4.4.x",
|
||||||
|
"openlayers": "4.3.x || 4.4.x"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/core": ">=16.0.0",
|
||||||
|
"ngrx-store-localstorage": ">=16.0.0",
|
||||||
|
"@ngrx/effects": ">=16.0.0",
|
||||||
|
"@ngrx/router-store":">=16.0.0",
|
||||||
|
"@ngrx/store":">=16.0.0",
|
||||||
|
"tassign": ">=1.0.0",
|
||||||
|
"ol": ">=6.8.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
114
projects/common-aol/src/fm-aol/common-aol.module.ts
Normal file
114
projects/common-aol/src/fm-aol/common-aol.module.ts
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import {
|
||||||
|
MapComponent, ViewComponent, GraticuleComponent,
|
||||||
|
LayerGroupComponent, LayerTileComponent, LayerVectorComponent, LayerVectorTileComponent, LayerImageComponent,
|
||||||
|
SourceClusterComponent, SourceRasterComponent,
|
||||||
|
SourceBingmapsComponent, SourceOsmComponent, SourceVectorComponent, SourceVectorTileComponent, SourceXYZComponent, SourceTileUTFGridComponent, SourceTileWMSComponent,
|
||||||
|
SourceGeoJSONComponent, SourceTileWMTSComponent, SourceTileJSONComponent, SourceImageStaticComponent, SourceImageWMSComponent, FeatureComponent,
|
||||||
|
GeometryLinestringComponent, GeometryPointComponent, GeometryPolygonComponent,
|
||||||
|
CollectionCoordinatesComponent, CoordinateComponent,
|
||||||
|
StyleCircleComponent, StyleComponent, StyleFillComponent, StyleIconComponent, StyleStrokeComponent, StyleTextComponent,
|
||||||
|
ControlAttributionComponent, ControlMousePositionComponent,
|
||||||
|
// ControlFullScreenComponent, ControlRotateComponent, ControlZoomSliderComponent,
|
||||||
|
ControlOverviewMapComponent, ControlScaleLineComponent, ControlZoomComponent,
|
||||||
|
ControlZoomToExtentComponent, DefaultControlComponent, ControlComponent,
|
||||||
|
FormatMVTComponent,
|
||||||
|
TileGridComponent, TileGridWMTSComponent,
|
||||||
|
DefaultInteractionComponent, DragRotateInteractionComponent, DragRotateAndZoomInteractionComponent,
|
||||||
|
DoubleClickZoomInteractionComponent, DragAndDropInteractionComponent, DragBoxInteractionComponent,
|
||||||
|
DragPanInteractionComponent, DragZoomInteractionComponent, MouseWheelZoomInteractionComponent,
|
||||||
|
PinchZoomInteractionComponent, DrawInteractionComponent, SelectInteractionComponent, ModifyInteractionComponent, TranslateInteractionComponent,
|
||||||
|
OverlayComponent,
|
||||||
|
ContentComponent,
|
||||||
|
AttributionComponent,
|
||||||
|
AttributionsComponent
|
||||||
|
} from './components';
|
||||||
|
|
||||||
|
export * from './components';
|
||||||
|
|
||||||
|
const COMPONENTS = [
|
||||||
|
MapComponent,
|
||||||
|
|
||||||
|
ViewComponent,
|
||||||
|
GraticuleComponent,
|
||||||
|
|
||||||
|
LayerGroupComponent,
|
||||||
|
LayerImageComponent,
|
||||||
|
LayerTileComponent,
|
||||||
|
LayerVectorComponent,
|
||||||
|
LayerVectorTileComponent,
|
||||||
|
|
||||||
|
SourceClusterComponent,
|
||||||
|
SourceRasterComponent,
|
||||||
|
SourceOsmComponent,
|
||||||
|
SourceBingmapsComponent,
|
||||||
|
SourceVectorComponent,
|
||||||
|
SourceXYZComponent,
|
||||||
|
SourceVectorTileComponent,
|
||||||
|
SourceTileUTFGridComponent,
|
||||||
|
SourceTileWMSComponent,
|
||||||
|
SourceTileWMTSComponent,
|
||||||
|
SourceTileJSONComponent,
|
||||||
|
SourceGeoJSONComponent,
|
||||||
|
SourceImageStaticComponent,
|
||||||
|
SourceImageWMSComponent,
|
||||||
|
FeatureComponent,
|
||||||
|
GeometryLinestringComponent,
|
||||||
|
GeometryPointComponent,
|
||||||
|
GeometryPolygonComponent,
|
||||||
|
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,
|
||||||
|
AttributionComponent,
|
||||||
|
AttributionsComponent
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: COMPONENTS,
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: COMPONENTS
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AppCommonAolModule {
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { Component, ElementRef, OnInit } from '@angular/core';
|
||||||
|
import { Attribution } from 'openlayers';
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
|
||||||
|
import { Attribution } from 'openlayers';
|
||||||
|
import { SourceComponent } from './sources/source.component';
|
||||||
|
import { AttributionComponent } from './attribution.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-attributions',
|
||||||
|
template: '<ng-content></ng-content>'
|
||||||
|
})
|
||||||
|
export class AttributionsComponent implements AfterViewInit {
|
||||||
|
instance: Array<Attribution>;
|
||||||
|
|
||||||
|
@ContentChildren(AttributionComponent) attributions: QueryList<AttributionComponent>;
|
||||||
|
|
||||||
|
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,13 @@
|
|||||||
|
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,32 @@
|
|||||||
|
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-attribution',
|
||||||
|
template: ``
|
||||||
|
})
|
||||||
|
export class ControlAttributionComponent implements OnInit, OnDestroy {
|
||||||
|
public componentType: string = 'control';
|
||||||
|
instance: control.Attribution;
|
||||||
|
target: Element;
|
||||||
|
@Input() collapsible: boolean;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private map: MapComponent,
|
||||||
|
private element: ElementRef
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.target = this.element.nativeElement;
|
||||||
|
// console.log('ol.control.Attribution init: ', this);
|
||||||
|
this.instance = new control.Attribution(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-attribution');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { ContentComponent } from '../content.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ControlComponent implements OnInit, OnDestroy {
|
||||||
|
public componentType: string = 'control';
|
||||||
|
instance: control.Control;
|
||||||
|
element: Element;
|
||||||
|
@ContentChild(ContentComponent) content: ContentComponent;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private map: MapComponent
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
if (this.content) {
|
||||||
|
this.element = this.content.elementRef.nativeElement;
|
||||||
|
this.instance = new control.Control(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
if (this.instance) {
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { control, Collection } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-defaults',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DefaultControlComponent implements OnInit, OnDestroy {
|
||||||
|
instance: Collection<control.Control>;
|
||||||
|
@Input() attribution: boolean;
|
||||||
|
@Input() attributionOptions: olx.control.AttributionOptions;
|
||||||
|
@Input() rotate: boolean;
|
||||||
|
@Input() rotateOptions: olx.control.RotateOptions;
|
||||||
|
@Input() zoom: boolean;
|
||||||
|
@Input() zoomOptions: olx.control.ZoomOptions;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log('ol.control.defaults init: ', this);
|
||||||
|
this.instance = control.defaults(this);
|
||||||
|
this.instance.forEach((control) => this.map.instance.addControl(control));
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-defaults');
|
||||||
|
this.instance.forEach((control) => this.map.instance.removeControl(control));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'FullScreenOptions'.
|
||||||
|
|
||||||
|
// import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
// import { control } from 'openlayers';
|
||||||
|
// import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
// @Component({
|
||||||
|
// selector: 'aol-control-fullscreen',
|
||||||
|
// template: `<ng-content></ng-content>`
|
||||||
|
// })
|
||||||
|
// export class ControlFullScreenComponent implements OnInit, OnDestroy {
|
||||||
|
// instance: control.FullScreen;
|
||||||
|
|
||||||
|
// constructor(private map: MapComponent) {
|
||||||
|
// // console.log('instancing aol-control-fullscreen');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ngOnInit() {
|
||||||
|
// this.instance = new control.FullScreen(this);
|
||||||
|
// this.map.instance.addControl(this.instance);
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// ngOnDestroy() {
|
||||||
|
// // console.log('removing aol-control-fullscreen');
|
||||||
|
// this.map.instance.removeControl(this.instance);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
11
projects/common-aol/src/fm-aol/components/controls/index.ts
Normal file
11
projects/common-aol/src/fm-aol/components/controls/index.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
export * from './attribution.component';
|
||||||
|
export * from './control.component';
|
||||||
|
export * from './default.component';
|
||||||
|
//export * from './fullscreen.component';
|
||||||
|
export * from './mouseposition.component';
|
||||||
|
export * from './overviewmap.component';
|
||||||
|
//export * from './rotate.component';
|
||||||
|
export * from './scaleline.component';
|
||||||
|
export * from './zoom.component';
|
||||||
|
//export * from './zoomslider.component';
|
||||||
|
export * from './zoomtoextent.component';
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control, CoordinateFormatType, ProjectionLike } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-mouseposition',
|
||||||
|
template: ``
|
||||||
|
})
|
||||||
|
export class ControlMousePositionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: control.MousePosition;
|
||||||
|
@Input() coordinateFormat: CoordinateFormatType;
|
||||||
|
@Input() projection: ProjectionLike;
|
||||||
|
target: Element;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private map: MapComponent,
|
||||||
|
private element: ElementRef
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.target = this.element.nativeElement;
|
||||||
|
// console.log('ol.control.MousePosition init: ', this);
|
||||||
|
this.instance = new control.MousePosition(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-mouseposition');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control, View, layer } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-overviewmap',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ControlOverviewMapComponent implements OnInit, OnDestroy {
|
||||||
|
instance: control.OverviewMap;
|
||||||
|
@Input() collapsed: boolean;
|
||||||
|
@Input() collapseLabel: string;
|
||||||
|
@Input() collapsible: boolean;
|
||||||
|
@Input() label: string;
|
||||||
|
@Input() layers: layer.Layer[];
|
||||||
|
@Input() target: Element;
|
||||||
|
@Input() tipLabel: string;
|
||||||
|
@Input() view: View;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
// console.log('instancing aol-control-overviewmap');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new control.OverviewMap(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-overviewmap');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'RotateOptions'.
|
||||||
|
|
||||||
|
// import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
// import { control } from 'openlayers';
|
||||||
|
// import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
// @Component({
|
||||||
|
// selector: 'aol-control-rotate',
|
||||||
|
// template: `<ng-content></ng-content>`
|
||||||
|
// })
|
||||||
|
// export class ControlRotateComponent implements OnInit, OnDestroy {
|
||||||
|
// instance: control.Rotate;
|
||||||
|
|
||||||
|
// constructor(private map: MapComponent) {
|
||||||
|
// // console.log('instancing aol-control-rotate');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ngOnInit() {
|
||||||
|
// this.instance = new control.Rotate(this);
|
||||||
|
// this.map.instance.addControl(this.instance);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ngOnDestroy() {
|
||||||
|
// // console.log('removing aol-control-rotate');
|
||||||
|
// this.map.instance.removeControl(this.instance);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-scaleline',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ControlScaleLineComponent implements OnInit, OnDestroy {
|
||||||
|
instance: control.ScaleLine;
|
||||||
|
@Input() units: string;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
// console.log('instancing aol-control-scaleline');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new control.ScaleLine(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-scaleline');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-zoom',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ControlZoomComponent implements OnInit, OnDestroy {
|
||||||
|
instance: control.Zoom;
|
||||||
|
|
||||||
|
@Input() duration: number;
|
||||||
|
@Input() zoomInLabel: (string | Node);
|
||||||
|
@Input() zoomOutLabel: (string | Node);
|
||||||
|
@Input() zoomInTipLabel: string;
|
||||||
|
@Input() zoomOutTipLabel: string;
|
||||||
|
@Input() delta: number;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
// console.log('instancing aol-control-zoom');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new control.Zoom(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-zoom');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'ZoomSliderOptions'.
|
||||||
|
|
||||||
|
// import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
// import { control } from 'openlayers';
|
||||||
|
// import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
// @Component({
|
||||||
|
// selector: 'aol-control-zoomslider',
|
||||||
|
// template: `<ng-content></ng-content>`
|
||||||
|
// })
|
||||||
|
// export class ControlZoomSliderComponent implements OnInit, OnDestroy {
|
||||||
|
// instance: control.ZoomSlider;
|
||||||
|
|
||||||
|
// constructor(private map: MapComponent) {
|
||||||
|
// // console.log('instancing aol-control-zoomslider');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ngOnInit() {
|
||||||
|
// this.instance = new control.ZoomSlider(this);
|
||||||
|
// this.map.instance.addControl(this.instance);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ngOnDestroy() {
|
||||||
|
// // console.log('removing aol-control-zoomslider');
|
||||||
|
// this.map.instance.removeControl(this.instance);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { control, Extent } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-control-zoomtoextent',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
|
||||||
|
instance: control.ZoomToExtent;
|
||||||
|
|
||||||
|
@Input() className: string;
|
||||||
|
@Input() label: (string | Node);
|
||||||
|
@Input() tipLabel: string;
|
||||||
|
@Input() extent: Extent;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
// console.log('instancing aol-control-zoomtoextent');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new control.ZoomToExtent(this);
|
||||||
|
this.map.instance.addControl(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// console.log('removing aol-control-zoomtoextent');
|
||||||
|
this.map.instance.removeControl(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core';
|
||||||
|
import { proj, Coordinate } from 'openlayers';
|
||||||
|
import { MapComponent } from './map.component';
|
||||||
|
import { GeometryPointComponent, GeometryLinestringComponent, GeometryPolygonComponent } from './geometry.components';
|
||||||
|
import { ViewComponent } from './view.component';
|
||||||
|
import { OverlayComponent } from './overlay.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-coordinate',
|
||||||
|
template: `<div class="aol-coordinate"></div>`
|
||||||
|
})
|
||||||
|
export class CoordinateComponent implements OnChanges {
|
||||||
|
private host: any;
|
||||||
|
|
||||||
|
@Input() x: number;
|
||||||
|
@Input() y: number;
|
||||||
|
@Input() srid: string = 'EPSG:3857';
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private map: MapComponent,
|
||||||
|
@Optional() viewHost: ViewComponent,
|
||||||
|
@Optional() geometryPointHost: GeometryPointComponent,
|
||||||
|
@Optional() overlayHost: OverlayComponent
|
||||||
|
) {
|
||||||
|
// console.log('instancing aol-coordinate');
|
||||||
|
if (geometryPointHost !== null) {
|
||||||
|
this.host = geometryPointHost;
|
||||||
|
} else if (viewHost !== null) {
|
||||||
|
this.host = viewHost;
|
||||||
|
} else if (overlayHost !== null) {
|
||||||
|
this.host = overlayHost;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let referenceProjection: proj.Projection;
|
||||||
|
let referenceProjectionCode: string;
|
||||||
|
let transformedCoordinates: number[];
|
||||||
|
|
||||||
|
referenceProjection = this.map.instance.getView().getProjection();
|
||||||
|
referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
|
||||||
|
|
||||||
|
if (this.srid === referenceProjectionCode) {
|
||||||
|
transformedCoordinates = [this.x, this.y];
|
||||||
|
} else {
|
||||||
|
transformedCoordinates = proj.transform([this.x, this.y], this.srid, referenceProjectionCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.host.componentType) {
|
||||||
|
case 'geometry-point':
|
||||||
|
this.host.instance.setCoordinates(transformedCoordinates);
|
||||||
|
break;
|
||||||
|
case 'view':
|
||||||
|
this.host.instance.setCenter(transformedCoordinates);
|
||||||
|
break;
|
||||||
|
case 'overlay':
|
||||||
|
this.host.instance.setPosition(transformedCoordinates);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-collection-coordinates',
|
||||||
|
template: `<div class="aol-collection-coordinates"></div>`
|
||||||
|
})
|
||||||
|
export class CollectionCoordinatesComponent implements OnChanges {
|
||||||
|
private host: any;
|
||||||
|
|
||||||
|
@Input() coordinates: [number, number][];
|
||||||
|
@Input() srid: string = 'EPSG:3857';
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private map: MapComponent,
|
||||||
|
@Optional() geometryLinestring: GeometryLinestringComponent,
|
||||||
|
@Optional() geometryPolygon: GeometryPolygonComponent
|
||||||
|
) {
|
||||||
|
// console.log('creating aol-collection-coordinates');
|
||||||
|
if (!!geometryLinestring) {
|
||||||
|
this.host = geometryLinestring;
|
||||||
|
} else if (!!geometryPolygon) {
|
||||||
|
this.host = geometryPolygon;
|
||||||
|
} else {
|
||||||
|
throw new Error('aol-collection-coordinates must be a child of a geometry component');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let referenceProjection: proj.Projection;
|
||||||
|
let referenceProjectionCode: string;
|
||||||
|
let transformedCoordinates: Array<Coordinate>;
|
||||||
|
|
||||||
|
// console.log('coordinates change: ', this.coordinates);
|
||||||
|
|
||||||
|
referenceProjection = this.map.instance.getView().getProjection();
|
||||||
|
referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
|
||||||
|
|
||||||
|
if (this.srid === referenceProjectionCode) {
|
||||||
|
transformedCoordinates = this.coordinates;
|
||||||
|
} else {
|
||||||
|
transformedCoordinates = [];
|
||||||
|
this.coordinates.forEach(function (coordinate: Coordinate) {
|
||||||
|
transformedCoordinates.push(proj.transform(coordinate, this.srid, referenceProjectionCode));
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
switch (this.host.componentType) {
|
||||||
|
case 'geometry-linestring':
|
||||||
|
this.host.instance.setCoordinates(transformedCoordinates);
|
||||||
|
break;
|
||||||
|
case 'geometry-polygon':
|
||||||
|
this.host.instance.setCoordinates([transformedCoordinates]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('aol-collection-coordinates\' host is of unknown type: ' + this.host.componentType);
|
||||||
|
// break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
|
||||||
|
import { Feature } from 'openlayers';
|
||||||
|
import { SourceVectorComponent } from './sources';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-feature',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
|
public componentType = 'feature';
|
||||||
|
public instance: Feature;
|
||||||
|
|
||||||
|
@Input() id: string|number|undefined;
|
||||||
|
|
||||||
|
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 { format } from 'openlayers';
|
||||||
|
|
||||||
|
export class FormatComponent {
|
||||||
|
public instance: format.Feature;
|
||||||
|
public componentType = 'format';
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
export * from './format.component';
|
||||||
|
export * from './mvt.component';
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { Component, forwardRef, Input } from '@angular/core';
|
||||||
|
import { format, geom } from 'openlayers';
|
||||||
|
import { FormatComponent } from './format.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-format-mvt',
|
||||||
|
template: '',
|
||||||
|
providers: [
|
||||||
|
{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class FormatMVTComponent extends FormatComponent {
|
||||||
|
instance: format.MVT;
|
||||||
|
|
||||||
|
@Input() featureClass: (((geom: (geom.Geometry | { [k: string]: any })) => any) |
|
||||||
|
((geom: geom.GeometryType, arg2: number[], arg3: (number[] | number[][]), arg4: { [k: string]: any }) => any));
|
||||||
|
@Input() geometryName: string;
|
||||||
|
@Input() layerName: string;
|
||||||
|
@Input() layers: string[];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.instance = new format.MVT(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||||
|
import { geom } from 'openlayers';
|
||||||
|
import { FeatureComponent } from './feature.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-geometry-linestring',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class GeometryLinestringComponent implements OnInit, OnDestroy {
|
||||||
|
public componentType: string = 'geometry-linestring';
|
||||||
|
public instance: geom.LineString;
|
||||||
|
|
||||||
|
constructor(private host: FeatureComponent) {
|
||||||
|
// console.log('instancing aol-geometry-linestring');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new geom.LineString([]);
|
||||||
|
this.host.instance.setGeometry(this.instance);
|
||||||
|
}
|
||||||
|
ngOnDestroy() {
|
||||||
|
// this.host.setGeometry(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-geometry-point',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class GeometryPointComponent implements OnInit, OnDestroy {
|
||||||
|
public componentType: string = 'geometry-point';
|
||||||
|
public instance: geom.Point;
|
||||||
|
|
||||||
|
constructor(private host: FeatureComponent) {
|
||||||
|
// console.log('creating aol-geometry-point');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new geom.Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component.
|
||||||
|
this.host.instance.setGeometry(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// this.host.setGeometry(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-geometry-polygon',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class GeometryPolygonComponent implements OnInit, OnDestroy {
|
||||||
|
public componentType: string = 'geometry-polygon';
|
||||||
|
public instance: geom.Polygon;
|
||||||
|
|
||||||
|
constructor(private host: FeatureComponent) {
|
||||||
|
// console.log('creating aol-geometry-polygon');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// defaulting coordinates to [0,0]. To be overridden in child component.
|
||||||
|
this.instance = new geom.Polygon([ [ [0, 0], [1, 0], [1, 1] ] ]);
|
||||||
|
this.host.instance.setGeometry(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
// this.host.setGeometry(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
|
import { Graticule, style } from 'openlayers';
|
||||||
|
import { MapComponent } from './map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-graticule',
|
||||||
|
template: '<ng-content></ng-content>'
|
||||||
|
})
|
||||||
|
export class GraticuleComponent implements AfterContentInit, OnChanges {
|
||||||
|
instance: any;
|
||||||
|
public componentType: string = 'graticule';
|
||||||
|
|
||||||
|
@Input() strokeStyle: style.Stroke;
|
||||||
|
@Input() showLabels: boolean;
|
||||||
|
@Input() lonLabelPosition: number;
|
||||||
|
@Input() latLabelPosition: number;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: {[index: string]: any} = {};
|
||||||
|
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
19
projects/common-aol/src/fm-aol/components/index.ts
Normal file
19
projects/common-aol/src/fm-aol/components/index.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
export * from './controls';
|
||||||
|
export * from './formats';
|
||||||
|
export * from './interactions';
|
||||||
|
export * from './layers';
|
||||||
|
export * from './sources';
|
||||||
|
export * from './styles';
|
||||||
|
|
||||||
|
export * from './attribution.component';
|
||||||
|
export * from './attributions.component';
|
||||||
|
export * from './content.component';
|
||||||
|
export * from './coordinate.component';
|
||||||
|
export * from './feature.component';
|
||||||
|
export * from './geometry.components';
|
||||||
|
export * from './graticule.component';
|
||||||
|
export * from './map.component';
|
||||||
|
export * from './overlay.component';
|
||||||
|
export * from './tilegrid.component';
|
||||||
|
export * from './tilegridwmts.component';
|
||||||
|
export * from './view.component';
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { interaction, Collection } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-default',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DefaultInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: Collection<interaction.Interaction>;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = interaction.defaults();
|
||||||
|
this.instance.forEach((interaction) => this.map.instance.addInteraction(interaction));
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.instance.forEach((interaction) => this.map.instance.removeInteraction(interaction));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { interaction } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-doubleclickzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DoubleClickZoom;
|
||||||
|
|
||||||
|
@Input() duration: number;
|
||||||
|
@Input() delta: number;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DoubleClickZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { interaction, format, ProjectionLike } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-draganddrop',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragAndDrop;
|
||||||
|
|
||||||
|
@Input() formatConstructors: ((n: format.Feature) => any)[];
|
||||||
|
@Input() projection: ProjectionLike;
|
||||||
|
@Input() target: Element;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragAndDrop(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType, DragBoxEndConditionType } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-dragbox',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragBoxInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragBox;
|
||||||
|
|
||||||
|
@Input() className: string;
|
||||||
|
@Input() condition: EventsConditionType;
|
||||||
|
@Input() boxEndCondition: DragBoxEndConditionType;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragBox(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType, Kinetic } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-dragpan',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragPanInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragPan;
|
||||||
|
|
||||||
|
@Input() condition: EventsConditionType;
|
||||||
|
@Input() kinetic: Kinetic;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragPan(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-dragrotate',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragRotateInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragRotate;
|
||||||
|
|
||||||
|
@Input() condition: EventsConditionType;
|
||||||
|
@Input() duration: number;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragRotate(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-dragrotateandzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragRotate;
|
||||||
|
|
||||||
|
@Input() condition: EventsConditionType;
|
||||||
|
@Input() duration: number;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragRotateAndZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-dragzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DragZoomInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.DragZoom;
|
||||||
|
|
||||||
|
@Input() className: string;
|
||||||
|
@Input() condition: EventsConditionType;
|
||||||
|
@Input() duration: number;
|
||||||
|
@Input() out: boolean;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.DragZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
|
||||||
|
import { interaction } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-draw',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class DrawInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.Draw;
|
||||||
|
|
||||||
|
@Input() clickTolerance?: number;
|
||||||
|
@Input() features?: ol.Collection<ol.Feature>;
|
||||||
|
@Input() source?: ol.source.Vector;
|
||||||
|
@Input() snapTolerance?: number;
|
||||||
|
@Input() type: ol.geom.GeometryType;
|
||||||
|
@Input() maxPoints?: number;
|
||||||
|
@Input() minPoints?: number;
|
||||||
|
@Input() finishCondition?: ol.EventsConditionType;
|
||||||
|
@Input() style?: (ol.style.Style | ol.style.Style[] | ol.StyleFunction);
|
||||||
|
@Input() geometryFunction?: ol.DrawGeometryFunctionType;
|
||||||
|
@Input() geometryName?: string;
|
||||||
|
@Input() condition?: ol.EventsConditionType;
|
||||||
|
@Input() freehandCondition?: ol.EventsConditionType;
|
||||||
|
@Input() freehand?: boolean;
|
||||||
|
@Input() wrapX?: boolean;
|
||||||
|
|
||||||
|
@Output() onChange = new EventEmitter<ol.interaction.Draw.Event>();
|
||||||
|
@Output() onChangeActive = new EventEmitter<ol.interaction.Draw.Event>();
|
||||||
|
@Output() onDrawEnd = new EventEmitter<ol.interaction.Draw.Event>();
|
||||||
|
@Output() onDrawStart = new EventEmitter<ol.interaction.Draw.Event>();
|
||||||
|
@Output() onPropertyChange = new EventEmitter<ol.interaction.Draw.Event>();
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.Draw(this);
|
||||||
|
this.instance.on('change', (event: ol.interaction.Draw.Event) => this.onChange.emit(event));
|
||||||
|
this.instance.on('change:active', (event: ol.interaction.Draw.Event) => this.onChangeActive.emit(event));
|
||||||
|
this.instance.on('drawend', (event: ol.interaction.Draw.Event) => this.onDrawEnd.emit(event));
|
||||||
|
this.instance.on('drawstart', (event: ol.interaction.Draw.Event) => this.onDrawStart.emit(event));
|
||||||
|
this.instance.on('propertychange', (event: ol.interaction.Draw.Event) => this.onPropertyChange.emit(event));
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
export * from './default.component';
|
||||||
|
export * from './doubleclickzoom.component';
|
||||||
|
export * from './draganddrop.component';
|
||||||
|
export * from './dragbox.component';
|
||||||
|
export * from './dragpan.component';
|
||||||
|
export * from './dragrotate.component';
|
||||||
|
export * from './dragrotateandzoom.component';
|
||||||
|
export * from './dragzoom.component';
|
||||||
|
export * from './mousewheelzoom.component';
|
||||||
|
export * from './pinchzoom.component';
|
||||||
|
export * from './draw.component';
|
||||||
|
export * from './select.component';
|
||||||
|
export * from './translate.component';
|
||||||
|
export * from './modify.component';
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType, style, StyleFunction, Collection, Feature, source } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-modify',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class ModifyInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.Modify;
|
||||||
|
|
||||||
|
@Input() condition?: EventsConditionType;
|
||||||
|
@Input() deleteCondition?: EventsConditionType;
|
||||||
|
@Input() pixelTolerance?: number;
|
||||||
|
@Input() style?: (style.Style | style.Style[] | StyleFunction);
|
||||||
|
@Input() features: Collection<Feature>;
|
||||||
|
@Input() wrapX?: boolean;
|
||||||
|
@Input() source?: source.Vector;
|
||||||
|
|
||||||
|
@Output() onModifyEnd = new EventEmitter<interaction.Modify.Event>();
|
||||||
|
@Output() onModifyStart = new EventEmitter<interaction.Modify.Event>();
|
||||||
|
@Output() onChange = new EventEmitter<interaction.Modify.Event>();
|
||||||
|
@Output() onChangeActive = new EventEmitter<interaction.Modify.Event>();
|
||||||
|
@Output() onPropertyChange = new EventEmitter<interaction.Modify.Event>();
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.Modify(this);
|
||||||
|
this.instance.on('change', (event: interaction.Modify.Event) => this.onChange.emit(event));
|
||||||
|
this.instance.on('change:active', (event: interaction.Modify.Event) => this.onChangeActive.emit(event));
|
||||||
|
this.instance.on('propertychange', (event: interaction.Modify.Event) => this.onPropertyChange.emit(event));
|
||||||
|
this.instance.on('modifyend', (event: interaction.Modify.Event) => this.onModifyEnd.emit(event));
|
||||||
|
this.instance.on('modifystart', (event: interaction.Modify.Event) => this.onModifyStart.emit(event));
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { interaction } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-mousewheelzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.MouseWheelZoom;
|
||||||
|
@Input() duration: number;
|
||||||
|
@Input() timeout: number;
|
||||||
|
@Input() useAnchor: boolean;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.MouseWheelZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
"use strict";
|
||||||
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||||
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||||
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||||
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||||
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var core_1 = require("@angular/core");
|
||||||
|
var openlayers_1 = require("openlayers");
|
||||||
|
var PinchZoomInteractionComponent = (function () {
|
||||||
|
function PinchZoomInteractionComponent(map) {
|
||||||
|
this.map = map;
|
||||||
|
}
|
||||||
|
PinchZoomInteractionComponent.prototype.ngOnInit = function () {
|
||||||
|
this.instance = new openlayers_1.interaction.PinchZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
};
|
||||||
|
PinchZoomInteractionComponent.prototype.ngOnDestroy = function () {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
};
|
||||||
|
return PinchZoomInteractionComponent;
|
||||||
|
}());
|
||||||
|
__decorate([
|
||||||
|
core_1.Input()
|
||||||
|
], PinchZoomInteractionComponent.prototype, "duration", void 0);
|
||||||
|
__decorate([
|
||||||
|
core_1.Input()
|
||||||
|
], PinchZoomInteractionComponent.prototype, "constrainResolution", void 0);
|
||||||
|
PinchZoomInteractionComponent = __decorate([
|
||||||
|
core_1.Component({
|
||||||
|
selector: 'aol-interaction-pinchzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
], PinchZoomInteractionComponent);
|
||||||
|
exports.PinchZoomInteractionComponent = PinchZoomInteractionComponent;
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
|
||||||
|
import { interaction } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-pinchzoom',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.PinchZoom;
|
||||||
|
|
||||||
|
@Input() duration: number;
|
||||||
|
@Input() constrainResolution: boolean;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.PinchZoom(this);
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { interaction, EventsConditionType, layer, style, Collection, SelectFilterFunction, StyleFunction, Feature } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-select',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class SelectInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.Select;
|
||||||
|
|
||||||
|
|
||||||
|
@Input() addCondition?: EventsConditionType;
|
||||||
|
@Input() condition?: EventsConditionType;
|
||||||
|
@Input() layers?: (layer.Layer[] | ((layer: layer.Layer) => boolean));
|
||||||
|
@Input() style?: (style.Style | style.Style[] | StyleFunction);
|
||||||
|
@Input() removeCondition?: EventsConditionType;
|
||||||
|
@Input() toggleCondition?: EventsConditionType;
|
||||||
|
@Input() multi?: boolean;
|
||||||
|
@Input() features?: Collection<Feature>;
|
||||||
|
@Input() filter?: SelectFilterFunction;
|
||||||
|
@Input() wrapX?: boolean;
|
||||||
|
|
||||||
|
@Output() onChange = new EventEmitter<interaction.Select.Event>();
|
||||||
|
@Output() onSelect = new EventEmitter<interaction.Select.Event>();
|
||||||
|
@Output() onPropertyChange = new EventEmitter<interaction.Select.Event>();
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.Select(this);
|
||||||
|
|
||||||
|
this.instance.on('change', (event: interaction.Select.Event) => this.onChange.emit(event));
|
||||||
|
this.instance.on('select', (event: interaction.Select.Event) => this.onSelect.emit(event));
|
||||||
|
this.instance.on('propertychange', (event: interaction.Select.Event) => this.onPropertyChange.emit(event));
|
||||||
|
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { interaction, layer, Collection, Feature } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-interaction-translate',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class TranslateInteractionComponent implements OnInit, OnDestroy {
|
||||||
|
instance: interaction.Translate;
|
||||||
|
|
||||||
|
@Input() features?: Collection<Feature>;
|
||||||
|
@Input() layers?: (layer.Layer[] | ((layer: layer.Layer) => boolean));
|
||||||
|
@Input() hitTolerance?: number;
|
||||||
|
|
||||||
|
@Output() onChange: EventEmitter<interaction.Translate.Event>;
|
||||||
|
@Output() onPropertyChange: EventEmitter<interaction.Translate.Event>;
|
||||||
|
@Output() onTranslateEnd: EventEmitter<interaction.Translate.Event>;
|
||||||
|
@Output() onTranslateStart: EventEmitter<interaction.Translate.Event>;
|
||||||
|
@Output() onTranslating: EventEmitter<interaction.Translate.Event>;
|
||||||
|
|
||||||
|
constructor(private map: MapComponent) {
|
||||||
|
this.onChange = new EventEmitter<interaction.Translate.Event>();
|
||||||
|
this.onPropertyChange = new EventEmitter<interaction.Translate.Event>();
|
||||||
|
this.onTranslateEnd = new EventEmitter<interaction.Translate.Event>();
|
||||||
|
this.onTranslateStart = new EventEmitter<interaction.Translate.Event>();
|
||||||
|
this.onTranslating = new EventEmitter<interaction.Translate.Event>();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new interaction.Translate(this);
|
||||||
|
|
||||||
|
this.instance.on('change', (event: interaction.Translate.Event) => this.onChange.emit(event));
|
||||||
|
this.instance.on('propertychange', (event: interaction.Translate.Event) => this.onPropertyChange.emit(event));
|
||||||
|
this.instance.on('translateend', (event: interaction.Translate.Event) => this.onTranslateEnd.emit(event));
|
||||||
|
this.instance.on('translatestart', (event: interaction.Translate.Event) => this.onTranslateStart.emit(event));
|
||||||
|
this.instance.on('translating', (event: interaction.Translate.Event) => this.onTranslating.emit(event));
|
||||||
|
|
||||||
|
this.map.instance.addInteraction(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.map.instance.removeInteraction(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export * from './layer.component';
|
||||||
|
export * from './layergroup.component';
|
||||||
|
export * from './layerimage.component';
|
||||||
|
export * from './layertile.component';
|
||||||
|
export * from './layervector.component';
|
||||||
|
export * from './layervectortile.component';
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Component, Injectable } from '@angular/core';
|
||||||
|
import { layer, Extent } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { LayerGroupComponent } from './layergroup.component';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
|
public instance: any;
|
||||||
|
public componentType: string = 'layer';
|
||||||
|
|
||||||
|
@Input() opacity: number;
|
||||||
|
@Input() visible: boolean;
|
||||||
|
@Input() extent: Extent;
|
||||||
|
@Input() zIndex: number;
|
||||||
|
@Input() minResolution: number;
|
||||||
|
@Input() maxResolution: number;
|
||||||
|
|
||||||
|
@Input() precompose: (evt: ol.events.Event) => void;
|
||||||
|
@Input() postcompose: (evt: ol.events.Event) => void;
|
||||||
|
|
||||||
|
constructor(protected host: LayerGroupComponent | MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
if (this.precompose !== null && this.precompose !== undefined) {
|
||||||
|
this.instance.on('precompose', this.precompose);
|
||||||
|
}
|
||||||
|
if (this.postcompose !== null && this.postcompose !== undefined) {
|
||||||
|
this.instance.on('postcompose', this.postcompose);
|
||||||
|
}
|
||||||
|
this.host.instance.getLayers().push(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.host.instance.getLayers().remove(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: { [index: string]: any } = {};
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let key in changes) {
|
||||||
|
if (changes.hasOwnProperty(key)) {
|
||||||
|
properties[key] = changes[key].currentValue;
|
||||||
|
if (key === 'precompose') {
|
||||||
|
this.instance.un('precompose', changes[key].previousValue)
|
||||||
|
this.instance.on('precompose', changes[key].currentValue);
|
||||||
|
}
|
||||||
|
if (key === 'postcompose') {
|
||||||
|
this.instance.un('postcompose', changes[key].previousValue)
|
||||||
|
this.instance.on('postcompose', changes[key].currentValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// console.log('changes detected in aol-layer, setting new properties: ', properties);
|
||||||
|
this.instance.setProperties(properties, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, SkipSelf, Inject, Optional } from '@angular/core';
|
||||||
|
import { layer } from 'openlayers';
|
||||||
|
import { LayerComponent } from './layer.component';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-layer-group',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
|
||||||
|
public instance: ol.layer.Group;
|
||||||
|
|
||||||
|
constructor(map: MapComponent,
|
||||||
|
@SkipSelf() @Optional() group?: LayerGroupComponent) {
|
||||||
|
super(group || map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log(`creating ol.layer.Group instance with:`, this);
|
||||||
|
this.instance = new layer.Group(this);
|
||||||
|
super.ngOnInit();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import {
|
||||||
|
Component, EventEmitter, Input, OnChanges, OnInit, Optional,
|
||||||
|
SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import { Extent, layer, source } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { LayerComponent } from './layer.component';
|
||||||
|
import { LayerGroupComponent } from './layergroup.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-layer-image',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
|
||||||
|
public source: source.Image;
|
||||||
|
|
||||||
|
@Input() opacity: number;
|
||||||
|
@Input() visible: boolean;
|
||||||
|
@Input() extent: Extent;
|
||||||
|
@Input() minResolution: number;
|
||||||
|
@Input() maxResolution: number;
|
||||||
|
@Input() zIndex: number;
|
||||||
|
|
||||||
|
constructor(map: MapComponent,
|
||||||
|
@Optional() group?: LayerGroupComponent) {
|
||||||
|
super(group || map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new layer.Image(this);
|
||||||
|
super.ngOnInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
super.ngOnChanges(changes);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import {
|
||||||
|
Component, OnDestroy, OnInit, Input, Optional, OnChanges,
|
||||||
|
SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import { layer, source } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { LayerComponent } from './layer.component';
|
||||||
|
import { LayerGroupComponent } from './layergroup.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-layer-tile',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
|
public source: source.Tile;
|
||||||
|
|
||||||
|
@Input() preload: number;
|
||||||
|
@Input() useInterimTilesOnError: boolean;
|
||||||
|
|
||||||
|
constructor(map: MapComponent,
|
||||||
|
@Optional() group?: LayerGroupComponent) {
|
||||||
|
super(group || map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log('creating ol.layer.Tile instance with:', this);
|
||||||
|
this.instance = new layer.Tile(this);
|
||||||
|
super.ngOnInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
super.ngOnChanges(changes);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import {
|
||||||
|
Component, OnDestroy, OnInit, Input, Optional, OnChanges,
|
||||||
|
SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import { layer, source } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { LayerComponent } from './layer.component';
|
||||||
|
import { LayerGroupComponent } from './layergroup.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-layer-vector',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
|
public source: source.Vector;
|
||||||
|
|
||||||
|
@Input() renderBuffer: number;
|
||||||
|
|
||||||
|
constructor(map: MapComponent,
|
||||||
|
@Optional() group?: LayerGroupComponent) {
|
||||||
|
super(group || map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log('creating ol.layer.Vector instance with:', this);
|
||||||
|
this.instance = new layer.Vector(this);
|
||||||
|
super.ngOnInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
super.ngOnChanges(changes);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
|
||||||
|
import { layer, style, StyleFunction } from 'openlayers';
|
||||||
|
import { MapComponent } from '../map.component';
|
||||||
|
import { LayerComponent } from './layer.component';
|
||||||
|
import { LayerGroupComponent } from './layergroup.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-layer-vectortile',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
|
||||||
|
|
||||||
|
@Input() renderBuffer: number;
|
||||||
|
@Input() renderMode: layer.VectorTileRenderType|string;
|
||||||
|
/* not marked as optional in the typings */
|
||||||
|
@Input() renderOrder: (feature1: ol.Feature, feature2: ol.Feature) => number;
|
||||||
|
@Input() style: (style.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 layer.VectorTile(this);
|
||||||
|
super.ngOnInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
super.ngOnChanges(changes);
|
||||||
|
}
|
||||||
|
}
|
||||||
90
projects/common-aol/src/fm-aol/components/map.component.ts
Normal file
90
projects/common-aol/src/fm-aol/components/map.component.ts
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
import {
|
||||||
|
Component, OnInit, ElementRef, Input, Output, EventEmitter, AfterViewInit,
|
||||||
|
SimpleChanges, OnChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import {
|
||||||
|
Map, MapBrowserEvent, MapEvent, render, ObjectEvent, control,
|
||||||
|
interaction
|
||||||
|
} from 'openlayers';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-map',
|
||||||
|
template: `<div [style.width]="width" [style.height]="height"></div><ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
|
||||||
|
export class MapComponent implements OnInit, AfterViewInit, OnChanges {
|
||||||
|
public instance: Map;
|
||||||
|
public componentType: string = 'map';
|
||||||
|
|
||||||
|
@Input() width: string = '100%';
|
||||||
|
@Input() height: string = '100%';
|
||||||
|
@Input() pixelRatio: number;
|
||||||
|
@Input() keyboardEventTarget: Element|string;
|
||||||
|
@Input() loadTilesWhileAnimating: boolean;
|
||||||
|
@Input() loadTilesWhileInteracting: boolean;
|
||||||
|
@Input() logo: string|boolean;
|
||||||
|
@Input() renderer: 'canvas'|'webgl';
|
||||||
|
|
||||||
|
|
||||||
|
@Output() onClick: EventEmitter<MapBrowserEvent>;
|
||||||
|
@Output() onDblClick: EventEmitter<MapBrowserEvent>;
|
||||||
|
@Output() onMoveEnd: EventEmitter<MapEvent>;
|
||||||
|
@Output() onPointerDrag: EventEmitter<MapBrowserEvent>;
|
||||||
|
@Output() onPointerMove: EventEmitter<MapBrowserEvent>;
|
||||||
|
@Output() onPostCompose: EventEmitter<render.Event>;
|
||||||
|
@Output() onPostRender: EventEmitter<MapEvent>;
|
||||||
|
@Output() onPreCompose: EventEmitter<render.Event>;
|
||||||
|
@Output() onPropertyChange: EventEmitter<ObjectEvent>;
|
||||||
|
@Output() onSingleClick: EventEmitter<MapBrowserEvent>;
|
||||||
|
|
||||||
|
// we pass empty arrays to not get default controls/interactions because we have our own directives
|
||||||
|
controls: control.Control[] = [];
|
||||||
|
interactions: interaction.Interaction[] = [];
|
||||||
|
|
||||||
|
constructor(private host: ElementRef) {
|
||||||
|
this.onClick = new EventEmitter<MapBrowserEvent>();
|
||||||
|
this.onDblClick = new EventEmitter<MapBrowserEvent>();
|
||||||
|
this.onMoveEnd = new EventEmitter<MapEvent>();
|
||||||
|
this.onPointerDrag = new EventEmitter<MapBrowserEvent>();
|
||||||
|
this.onPointerMove = new EventEmitter<MapBrowserEvent>();
|
||||||
|
this.onPostCompose = new EventEmitter<render.Event>();
|
||||||
|
this.onPostRender = new EventEmitter<MapEvent>();
|
||||||
|
this.onPreCompose = new EventEmitter<render.Event>();
|
||||||
|
this.onPropertyChange = new EventEmitter<ObjectEvent>();
|
||||||
|
this.onSingleClick = new EventEmitter<MapBrowserEvent>();
|
||||||
|
}
|
||||||
|
|
||||||
|
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.onClick.emit(event));
|
||||||
|
this.instance.on('dblclick', (event: MapBrowserEvent) => this.onDblClick.emit(event));
|
||||||
|
this.instance.on('moveend', (event: MapEvent) => this.onMoveEnd.emit(event));
|
||||||
|
this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.onPointerDrag.emit(event));
|
||||||
|
this.instance.on('pointermove', (event: MapBrowserEvent) => this.onPointerMove.emit(event));
|
||||||
|
this.instance.on('postcompose', (event: render.Event) => this.onPostCompose.emit(event));
|
||||||
|
this.instance.on('postrender', (event: MapEvent) => this.onPostRender.emit(event));
|
||||||
|
this.instance.on('precompose', (event: render.Event) => this.onPreCompose.emit(event));
|
||||||
|
this.instance.on('propertychange', (event: ObjectEvent) => this.onPropertyChange.emit(event));
|
||||||
|
this.instance.on('singleclick', (event: MapBrowserEvent) => this.onSingleClick.emit(event));
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: { [index: string]: any } = {};
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { MapComponent } from './map.component';
|
||||||
|
import { Overlay, OverlayPositioning } from 'openlayers';
|
||||||
|
import { ContentComponent } from './content.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-overlay',
|
||||||
|
template: '<ng-content></ng-content>'
|
||||||
|
})
|
||||||
|
export class OverlayComponent implements OnInit, OnDestroy {
|
||||||
|
componentType = 'overlay';
|
||||||
|
instance: Overlay;
|
||||||
|
element: Element;
|
||||||
|
@ContentChild(ContentComponent) content: ContentComponent;
|
||||||
|
|
||||||
|
@Input() id: number|string;
|
||||||
|
@Input() offset: number[];
|
||||||
|
@Input() positioning: OverlayPositioning|string;
|
||||||
|
@Input() stopEvent: boolean;
|
||||||
|
@Input() insertFirst: boolean;
|
||||||
|
@Input() autoPan: boolean;
|
||||||
|
@Input() autoPanAnimation: olx.animation.PanOptions;
|
||||||
|
@Input() autoPanMargin: number;
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { source, TileLoadFunctionType } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-bingmaps',
|
||||||
|
template: `<div class="aol-source-bingmaps"></div>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceBingmapsComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.BingMaps;
|
||||||
|
|
||||||
|
@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: TileLoadFunctionType;
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerTileComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.BingMaps(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import {Component, Host, Input, OnInit, forwardRef, ContentChild, AfterContentInit} from '@angular/core';
|
||||||
|
import { source, Feature, geom } from 'openlayers';
|
||||||
|
import { LayerVectorComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
import { SourceVectorComponent } from './vector.component';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-cluster',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceClusterComponent extends SourceComponent implements AfterContentInit {
|
||||||
|
instance: source.Cluster;
|
||||||
|
|
||||||
|
@Input() distance: number;
|
||||||
|
@Input() geometryFunction?: ((feature: Feature) => geom.Point);
|
||||||
|
|
||||||
|
@ContentChild(SourceVectorComponent) sourceVectorComponent: SourceVectorComponent;
|
||||||
|
source: source.Vector;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerVectorComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
this.source = this.sourceVectorComponent.instance;
|
||||||
|
|
||||||
|
this.instance = new source.Cluster(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { source, ProjectionLike, format } from 'openlayers';
|
||||||
|
import { LayerVectorComponent } from '../layers';
|
||||||
|
import { FormatComponent } from '../formats';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-geojson',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.Vector;
|
||||||
|
format: format.Feature;
|
||||||
|
@Input() defaultDataProjection: ProjectionLike;
|
||||||
|
@Input() featureProjection: ProjectionLike;
|
||||||
|
@Input() geometryName: string;
|
||||||
|
@Input() url: string;
|
||||||
|
|
||||||
|
constructor( @Host() layer: LayerVectorComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.format = new format.GeoJSON(this);
|
||||||
|
this.instance = new source.Vector(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { ProjectionLike, source, Extent, AttributionLike, ImageLoadFunctionType, Size } from 'openlayers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
import { LayerImageComponent } from '../layers/layerimage.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-imagestatic',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
|
||||||
|
})
|
||||||
|
export class SourceImageStaticComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.ImageStatic;
|
||||||
|
|
||||||
|
@Input() projection: (ProjectionLike | string);
|
||||||
|
@Input() imageExtent: Extent;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() attributions: AttributionLike;
|
||||||
|
@Input() crossOrigin?: string;
|
||||||
|
@Input() imageLoadFunction?: ImageLoadFunctionType;
|
||||||
|
@Input() logo?: (string | olx.LogoOptions);
|
||||||
|
@Input() imageSize?: Size;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerImageComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.ImageStatic(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { AttributionLike, ImageLoadFunctionType, ProjectionLike, source } from 'openlayers';
|
||||||
|
import { LayerImageComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-imagewms',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceImageWMSComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.ImageWMS;
|
||||||
|
|
||||||
|
@Input() attributions: AttributionLike;
|
||||||
|
@Input() crossOrigin: string;
|
||||||
|
@Input() hidpi: boolean;
|
||||||
|
@Input() serverType: string;
|
||||||
|
@Input() imageLoadFunction?: ImageLoadFunctionType;
|
||||||
|
@Input() logo: (string | olx.LogoOptions);
|
||||||
|
@Input() params: Object;
|
||||||
|
@Input() projection: (ProjectionLike | string);
|
||||||
|
@Input() ratio: number;
|
||||||
|
@Input() resolutions: Array<number>;
|
||||||
|
@Input() url: string;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerImageComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.ImageWMS(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
15
projects/common-aol/src/fm-aol/components/sources/index.ts
Normal file
15
projects/common-aol/src/fm-aol/components/sources/index.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export * from './bingmaps.component';
|
||||||
|
export * from './osm.component';
|
||||||
|
export * from './source.component';
|
||||||
|
export * from './vector.component';
|
||||||
|
export * from './vectortile.component';
|
||||||
|
export * from './xyz.component';
|
||||||
|
export * from './tilewms.component';
|
||||||
|
export * from './geojson.component';
|
||||||
|
export * from './tilejson.component';
|
||||||
|
export * from './tileutfgrid.component';
|
||||||
|
export * from './tilewmts.component';
|
||||||
|
export * from './imagewms.component';
|
||||||
|
export * from './imagestatic.component';
|
||||||
|
export * from './cluster.component';
|
||||||
|
export * from './raster.component';
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import {Component, Host, forwardRef, Input, AfterContentInit, Optional, OnInit} from '@angular/core';
|
||||||
|
import { source, AttributionLike, TileLoadFunctionType } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
import { SourceXYZComponent } from './xyz.component';
|
||||||
|
import {SourceRasterComponent} from './raster.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-osm',
|
||||||
|
template: `<div class="aol-source-osm"></div>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
|
||||||
|
instance: source.OSM;
|
||||||
|
|
||||||
|
@Input() attributions: AttributionLike;
|
||||||
|
@Input() cacheSize: number;
|
||||||
|
@Input() crossOrigin: string;
|
||||||
|
@Input() maxZoom: number;
|
||||||
|
@Input() opaque: boolean;
|
||||||
|
@Input() reprojectionErrorThreshold: number;
|
||||||
|
@Input() tileLoadFunction: TileLoadFunctionType;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
|
||||||
|
constructor(@Host() @Optional() layer: LayerTileComponent,
|
||||||
|
@Host() @Optional() raster?: SourceRasterComponent) {
|
||||||
|
super(layer, raster);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
if (this.tileGridXYZ) {
|
||||||
|
this.tileGrid = this.tileGridXYZ.instance;
|
||||||
|
}
|
||||||
|
this.instance = new source.OSM(this);
|
||||||
|
this._register(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Output } from '@angular/core';
|
||||||
|
import { RasterOperation, RasterOperationType, source } from 'openlayers';
|
||||||
|
|
||||||
|
import { LayerImageComponent } from '../layers/layerimage.component';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-raster',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: SourceComponent,
|
||||||
|
useExisting: forwardRef(() => SourceRasterComponent)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
|
||||||
|
instance: source.Raster;
|
||||||
|
|
||||||
|
@Input() operation?: RasterOperation;
|
||||||
|
@Input() threads?: number;
|
||||||
|
@Input() lib?: Object;
|
||||||
|
@Input() operationType?: RasterOperationType;
|
||||||
|
|
||||||
|
@Output() beforeOperations: EventEmitter<source.RasterEvent> = new EventEmitter<source.RasterEvent>();
|
||||||
|
@Output() afterOperations: EventEmitter<source.RasterEvent> = new EventEmitter<source.RasterEvent>();
|
||||||
|
|
||||||
|
sources: source.Source[] = [];
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerImageComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
this.instance = new source.Raster(this);
|
||||||
|
|
||||||
|
this.instance.on('beforeoperations', (event: source.RasterEvent) => this.beforeOperations.emit(event));
|
||||||
|
this.instance.on('afteroperations', (event: source.RasterEvent) => this.afterOperations.emit(event));
|
||||||
|
|
||||||
|
this._register(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import {AfterContentInit, Component, Host, Input, OnDestroy, OnInit, Optional} from '@angular/core';
|
||||||
|
import { source } from 'openlayers';
|
||||||
|
import { LayerComponent } from '../layers';
|
||||||
|
import AttributionLike = ol.AttributionLike;
|
||||||
|
import { SourceRasterComponent } from './raster.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'required-for-ivy-2',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class SourceComponent implements OnDestroy {
|
||||||
|
public instance: source.Source;
|
||||||
|
public componentType: string = 'source';
|
||||||
|
|
||||||
|
@Input() attributions: AttributionLike;
|
||||||
|
|
||||||
|
constructor(protected host: LayerComponent, protected raster?: SourceRasterComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
if (this.host) {
|
||||||
|
this.host.instance.setSource(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.raster) {
|
||||||
|
this.raster.sources = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected _register(source: source.Source) {
|
||||||
|
if (this.host) {
|
||||||
|
this.host.instance.setSource(source);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.raster) {
|
||||||
|
this.raster.sources = [source];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { AttributionLike, source, TileLoadFunctionType, tilegrid } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-tilejson',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceTileJSONComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.TileJSON;
|
||||||
|
|
||||||
|
@Input() url: string;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerTileComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.TileJSON(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { source } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-tileutfgrid',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileUTFGridComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceTileUTFGridComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.TileUTFGrid;
|
||||||
|
@Input() tileJSON: JSON;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerTileComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.TileUTFGrid(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { source, TileLoadFunctionType, tilegrid } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-tilewms',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceTileWMSComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.TileWMS;
|
||||||
|
@Input() cacheSize: number;
|
||||||
|
@Input() crossOrigin: string;
|
||||||
|
@Input() gutter: number;
|
||||||
|
@Input() hidpi: boolean;
|
||||||
|
@Input() params: Object;
|
||||||
|
@Input() projection: string;
|
||||||
|
@Input() reprojectionErrorThreshold: number;
|
||||||
|
@Input() serverType: string;
|
||||||
|
@Input() tileGrid: tilegrid.TileGrid;
|
||||||
|
@Input() tileLoadFunction: TileLoadFunctionType;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() urls: string[];
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerTileComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.TileWMS(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
import {Component, Host, Input, forwardRef, AfterContentInit, ContentChild, SimpleChanges} from '@angular/core';
|
||||||
|
import {
|
||||||
|
TileLoadFunctionType,
|
||||||
|
tilegrid,
|
||||||
|
ProjectionLike,
|
||||||
|
source,
|
||||||
|
ImageTile,
|
||||||
|
TileCoord,
|
||||||
|
Tile
|
||||||
|
} from 'openlayers';
|
||||||
|
import {LayerTileComponent} from '../layers';
|
||||||
|
import {SourceComponent} from './source.component';
|
||||||
|
import {TileGridWMTSComponent} from '../tilegridwmts.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-tilewmts',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent)}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit {
|
||||||
|
|
||||||
|
instance: source.WMTS;
|
||||||
|
@Input() cacheSize?: number;
|
||||||
|
@Input() crossOrigin?: (string);
|
||||||
|
@Input() logo?: (string | olx.LogoOptions);
|
||||||
|
@Input() tileGrid: tilegrid.WMTS;
|
||||||
|
@Input() projection: ProjectionLike;
|
||||||
|
@Input() reprojectionErrorThreshold?: number;
|
||||||
|
@Input() requestEncoding?: (source.WMTSRequestEncoding | string);
|
||||||
|
@Input() layer: string;
|
||||||
|
@Input() style: string;
|
||||||
|
@Input() tileClass?: ((n: ImageTile, coords: TileCoord, state: Tile.State, s1: string, s2: string, type: TileLoadFunctionType) => any);
|
||||||
|
@Input() tilePixelRatio?: number;
|
||||||
|
@Input() version?: string;
|
||||||
|
@Input() format?: string;
|
||||||
|
@Input() matrixSet: string;
|
||||||
|
@Input() dimensions?: GlobalObject;
|
||||||
|
@Input() url?: string;
|
||||||
|
@Input() tileLoadFunction?: TileLoadFunctionType;
|
||||||
|
@Input() urls?: string[];
|
||||||
|
@Input() wrapX?: boolean;
|
||||||
|
|
||||||
|
@ContentChild(TileGridWMTSComponent) tileGridWMTS: TileGridWMTSComponent;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerTileComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: {[index: string]: any} = {};
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let 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 source.WMTS(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit(): void {
|
||||||
|
if (this.tileGridWMTS) {
|
||||||
|
this.tileGrid = this.tileGridWMTS.instance;
|
||||||
|
this.setLayerSource();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
|
||||||
|
import { source } from 'openlayers';
|
||||||
|
import { LayerVectorComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-vector',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceVectorComponent extends SourceComponent implements OnInit {
|
||||||
|
instance: source.Vector;
|
||||||
|
@Input() overlaps: boolean;
|
||||||
|
@Input() useSpatialIndex: boolean;
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() format: ol.format.Feature;
|
||||||
|
@Input() strategy: ol.LoadingStrategy;
|
||||||
|
|
||||||
|
constructor(@Host() layer: LayerVectorComponent) {
|
||||||
|
super(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new source.Vector(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
|
||||||
|
import { source, ProjectionLike, TileUrlFunctionType, format, tilegrid } from 'openlayers';
|
||||||
|
import { LayerVectorTileComponent } from '../layers';
|
||||||
|
import { FormatComponent } from '../formats';
|
||||||
|
import { TileGridComponent } from '../tilegrid.component';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-vectortile',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
|
||||||
|
public instance: source.VectorTile;
|
||||||
|
@Input() cacheSize: number;
|
||||||
|
@Input() overlaps: boolean;
|
||||||
|
@Input() projection: ProjectionLike;
|
||||||
|
@Input() tilePixelRatio: number;
|
||||||
|
@Input() tileUrlFunction: TileUrlFunctionType;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() urls: string[];
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
|
||||||
|
@ContentChild(FormatComponent) formatComponent: FormatComponent;
|
||||||
|
format: format.Feature;
|
||||||
|
@ContentChild(TileGridComponent) tileGridComponent: TileGridComponent;
|
||||||
|
tileGrid: tilegrid.TileGrid;
|
||||||
|
|
||||||
|
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 source.VectorTile(this);
|
||||||
|
this.host.instance.setSource(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
import {
|
||||||
|
Component,
|
||||||
|
Host,
|
||||||
|
Input,
|
||||||
|
AfterContentInit,
|
||||||
|
forwardRef,
|
||||||
|
OnChanges,
|
||||||
|
ContentChild,
|
||||||
|
SimpleChanges,
|
||||||
|
Optional,
|
||||||
|
OnInit
|
||||||
|
} from '@angular/core';
|
||||||
|
import { source, Size, TileUrlFunctionType, TileLoadFunctionType, tilegrid } from 'openlayers';
|
||||||
|
import { LayerTileComponent } from '../layers';
|
||||||
|
import { SourceComponent } from './source.component';
|
||||||
|
import { TileGridComponent } from '../tilegrid.component';
|
||||||
|
import { SourceRasterComponent } from './raster.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-source-xyz',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
providers: [
|
||||||
|
{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
|
||||||
|
instance: source.XYZ;
|
||||||
|
@Input() cacheSize: number;
|
||||||
|
@Input() crossOrigin: string;
|
||||||
|
@Input() opaque: boolean;
|
||||||
|
@Input() projection: string;
|
||||||
|
@Input() reprojectionErrorThreshold: number;
|
||||||
|
@Input() minZoom: number;
|
||||||
|
@Input() maxZoom: number;
|
||||||
|
@Input() tileGrid: tilegrid.TileGrid;
|
||||||
|
@Input() tileLoadFunction?: TileLoadFunctionType;
|
||||||
|
@Input() tilePixelRatio: number;
|
||||||
|
@Input() tileSize: number|Size;
|
||||||
|
@Input() tileUrlFunction: TileUrlFunctionType;
|
||||||
|
@Input() url: string;
|
||||||
|
@Input() urls: string[];
|
||||||
|
@Input() wrapX: boolean;
|
||||||
|
|
||||||
|
@ContentChild(TileGridComponent) tileGridXYZ: TileGridComponent;
|
||||||
|
|
||||||
|
constructor(@Optional() @Host() layer: LayerTileComponent,
|
||||||
|
@Optional() @Host() raster?: SourceRasterComponent) {
|
||||||
|
super(layer, raster);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
if (this.tileGridXYZ) {
|
||||||
|
this.tileGrid = this.tileGridXYZ.instance;
|
||||||
|
}
|
||||||
|
this.instance = new source.XYZ(this);
|
||||||
|
this._register(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: {[index: string]: any} = {};
|
||||||
|
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let key in changes) {
|
||||||
|
if (changes.hasOwnProperty(key)) {
|
||||||
|
properties[key] = changes[key].currentValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.instance.setProperties(properties, false);
|
||||||
|
if (changes.hasOwnProperty('url')) {
|
||||||
|
this.instance = new source.XYZ(this);
|
||||||
|
this._register(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import {
|
||||||
|
Component, Directive, EventEmitter, Host, OnDestroy, OnChanges, AfterContentInit,
|
||||||
|
Input, Output, ContentChild, SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import { style } from 'openlayers';
|
||||||
|
import { FeatureComponent } from './feature.component';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: 'aol-style-icon'
|
||||||
|
})
|
||||||
|
export class StyleIconDirective implements OnChanges {
|
||||||
|
|
||||||
|
// For usage info see: http://openlayers.org/en/latest/apidoc/ol.style.Icon.html
|
||||||
|
@Input() anchor: [number, number];
|
||||||
|
@Input() anchorXUnits: style.IconAnchorUnits;
|
||||||
|
@Input() anchorYUnits: style.IconAnchorUnits;
|
||||||
|
@Input() anchorOrigin: style.IconOrigin;
|
||||||
|
@Input() color: [number, number, number, number];
|
||||||
|
@Input() crossOrigin: style.IconOrigin;
|
||||||
|
@Input() img: string;
|
||||||
|
@Input() offset: [number, number];
|
||||||
|
@Input() offsetOrigin: style.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;
|
||||||
|
|
||||||
|
@Output() onChanged = new EventEmitter<any>();
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
this.onChanged.emit(this.src);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class StyleComponent implements OnDestroy, AfterContentInit {
|
||||||
|
private _host_: FeatureComponent;
|
||||||
|
private childSubscription$: any;
|
||||||
|
|
||||||
|
@ContentChild(StyleIconDirective) iconStyleDirective: StyleIconDirective;
|
||||||
|
|
||||||
|
constructor( @Host() feature: FeatureComponent) {
|
||||||
|
console.log('instancing aol-style');
|
||||||
|
this._host_ = feature;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
this.update();
|
||||||
|
this.childSubscription$ = this.iconStyleDirective.onChanged.subscribe((): void => {
|
||||||
|
this.update();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this._host_.setStyle(new style.Style({
|
||||||
|
image: new style.Icon({
|
||||||
|
anchor: this.iconStyleDirective.anchor,
|
||||||
|
anchorOrigin: this.iconStyleDirective.anchorOrigin,
|
||||||
|
anchorXUnits: this.iconStyleDirective.anchorXUnits,
|
||||||
|
anchorYUnits: this.iconStyleDirective.anchorYUnits,
|
||||||
|
color: this.iconStyleDirective.color,
|
||||||
|
crossOrigin: this.iconStyleDirective.crossOrigin,
|
||||||
|
img: this.iconStyleDirective.img,
|
||||||
|
offset: this.iconStyleDirective.offset,
|
||||||
|
offsetOrigin: this.iconStyleDirective.offsetOrigin,
|
||||||
|
opacity: this.iconStyleDirective.opacity,
|
||||||
|
scale: this.iconStyleDirective.scale,
|
||||||
|
snapToPixel: this.iconStyleDirective.snapToPixel,
|
||||||
|
rotateWithView: this.iconStyleDirective.rotateWithView,
|
||||||
|
rotation: this.iconStyleDirective.rotation,
|
||||||
|
size: this.iconStyleDirective.size,
|
||||||
|
imgSize: this.iconStyleDirective.imgSize,
|
||||||
|
src: this.iconStyleDirective.src
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.childSubscription$.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
||||||
|
import { style } from 'openlayers';
|
||||||
|
import { StyleComponent } from './style.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style-circle',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
|
||||||
|
public componentType: string = 'style-circle';
|
||||||
|
public instance: style.Circle;
|
||||||
|
|
||||||
|
@Input() fill: style.Fill;
|
||||||
|
@Input() radius: number;
|
||||||
|
@Input() snapToPixel: boolean;
|
||||||
|
@Input() stroke: style.Stroke;
|
||||||
|
@Input() atlasManager: style.AtlasManager;
|
||||||
|
|
||||||
|
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 style.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
|
import { style, Color, ColorLike } from 'openlayers';
|
||||||
|
import { StyleComponent } from './style.component';
|
||||||
|
import { StyleCircleComponent } from './circle.component';
|
||||||
|
import { StyleTextComponent } from './text.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style-fill',
|
||||||
|
template: `<div class="aol-style-fill"></div>`,
|
||||||
|
})
|
||||||
|
export class StyleFillComponent implements OnInit, OnChanges {
|
||||||
|
/* the typings do not have the setters */
|
||||||
|
private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/any;
|
||||||
|
public instance: style.Fill;
|
||||||
|
|
||||||
|
@Input() color: Color|ColorLike;
|
||||||
|
|
||||||
|
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 style.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
|
import { style } from 'openlayers';
|
||||||
|
import { StyleComponent } from './style.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style-icon',
|
||||||
|
template: `<div class="aol-style-icon"></div>`,
|
||||||
|
})
|
||||||
|
export class StyleIconComponent implements OnInit, OnChanges {
|
||||||
|
public instance: style.Icon;
|
||||||
|
|
||||||
|
@Input() anchor: [number, number];
|
||||||
|
@Input() anchorXUnits: style.IconAnchorUnits;
|
||||||
|
@Input() anchorYUnits: style.IconAnchorUnits;
|
||||||
|
@Input() anchorOrigin: style.IconOrigin;
|
||||||
|
@Input() color: [number, number, number, number];
|
||||||
|
@Input() crossOrigin: style.IconOrigin;
|
||||||
|
@Input() img: string;
|
||||||
|
@Input() offset: [number, number];
|
||||||
|
@Input() offsetOrigin: style.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;
|
||||||
|
|
||||||
|
|
||||||
|
constructor(@Host() private host: StyleComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log('creating ol.style.Icon instance with: ', this);
|
||||||
|
this.instance = new style.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 style.Icon(this);
|
||||||
|
this.host.instance.setImage(this.instance);
|
||||||
|
}
|
||||||
|
this.host.update();
|
||||||
|
// console.log('changes detected in aol-style-icon: ', changes);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export * from './circle.component';
|
||||||
|
export * from './fill.component';
|
||||||
|
export * from './icon.component';
|
||||||
|
export * from './stroke.component';
|
||||||
|
export * from './style.component';
|
||||||
|
export * from './text.component';
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
|
import { style, Color } from 'openlayers';
|
||||||
|
import { StyleComponent } from './style.component';
|
||||||
|
import { StyleCircleComponent } from './circle.component';
|
||||||
|
import { StyleTextComponent } from './text.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style-stroke',
|
||||||
|
template: `<div class="aol-style-stroke"></div>`,
|
||||||
|
})
|
||||||
|
export class StyleStrokeComponent implements OnInit, OnChanges {
|
||||||
|
public instance: style.Stroke;
|
||||||
|
/* the typings do not have the setters */
|
||||||
|
private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/any;
|
||||||
|
|
||||||
|
@Input() color: Color|undefined;
|
||||||
|
@Input() lineCap: string|undefined;
|
||||||
|
@Input() lineDash: number[]|undefined;
|
||||||
|
@Input() lineJoin: string|undefined;
|
||||||
|
@Input() miterLimit: number|undefined;
|
||||||
|
@Input() width: number|undefined;
|
||||||
|
|
||||||
|
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 style.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { Component, Input, Optional, OnInit } from '@angular/core';
|
||||||
|
import { style, StyleGeometryFunction, geom } from 'openlayers';
|
||||||
|
import { FeatureComponent } from '../feature.component';
|
||||||
|
import { LayerVectorComponent } from '../layers';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class StyleComponent implements OnInit {
|
||||||
|
private host: FeatureComponent|LayerVectorComponent;
|
||||||
|
public instance: style.Style;
|
||||||
|
public componentType: string = 'style';
|
||||||
|
|
||||||
|
@Input() geometry: string | geom.Geometry | StyleGeometryFunction;
|
||||||
|
@Input() fill: style.Fill;
|
||||||
|
@Input() image: style.Image;
|
||||||
|
@Input() stroke: style.Stroke;
|
||||||
|
@Input() text: style.Text;
|
||||||
|
@Input() zIndex: number;
|
||||||
|
|
||||||
|
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.Style(this);
|
||||||
|
this.host.instance.setStyle(this.instance);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||||
|
import { style } from 'openlayers';
|
||||||
|
import { StyleComponent } from './style.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-style-text',
|
||||||
|
template: `<div class="aol-style-text"></div>`,
|
||||||
|
})
|
||||||
|
export class StyleTextComponent implements OnInit, OnChanges {
|
||||||
|
public instance: style.Text;
|
||||||
|
public componentType: string = 'style-text';
|
||||||
|
|
||||||
|
@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;
|
||||||
|
|
||||||
|
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 style.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||||
|
import { tilegrid, Extent, Size , Coordinate} from 'openlayers';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-tilegrid',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class TileGridComponent implements OnInit, OnChanges {
|
||||||
|
instance: tilegrid.TileGrid;
|
||||||
|
|
||||||
|
@Input() extent: Extent;
|
||||||
|
@Input() maxZoom: number;
|
||||||
|
@Input() minZoom: number;
|
||||||
|
@Input() tileSize: number|Size;
|
||||||
|
@Input() origin?: Coordinate;
|
||||||
|
@Input() resolutions: number[];
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
if (!this.resolutions) {
|
||||||
|
this.instance = tilegrid.createXYZ(this)
|
||||||
|
} else {
|
||||||
|
this.instance = new tilegrid.TileGrid(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
if (!this.resolutions) {
|
||||||
|
this.instance = tilegrid.createXYZ(this)
|
||||||
|
} else {
|
||||||
|
this.instance = new tilegrid.TileGrid(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
|
import { tilegrid, Extent, Size, Coordinate } from 'openlayers';
|
||||||
|
import { TileGridComponent } from './tilegrid.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-tilegrid-wmts',
|
||||||
|
template: ''
|
||||||
|
})
|
||||||
|
export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
|
||||||
|
instance: tilegrid.WMTS;
|
||||||
|
|
||||||
|
@Input() origin?: Coordinate;
|
||||||
|
@Input() origins?: Coordinate[];
|
||||||
|
@Input() resolutions: number[];
|
||||||
|
@Input() matrixIds: string[];
|
||||||
|
@Input() sizes?: Size[];
|
||||||
|
@Input() tileSizes?: ((number | Size)[]);
|
||||||
|
@Input() widths?: number[];
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.instance = new tilegrid.WMTS(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
68
projects/common-aol/src/fm-aol/components/view.component.ts
Normal file
68
projects/common-aol/src/fm-aol/components/view.component.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
||||||
|
import { View, Extent, Coordinate } from 'openlayers';
|
||||||
|
import { MapComponent } from './map.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aol-view',
|
||||||
|
template: `<ng-content></ng-content>`
|
||||||
|
})
|
||||||
|
export class ViewComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
|
public instance: View;
|
||||||
|
public componentType: string = 'view';
|
||||||
|
|
||||||
|
@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() zoomAnimation = false;
|
||||||
|
|
||||||
|
constructor(private host: MapComponent) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
// console.log('creating ol.View instance with: ', this);
|
||||||
|
this.instance = new View(this);
|
||||||
|
this.host.instance.setView(this.instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
let properties: { [index: string]: any } = {};
|
||||||
|
if (!this.instance) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (let 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;
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
1
projects/common-aol/src/fm-aol/module-name.ts
Normal file
1
projects/common-aol/src/fm-aol/module-name.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const MODULE_NAME = "FarmMapsCommonAol";
|
||||||
5
projects/common-aol/src/public-api.ts
Normal file
5
projects/common-aol/src/public-api.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/*
|
||||||
|
* Public API Surface of common-aol
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from './fm-aol/common-aol.module';
|
||||||
30
projects/common-aol/tsconfig.lib.json
Normal file
30
projects/common-aol/tsconfig.lib.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/lib",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"importHelpers": true,
|
||||||
|
"types": [],
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"es2018"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"skipTemplateCodegen": true,
|
||||||
|
"strictMetadataEmit": true,
|
||||||
|
"fullTemplateTypeCheck": true,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"enableResourceInlining": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"src/test.ts",
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
39
projects/common-aol/tsconfig.lib.prod.json
Normal file
39
projects/common-aol/tsconfig.lib.prod.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/lib",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"importHelpers": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"types": [],
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"es2018"
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@angular/*": [
|
||||||
|
|
||||||
|
"node_modules/@angular/*"
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"skipTemplateCodegen": true,
|
||||||
|
"strictMetadataEmit": true,
|
||||||
|
"fullTemplateTypeCheck": true,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"enableResourceInlining": true,
|
||||||
|
"compilationMode": "partial"
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"src/test.ts",
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
17
projects/common-aol/tsconfig.spec.json
Normal file
17
projects/common-aol/tsconfig.spec.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src/test.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
100
projects/common-aol/tslint.json
Normal file
100
projects/common-aol/tslint.json
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
{
|
||||||
|
"rulesDirectory": [
|
||||||
|
"node_modules/codelyzer"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"class-name": true,
|
||||||
|
"comment-format": [
|
||||||
|
true,
|
||||||
|
"check-space"
|
||||||
|
],
|
||||||
|
"curly": true,
|
||||||
|
"eofline": true,
|
||||||
|
"forin": true,
|
||||||
|
"indent": [
|
||||||
|
true,
|
||||||
|
"spaces"
|
||||||
|
],
|
||||||
|
"label-position": true,
|
||||||
|
"max-line-length": [
|
||||||
|
true,
|
||||||
|
140
|
||||||
|
],
|
||||||
|
"member-access": false,
|
||||||
|
"member-ordering": [
|
||||||
|
true,
|
||||||
|
"static-before-instance",
|
||||||
|
"variables-before-functions"
|
||||||
|
],
|
||||||
|
"no-arg": true,
|
||||||
|
"no-bitwise": true,
|
||||||
|
"no-console": [
|
||||||
|
true,
|
||||||
|
"debug",
|
||||||
|
"info",
|
||||||
|
"time",
|
||||||
|
"timeEnd",
|
||||||
|
"trace"
|
||||||
|
],
|
||||||
|
"no-construct": true,
|
||||||
|
"no-debugger": true,
|
||||||
|
"no-duplicate-variable": true,
|
||||||
|
"no-empty": false,
|
||||||
|
"no-eval": true,
|
||||||
|
"no-inferrable-types": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-string-literal": false,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-trailing-whitespace": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-var-keyword": true,
|
||||||
|
"object-literal-sort-keys": false,
|
||||||
|
"one-line": [
|
||||||
|
true,
|
||||||
|
"check-open-brace",
|
||||||
|
"check-catch",
|
||||||
|
"check-else",
|
||||||
|
"check-whitespace"
|
||||||
|
],
|
||||||
|
"quotemark": [
|
||||||
|
true,
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"radix": true,
|
||||||
|
"semicolon": [
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"triple-equals": [
|
||||||
|
true,
|
||||||
|
"allow-null-check"
|
||||||
|
],
|
||||||
|
"typedef-whitespace": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"call-signature": "nospace",
|
||||||
|
"index-signature": "nospace",
|
||||||
|
"parameter": "nospace",
|
||||||
|
"property-declaration": "nospace",
|
||||||
|
"variable-declaration": "nospace"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": [
|
||||||
|
true,
|
||||||
|
"check-branch",
|
||||||
|
"check-decl",
|
||||||
|
"check-operator",
|
||||||
|
"check-separator",
|
||||||
|
"check-type"
|
||||||
|
],
|
||||||
|
"use-input-property-decorator": true,
|
||||||
|
"use-output-property-decorator": true,
|
||||||
|
"use-host-property-decorator": true,
|
||||||
|
"no-input-rename": true,
|
||||||
|
"no-output-rename": true,
|
||||||
|
"use-life-cycle-interface": true,
|
||||||
|
"use-pipe-transform-interface": true,
|
||||||
|
"component-class-suffix": true,
|
||||||
|
"directive-class-suffix": true
|
||||||
|
}
|
||||||
|
}
|
||||||
15
projects/common-map/package-lock.json
generated
15
projects/common-map/package-lock.json
generated
@ -1,22 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "@farmmaps/common-map",
|
"name": "@farmmaps/common-map",
|
||||||
"version": "2.0.0",
|
"version": "2.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@farmmaps/common-map",
|
"name": "@farmmaps/common-map",
|
||||||
"version": "2.0.0",
|
"version": "2.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.0.0"
|
"tslib": "^2.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@angular/core": ">=14.0.0",
|
"@angular/core": ">=16.0.0",
|
||||||
"@ngrx/effects": ">=14.0.0",
|
"@ngrx/effects": ">=16.0.0",
|
||||||
"@ngrx/router-store": ">=14.0.0",
|
"@ngrx/router-store": ">=16.0.0",
|
||||||
"@ngrx/store": ">=14.0.0",
|
"@ngrx/store": ">=16.0.0",
|
||||||
"ngrx-store-localstorage": ">=14.0.0",
|
"ngrx-store-localstorage": ">=16.0.0",
|
||||||
"ngx-openlayers": ">=1.0.0-next.19",
|
|
||||||
"ol": ">=6.8.1",
|
"ol": ">=6.8.1",
|
||||||
"tassign": ">=1.0.0"
|
"tassign": ">=1.0.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@farmmaps/common-map",
|
"name": "@farmmaps/common-map",
|
||||||
"version": "2.0.0",
|
"version": "2.1.0",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
||||||
},
|
},
|
||||||
@ -8,13 +8,12 @@
|
|||||||
"tslib": "^2.0.0"
|
"tslib": "^2.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@angular/core": ">=14.0.0",
|
"@angular/core": ">=16.0.0",
|
||||||
"ngrx-store-localstorage": ">=14.0.0",
|
"ngrx-store-localstorage": ">=16.0.0",
|
||||||
"@ngrx/effects": ">=14.0.0",
|
"@ngrx/effects": ">=16.0.0",
|
||||||
"@ngrx/router-store":">=14.0.0",
|
"@ngrx/router-store":">=16.0.0",
|
||||||
"@ngrx/store":">=14.0.0",
|
"@ngrx/store":">=16.0.0",
|
||||||
"tassign": ">=1.0.0",
|
"tassign": ">=1.0.0",
|
||||||
"ngx-openlayers": ">=1.0.0-next.19",
|
|
||||||
"ol": ">=6.8.1"
|
"ol": ">=6.8.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
|
|||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
|
||||||
//external modules
|
//external modules
|
||||||
import { AngularOpenlayersModule } from 'ngx-openlayers';
|
import { AppCommonAolModule } from '@farmmaps/common-aol';
|
||||||
import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
|
import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
|
||||||
import { EffectsModule } from '@ngrx/effects';
|
import { EffectsModule } from '@ngrx/effects';
|
||||||
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
|
||||||
@ -169,119 +169,119 @@ export {
|
|||||||
GeometryThumbnailComponent
|
GeometryThumbnailComponent
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
AngularOpenlayersModule,
|
AppCommonAolModule,
|
||||||
MapRoutingModule,
|
MapRoutingModule,
|
||||||
StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
|
StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
|
||||||
EffectsModule.forFeature([mapEffects.MapEffects]),
|
EffectsModule.forFeature([mapEffects.MapEffects]),
|
||||||
NgbModule,
|
NgbModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
AppCommonModule
|
AppCommonModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
ZoomToExtentComponent,
|
ZoomToExtentComponent,
|
||||||
ItemVectorSourceComponent,
|
ItemVectorSourceComponent,
|
||||||
ItemLayersComponent,
|
ItemLayersComponent,
|
||||||
FileDropTargetComponent,
|
FileDropTargetComponent,
|
||||||
MapComponent,
|
MapComponent,
|
||||||
MetaDataModalComponent,
|
MetaDataModalComponent,
|
||||||
RotationResetComponent,
|
RotationResetComponent,
|
||||||
MapSearchComponent,
|
MapSearchComponent,
|
||||||
SelectPeriodModalComponent,
|
SelectPeriodModalComponent,
|
||||||
LayerListComponent,
|
LayerListComponent,
|
||||||
LegendComponent,
|
LegendComponent,
|
||||||
LayerVectorImageComponent,
|
LayerVectorImageComponent,
|
||||||
FeatureListComponent,
|
FeatureListComponent,
|
||||||
WidgetHostDirective,
|
WidgetHostDirective,
|
||||||
FeatureListContainerComponent,
|
FeatureListContainerComponent,
|
||||||
FeatureListCroppingschemeComponent,
|
FeatureListCroppingschemeComponent,
|
||||||
FeatureListCropfieldComponent,
|
FeatureListCropfieldComponent,
|
||||||
FeatureListFeatureContainerComponent,
|
FeatureListFeatureContainerComponent,
|
||||||
FeatureListFeatureComponent,
|
FeatureListFeatureComponent,
|
||||||
FeatureListFeatureCroppingschemeComponent,
|
FeatureListFeatureCroppingschemeComponent,
|
||||||
FeatureListFeatureCropfieldComponent,
|
FeatureListFeatureCropfieldComponent,
|
||||||
SelectedItemContainerComponent,
|
SelectedItemContainerComponent,
|
||||||
SelectedItemComponent,
|
SelectedItemComponent,
|
||||||
SelectedItemCropfieldComponent,
|
SelectedItemCropfieldComponent,
|
||||||
SelectedItemGeotiffComponent,
|
SelectedItemGeotiffComponent,
|
||||||
SelectedItemTemporalComponent,
|
SelectedItemTemporalComponent,
|
||||||
SelectedItemShapeComponent,
|
SelectedItemShapeComponent,
|
||||||
ItemListItemComponent,
|
ItemListItemComponent,
|
||||||
ItemListItemContainerComponent,
|
ItemListItemContainerComponent,
|
||||||
ItemListComponent,
|
ItemListComponent,
|
||||||
ItemWidgetListComponent,
|
ItemWidgetListComponent,
|
||||||
WidgetStatusComponent,
|
WidgetStatusComponent,
|
||||||
GpsLocation,
|
GpsLocation,
|
||||||
PanToLocation,
|
PanToLocation,
|
||||||
LayerSwitcher,
|
LayerSwitcher,
|
||||||
HistogramDetailsComponent,
|
HistogramDetailsComponent,
|
||||||
StatisticsDetailsComponent,
|
StatisticsDetailsComponent,
|
||||||
ifZoomToShowDirective,
|
ifZoomToShowDirective,
|
||||||
ZoomToShowAlert,
|
ZoomToShowAlert,
|
||||||
LayerValuesComponent,
|
LayerValuesComponent,
|
||||||
GeometryThumbnailComponent
|
GeometryThumbnailComponent
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
ItemVectorSourceComponent,
|
ItemVectorSourceComponent,
|
||||||
ItemLayersComponent,
|
ItemLayersComponent,
|
||||||
FileDropTargetComponent,
|
FileDropTargetComponent,
|
||||||
MetaDataModalComponent,
|
MetaDataModalComponent,
|
||||||
MapComponent,
|
MapComponent,
|
||||||
GpsLocation,
|
GpsLocation,
|
||||||
PanToLocation,
|
PanToLocation,
|
||||||
LayerSwitcher,
|
LayerSwitcher,
|
||||||
FeatureListFeatureComponent,
|
FeatureListFeatureComponent,
|
||||||
FeatureListFeatureCropfieldComponent,
|
FeatureListFeatureCropfieldComponent,
|
||||||
FeatureListFeatureCroppingschemeComponent,
|
FeatureListFeatureCroppingschemeComponent,
|
||||||
SelectedItemContainerComponent,
|
SelectedItemContainerComponent,
|
||||||
SelectedItemComponent,
|
SelectedItemComponent,
|
||||||
SelectedItemCropfieldComponent,
|
SelectedItemCropfieldComponent,
|
||||||
SelectedItemGeotiffComponent,
|
SelectedItemGeotiffComponent,
|
||||||
SelectedItemTemporalComponent,
|
SelectedItemTemporalComponent,
|
||||||
SelectedItemShapeComponent,
|
SelectedItemShapeComponent,
|
||||||
ItemListItemComponent,
|
ItemListItemComponent,
|
||||||
ItemListItemContainerComponent,
|
ItemListItemContainerComponent,
|
||||||
ItemListComponent,
|
ItemListComponent,
|
||||||
ItemWidgetListComponent,
|
ItemWidgetListComponent,
|
||||||
WidgetStatusComponent,
|
WidgetStatusComponent,
|
||||||
RotationResetComponent,
|
RotationResetComponent,
|
||||||
MapSearchComponent,
|
MapSearchComponent,
|
||||||
SelectPeriodModalComponent,
|
SelectPeriodModalComponent,
|
||||||
LayerListComponent,
|
LayerListComponent,
|
||||||
LegendComponent,
|
LegendComponent,
|
||||||
LayerVectorImageComponent,
|
LayerVectorImageComponent,
|
||||||
FeatureListComponent,
|
FeatureListComponent,
|
||||||
WidgetHostDirective,
|
WidgetHostDirective,
|
||||||
FeatureListContainerComponent,
|
FeatureListContainerComponent,
|
||||||
FeatureListCroppingschemeComponent,
|
FeatureListCroppingschemeComponent,
|
||||||
FeatureListCropfieldComponent,
|
FeatureListCropfieldComponent,
|
||||||
FeatureListFeatureContainerComponent,
|
FeatureListFeatureContainerComponent,
|
||||||
ZoomToExtentComponent,
|
ZoomToExtentComponent,
|
||||||
ifZoomToShowDirective,
|
ifZoomToShowDirective,
|
||||||
ZoomToShowAlert,
|
ZoomToShowAlert,
|
||||||
GeometryThumbnailComponent
|
GeometryThumbnailComponent
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
FeatureIconService,
|
FeatureIconService,
|
||||||
GeolocationService,
|
GeolocationService,
|
||||||
DeviceOrientationService,
|
DeviceOrientationService,
|
||||||
TemporalService,
|
TemporalService,
|
||||||
{ provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
|
{ provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
|
||||||
{ provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
|
{ provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
|
||||||
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
|
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
|
||||||
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
|
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
|
||||||
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
|
{ provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
|
||||||
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
|
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
|
||||||
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
|
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
|
||||||
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
|
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
|
||||||
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
|
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
|
||||||
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
|
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
|
||||||
{ provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
|
{ provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
|
||||||
{ provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
|
{ provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
|
|
||||||
.gps-location {
|
.gps-location {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
@ -14,7 +11,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tolerance {
|
.tolerance {
|
||||||
fill: $primary;
|
fill: var(--bs-primary);
|
||||||
fill-opacity:0.4;
|
fill-opacity:0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,20 +20,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.border {
|
.border {
|
||||||
fill: $white;
|
fill: var(--bs-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
fill: $primary;
|
fill: var(--bs-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop1 {
|
.stop1 {
|
||||||
stop-color: $primary;
|
stop-color: var(--bs-primary);
|
||||||
stop-opacity:1;
|
stop-opacity:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop2 {
|
.stop2 {
|
||||||
stop-color:$primary;
|
stop-color: var(--bs-primary);
|
||||||
stop-opacity: 0;
|
stop-opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,8 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
|
|
||||||
.gps-location {
|
.gps-location {
|
||||||
display:block;
|
display:block;
|
||||||
width:2.5em;
|
width:2.5em;
|
||||||
height:2.5em;
|
height:2.5em;
|
||||||
background-color: $body-bg;
|
background-color: var(--bs-body-bg);
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
margin-top:0.5em;
|
margin-top:0.5em;
|
||||||
border-radius: 1.75em;
|
border-radius: 1.75em;
|
||||||
@ -17,15 +14,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pan-to {
|
.pan-to {
|
||||||
fill: $secondary;
|
fill: var(--bs-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.gps-location:hover .pan-to {
|
div.gps-location:hover .pan-to {
|
||||||
fill: $white;
|
fill: var(--bs-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-to-centered {
|
.pan-to-centered {
|
||||||
fill: $primary;
|
fill: var(--bs-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.gps-location:hover .pan-to-centered {
|
div.gps-location:hover .pan-to-centered {
|
||||||
@ -33,5 +30,5 @@ div.gps-location:hover .pan-to-centered {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pan-to.pan-to-disabled {
|
.pan-to.pan-to-disabled {
|
||||||
fill: $gray-300;
|
fill: var(--bs-gray-300);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
.compass {
|
.compass {
|
||||||
width:2.5em;
|
width:2.5em;
|
||||||
height:2.5em;
|
height:2.5em;
|
||||||
@ -13,7 +11,7 @@
|
|||||||
|
|
||||||
#north {
|
#north {
|
||||||
display: none;
|
display: none;
|
||||||
fill:$black;
|
fill: var(--bs-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
#top-l {
|
#top-l {
|
||||||
@ -33,23 +31,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
div.compass:hover #top-l {
|
div.compass:hover #top-l {
|
||||||
fill:$white;
|
fill: var(--bs-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.compass:hover #top-r {
|
div.compass:hover #top-r {
|
||||||
fill:$gray-300;
|
fill: var(--bs-gray-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.compass:hover #bottom-l {
|
div.compass:hover #bottom-l {
|
||||||
fill:$gray-300;
|
fill: var(--bs-gray-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.compass:hover #bottom-r {
|
div.compass:hover #bottom-r {
|
||||||
fill:$white;
|
fill: var(--bs-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.compass:hover #north {
|
div.compass:hover #north {
|
||||||
fill:$white;
|
fill: var(--bs-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.compass-n {
|
.compass-n {
|
||||||
|
|||||||
@ -1,14 +1,10 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
border-bottom: 1px solid $gray-500;
|
border-bottom: 1px solid var(--bs-gray-500);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.selected {
|
.row.selected {
|
||||||
background-color: $gray-100;
|
background-color: var(--bs-gray-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 44rem) {
|
@media screen and (min-width: 44rem) {
|
||||||
|
|||||||
@ -1,22 +1,20 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
fm-map-feature-list-feature-container {
|
fm-map-feature-list-feature-container {
|
||||||
width:100%;
|
width:100%;
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
border-bottom: 1px solid $gray-500;
|
border-bottom: 1px solid var(--bs-gray-500);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding-left:1.5rem;
|
padding-left:1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.selected {
|
.row.selected {
|
||||||
background-color: $gray-100;
|
background-color: var(--bs-gray-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropfields {
|
.cropfields {
|
||||||
border-top: 1px solid $gray-500;
|
border-top: 1px solid var(--bs-gray-500);
|
||||||
margin-left: -1.25rem;
|
margin-left: -1.25rem;
|
||||||
margin-right: -1.25rem;
|
margin-right: -1.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,20 @@
|
|||||||
@import "~bootstrap/scss/bootstrap.scss";
|
|
||||||
|
|
||||||
fm-map-feature-list-feature-container {
|
fm-map-feature-list-feature-container {
|
||||||
width:100%;
|
width:100%;
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
border-bottom: 1px solid $gray-500;
|
border-bottom: 1px solid var(--bs-gray-500);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding-left:1.5rem;
|
padding-left:1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row.selected {
|
.row.selected {
|
||||||
background-color: $gray-100;
|
background-color: var(--bs-gray-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.farms {
|
.farms {
|
||||||
border-top: 1px solid $gray-500;
|
border-top: 1px solid var(--bs-gray-500);
|
||||||
margin-left: -1.25rem;
|
margin-left: -1.25rem;
|
||||||
margin-right: -1.25rem;
|
margin-right: -1.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user