FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

AW-6046 ng-openlayers

Browse Source
This commit is contained in:
Peter Bastiani 2024-04-10 14:06:44 +02:00
parent 9c270bfe75
commit 4384b12944
100 changed files with 43 additions and 4228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
angular.json
View File

@ -253,43 +253,6 @@
} }
} }
} }
},
"ng-openlayers": {
"projectType": "library",
"root": "projects/ng-openlayers",
"sourceRoot": "projects/ng-openlayers/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/ng-openlayers/tsconfig.lib.json",
"project": "projects/ng-openlayers/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/ng-openlayers/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ng-openlayers/src/test.ts",
"tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
"karmaConfig": "projects/ng-openlayers/karma.conf.js"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"projects/ng-openlayers/**/*.ts",
"projects/ng-openlayers/**/*.html"
]
}
}
}
} }
}, },
"cli": { "cli": {

63
package-lock.json generated
View File

@ -35,10 +35,10 @@
"core-js": "^2.6.12", "core-js": "^2.6.12",
"https-browserify": "^1.0.0", "https-browserify": "^1.0.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"ngrx-store-localstorage": "17.0.0", "ngrx-store-localstorage": "17.0.0",
"ngx-avatars": "1.7.0", "ngx-avatars": "1.7.0",
"ngx-clipboard": "^15.1.0", "ngx-clipboard": "16.0.0",
"ngx-image-cropper": "^7.2.1", "ngx-image-cropper": "^7.2.1",
"ngx-uploadx": "^6.2.0", "ngx-uploadx": "^6.2.0",
"ol": "^8.2.0", "ol": "^8.2.0",
@ -86,7 +86,7 @@
}, },
"dist/common": { "dist/common": {
"name": "@farmmaps/common", "name": "@farmmaps/common",
"version": "4.5.0-prerelease.2458", "version": "2.0.0",
"dependencies": { "dependencies": {
"tslib": "^2.3.0" "tslib": "^2.3.0"
}, },
@ -94,7 +94,7 @@
"@angular/common": "^17.3.3", "@angular/common": "^17.3.3",
"@angular/core": "^17.3.3", "@angular/core": "^17.3.3",
"@angular/forms": "^17.3.3", "@angular/forms": "^17.3.3",
"@microsoft/signalr": ">3.1.3", "@microsoft/signalr": "^3.1.6",
"@ng-bootstrap/ng-bootstrap": "^16.0.0", "@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ngrx/effects": "^17", "@ngrx/effects": "^17",
"@ngrx/router-store": "^17", "@ngrx/router-store": "^17",
@ -103,15 +103,15 @@
"bootstrap": "^5.2.0", "bootstrap": "^5.2.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-avatars": "1.7.0", "ngx-avatars": "1.7.0",
"ngx-clipboard": ">15.1.0", "ngx-clipboard": "^15.1.0",
"ngx-image-cropper": ">7.2.1", "ngx-image-cropper": "^7.2.1",
"ngx-uploadx": "^6.2.0", "ngx-uploadx": "^6.2.0",
"tassign": ">1.0.0" "tassign": "^1.0.0"
} }
}, },
"dist/common-map": { "dist/common-map": {
"name": "@farmmaps/common-map", "name": "@farmmaps/common-map",
"version": "4.5.0-prerelease.2458", "version": "2.0.0",
"dependencies": { "dependencies": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
}, },
@ -128,7 +128,7 @@
}, },
"dist/common-map3d": { "dist/common-map3d": {
"name": "@farmmaps/common-map3d", "name": "@farmmaps/common-map3d",
"version": "4.5.0-prerelease.2458", "version": "2.0.0",
"dependencies": { "dependencies": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
}, },
@ -140,18 +140,6 @@
"ol-cesium": ">=2.13.0" "ol-cesium": ">=2.13.0"
} }
}, },
"dist/ng-openlayers": {
"version": "4.5.0-prerelease.2458",
"license": "MPL-2.0",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"ol": "^8.2.0"
}
},
"dist/ngx-openlayers": { "dist/ngx-openlayers": {
"version": "2.0.0", "version": "2.0.0",
"extraneous": true, "extraneous": true,
@ -12407,8 +12395,17 @@
"dev": true "dev": true
}, },
"node_modules/ng-openlayers": { "node_modules/ng-openlayers": {
"resolved": "dist/ng-openlayers", "version": "17.1.3",
"link": true "resolved": "https://registry.npmjs.org/ng-openlayers/-/ng-openlayers-17.1.3.tgz",
"integrity": "sha512-03FmNUhxF2431BmHvM80Fmo2AodsQeQE4zMcsNHnLOb3taDtmthmLFFG1TY6n03ZiZv2Xddp7fm6nXPeYt2jCg==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"ol": "^8.2.0"
}
}, },
"node_modules/ng-packagr": { "node_modules/ng-packagr": {
"version": "17.3.0", "version": "17.3.0",
@ -12526,11 +12523,11 @@
} }
}, },
"node_modules/ngx-clipboard": { "node_modules/ngx-clipboard": {
"version": "15.1.0", "version": "16.0.0",
"resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-15.1.0.tgz", "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-16.0.0.tgz",
"integrity": "sha512-dUJl1cNtdkCqL953oAhP7wmUPFrqW2aDg5OPhwPU9R3cLEdQgU2NbsHEUz4zaPyEopTXu8SR37onVm1Ep8qOHg==", "integrity": "sha512-rZ/Eo1PqiKMiyF8tdjhmUkoUu68f7OzBJ7YH1YFeh2RAaNrerTaW8XfFOzppSckjFQqA1fwGSYuTTJlDhDag5w==",
"dependencies": { "dependencies": {
"ngx-window-token": ">=6.0.0", "ngx-window-token": ">=7.0.0",
"tslib": "^2.0.0" "tslib": "^2.0.0"
}, },
"peerDependencies": { "peerDependencies": {
@ -26570,7 +26567,9 @@
"dev": true "dev": true
}, },
"ng-openlayers": { "ng-openlayers": {
"version": "file:dist/ng-openlayers", "version": "17.1.3",
"resolved": "https://registry.npmjs.org/ng-openlayers/-/ng-openlayers-17.1.3.tgz",
"integrity": "sha512-03FmNUhxF2431BmHvM80Fmo2AodsQeQE4zMcsNHnLOb3taDtmthmLFFG1TY6n03ZiZv2Xddp7fm6nXPeYt2jCg==",
"requires": { "requires": {
"tslib": "^2.3.0" "tslib": "^2.3.0"
} }
@ -26658,11 +26657,11 @@
} }
}, },
"ngx-clipboard": { "ngx-clipboard": {
"version": "15.1.0", "version": "16.0.0",
"resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-15.1.0.tgz", "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-16.0.0.tgz",
"integrity": "sha512-dUJl1cNtdkCqL953oAhP7wmUPFrqW2aDg5OPhwPU9R3cLEdQgU2NbsHEUz4zaPyEopTXu8SR37onVm1Ep8qOHg==", "integrity": "sha512-rZ/Eo1PqiKMiyF8tdjhmUkoUu68f7OzBJ7YH1YFeh2RAaNrerTaW8XfFOzppSckjFQqA1fwGSYuTTJlDhDag5w==",
"requires": { "requires": {
"ngx-window-token": ">=6.0.0", "ngx-window-token": ">=7.0.0",
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },

2
package.json
View File

@ -23,7 +23,7 @@
"@farmmaps/common": "file:dist/common", "@farmmaps/common": "file:dist/common",
"@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",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"@microsoft/signalr": "^3.1.16", "@microsoft/signalr": "^3.1.16",
"@ng-bootstrap/ng-bootstrap": "^16.0.0", "@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ngrx/effects": "^17", "@ngrx/effects": "^17",

4
projects/common-map/package-lock.json generated
View File

@ -15,10 +15,10 @@
"@ngrx/effects": "^17", "@ngrx/effects": "^17",
"@ngrx/router-store": "^17", "@ngrx/router-store": "^17",
"@ngrx/store": "^17", "@ngrx/store": "^17",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"ngrx-store-localstorage": "^17", "ngrx-store-localstorage": "^17",
"ol": "^8.2.0", "ol": "^8.2.0",
"tassign": ">1.0.0" "tassign": "^1.0.0"
} }
}, },
"node_modules/tslib": { "node_modules/tslib": {

2
projects/common-map/package.json
View File

@ -14,7 +14,7 @@
"@ngrx/router-store": "^17", "@ngrx/router-store": "^17",
"@ngrx/store": "^17", "@ngrx/store": "^17",
"tassign": "^1.0.0", "tassign": "^1.0.0",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"ol": "^8.2.0" "ol": "^8.2.0"
} }
} }

6
projects/common-map3d/package-lock.json generated
View File

@ -11,10 +11,10 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@angular/common": "^16.2.12", "@angular/common": "^17.3.3",
"@angular/core": "^16.2.12", "@angular/core": "^17.3.3",
"cesium": ">=1.82.1", "cesium": ">=1.82.1",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"ol-cesium": ">=2.13.0" "ol-cesium": ">=2.13.0"
} }
}, },

2
projects/common-map3d/package.json
View File

@ -7,7 +7,7 @@
"peerDependencies": { "peerDependencies": {
"@angular/common": "^17.3.3", "@angular/common": "^17.3.3",
"@angular/core": "^17.3.3", "@angular/core": "^17.3.3",
"ng-openlayers": "file:dist/ng-openlayers", "ng-openlayers": "17.1.3",
"cesium": ">=1.82.1", "cesium": ">=1.82.1",
"ol-cesium": ">=2.13.0" "ol-cesium": ">=2.13.0"
}, },

8
projects/common/package-lock.json generated
View File

@ -11,7 +11,7 @@
"@angular/common": "^17.3.3", "@angular/common": "^17.3.3",
"@angular/core": "^17.3.3", "@angular/core": "^17.3.3",
"@angular/forms": "^17.3.3", "@angular/forms": "^17.3.3",
"@microsoft/signalr": ">3.1.3", "@microsoft/signalr": "^3.1.16",
"@ng-bootstrap/ng-bootstrap": "^16.0.0", "@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ngrx/effects": "^17", "@ngrx/effects": "^17",
"@ngrx/router-store": "^17", "@ngrx/router-store": "^17",
@ -20,10 +20,10 @@
"bootstrap": "^5.2.0", "bootstrap": "^5.2.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-avatars": "1.7.0", "ngx-avatars": "1.7.0",
"ngx-clipboard": ">15.1.0", "ngx-clipboard": "16.0.0",
"ngx-image-cropper": ">7.2.1", "ngx-image-cropper": "^7.2.1",
"ngx-uploadx": "^6.2.0", "ngx-uploadx": "^6.2.0",
"tassign": ">1.0.0" "tassign": "^1.0.0"
} }
} }
} }

54
projects/ng-openlayers/.eslintrc.json
View File

@ -1,54 +0,0 @@
{
"extends": "../../.eslintrc.json",
"ignorePatterns": [
"!**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"libs/ng-openlayers/tsconfig.*?.json"
],
"createDefaultProgram": true
},
"rules": {
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "aol",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "aol",
"style": "camelCase"
}
],
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
"accessibility": "explicit"
}
],
"arrow-parens": [
"off",
"always"
],
"import/order": "off"
}
},
{
"files": [
"*.html"
],
"rules": {}
}
]
}

2
projects/ng-openlayers/.gitignore vendored
View File

@ -1,2 +0,0 @@
/node_modules

32
projects/ng-openlayers/karma.conf.js
View File

@ -1,32 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/ng-openlayers'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true,
});
};

10
projects/ng-openlayers/ng-package.json
View File

@ -1,10 +0,0 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ng-openlayers",
"assets": [
"ngcc.config.js"
],
"lib": {
"entryFile": "src/public-api.ts"
}
}

3
projects/ng-openlayers/ngcc.config.js
View File

@ -1,3 +0,0 @@
module.exports = {
ignorableDeepImportMatchers: [/ol\//],
};

33
projects/ng-openlayers/package-lock.json generated
View File

@ -1,33 +0,0 @@
{
"name": "ng-openlayers",
"version": "17.1.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "ng-openlayers",
"version": "17.1.3",
"license": "MPL-2.0",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"ol": "^8.2.0"
}
},
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
}
},
"dependencies": {
"tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
}
}
}

38
projects/ng-openlayers/package.json
View File

@ -1,38 +0,0 @@
{
"name": "ng-openlayers",
"version": "17.1.3",
"description": "OpenLayers library for Angular",
"author": "Kamil Furtak (kamil.furtak@gmail.com)",
"publishConfig": {
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"bugs": {
"url": "https://github.com/kamilfurtak/ng-openlayers/issues"
},
"homepage": "https://github.com/kamilfurtak/ng-openlayers",
"keywords": [
"ngx-openlayers",
"angular",
"angular17",
"openlayers",
"openlayers8",
"ol8"
],
"license": "MPL-2.0",
"private": false,
"scripts": {
"release": "standard-version -m \"chore(release): version %s\" -t \"\"",
"prepublishOnly": "cp projects/ng-openlayers/README.md dist/ng-openlayers/README.md"
},
"standard-version": {
"postchangelog": "cp projects/ng-openlayers/CHANGELOG.md dist/ng-openlayers/CHANGELOG.md"
},
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"ol": "^8.2.0"
}
}

38
projects/ng-openlayers/project.json
View File

@ -1,38 +0,0 @@
{
"name": "ng-openlayers",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
"sourceRoot": "libs/ng-openlayers/src",
"prefix": "lib",
"targets": {
"build": {
"executor": "@nx/angular:package",
"options": {
"tsConfig": "libs/ng-openlayers/tsconfig.lib.json",
"project": "libs/ng-openlayers/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "libs/ng-openlayers/tsconfig.lib.prod.json"
}
}
},
"test": {
"executor": "@angular-devkit/build-angular:karma",
"options": {
"main": "libs/ng-openlayers/src/test.ts",
"tsConfig": "libs/ng-openlayers/tsconfig.spec.json",
"karmaConfig": "libs/ng-openlayers/karma.conf.js"
}
},
"lint": {
"executor": "@nx/eslint:lint",
"options": {
"lintFilePatterns": [
"libs/ng-openlayers/**/*.ts",
"libs/ng-openlayers/**/*.html"
]
}
}
}
}

15
projects/ng-openlayers/src/lib/attribution.component.ts
View File

@ -1,15 +0,0 @@
import { Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector: 'aol-attribution',
template: '<ng-content></ng-content>',
})
export class AttributionComponent implements OnInit {
label: string;
constructor(private elementRef: ElementRef) {}
ngOnInit() {
this.label = this.elementRef.nativeElement.innerHTML;
}
}

25
projects/ng-openlayers/src/lib/attributions.component.ts
View File

@ -1,25 +0,0 @@
import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
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 {
@ContentChildren(AttributionComponent)
attributions: QueryList<AttributionComponent>;
instance: Array<string>;
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.label);
// console.log('setting attributions:', this.instance);
this.source.instance.setAttributions(this.instance);
}
}
}

89
projects/ng-openlayers/src/lib/collectioncoordinates.component.ts
View File

@ -1,89 +0,0 @@
import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
import { MapComponent } from './map.component';
import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
import { Coordinate } from 'ol/coordinate';
import { transform } from 'ol/proj';
@Component({
selector: 'aol-collection-coordinates',
template: ` <div class="aol-collection-coordinates"></div> `,
})
export class CollectionCoordinatesComponent implements OnChanges, OnInit {
@Input()
coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
@Input()
srid = 'EPSG:3857';
private host: any;
private mapSrid = 'EPSG:3857';
constructor(
private map: MapComponent,
@Optional() geometryLinestring: GeometryLinestringComponent,
@Optional() geometryPolygon: GeometryPolygonComponent,
@Optional() geometryMultipoint: GeometryMultiPointComponent,
@Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
@Optional() geometryMultipolygon: GeometryMultiPolygonComponent
) {
if (!!geometryLinestring) {
this.host = geometryLinestring;
} else if (!!geometryPolygon) {
this.host = geometryPolygon;
} else if (!!geometryMultipoint) {
this.host = geometryMultipoint;
} else if (!!geometryMultilinestring) {
this.host = geometryMultilinestring;
} else if (!!geometryMultipolygon) {
this.host = geometryMultipolygon;
} else {
throw new Error('aol-collection-coordinates must be a child of a geometry component');
}
}
ngOnInit() {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
this.transformCoordinates();
}
private onMapViewChanged(event) {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
if (this.srid === this.mapSrid) {
transformedCoordinates = this.coordinates;
} else {
switch (this.host.componentType) {
case 'geometry-linestring':
case 'geometry-multipoint':
transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
break;
case 'geometry-polygon':
case 'geometry-multilinestring':
transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
cc.map((c) => transform(c, this.srid, this.mapSrid))
);
break;
case 'geometry-multipolygon':
transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
);
break;
}
}
this.host.instance.setCoordinates(transformedCoordinates);
}
}

9
projects/ng-openlayers/src/lib/content.component.ts
View File

@ -1,9 +0,0 @@
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'aol-content',
template: '<ng-content></ng-content>',
})
export class ContentComponent {
constructor(public elementRef: ElementRef) {}
}

33
projects/ng-openlayers/src/lib/controls/attribution.component.ts
View File

@ -1,33 +0,0 @@
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Attribution } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-attribution',
template: ``,
})
export class ControlAttributionComponent implements OnInit, OnDestroy {
@Input()
collapsible: boolean;
public componentType = 'control';
instance: Attribution;
target: HTMLElement;
constructor(
private map: MapComponent,
private element: ElementRef
) {}
ngOnInit() {
this.target = this.element.nativeElement;
// console.log('ol.control.Attribution init: ', this);
this.instance = new Attribution(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-attribution');
this.map.instance.removeControl(this.instance);
}
}

33
projects/ng-openlayers/src/lib/controls/control.component.ts
View File

@ -1,33 +0,0 @@
import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
import { Control } from 'ol/control';
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 {
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
public componentType = 'control';
instance: Control;
element: HTMLElement;
constructor(private map: MapComponent) {}
ngOnInit() {
if (this.content) {
this.element = this.content.elementRef.nativeElement;
this.instance = new Control(this);
this.map.instance.addControl(this.instance);
}
}
ngOnDestroy() {
if (this.instance) {
this.map.instance.removeControl(this.instance);
}
}
}

42
projects/ng-openlayers/src/lib/controls/default.component.ts
View File

@ -1,42 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Control, defaults } from 'ol/control';
import { Collection } from 'ol';
import { Options as AttributionOptions } from 'ol/control/Attribution';
import { Options as RotateOptions } from 'ol/control/Rotate';
import { Options as ZoomOptions } from 'ol/control/Zoom';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-defaults',
template: '',
})
export class DefaultControlComponent implements OnInit, OnDestroy {
@Input()
attribution: boolean;
@Input()
attributionOptions: AttributionOptions;
@Input()
rotate: boolean;
@Input()
rotateOptions: RotateOptions;
@Input()
zoom: boolean;
@Input()
zoomOptions: ZoomOptions;
instance: Collection<Control>;
constructor(private map: MapComponent) {}
ngOnInit() {
// console.log('ol.control.defaults init: ', this);
this.instance = defaults(this);
this.instance.forEach((c) => this.map.instance.addControl(c));
}
ngOnDestroy() {
// console.log('removing aol-control-defaults');
this.instance.forEach((c) => this.map.instance.removeControl(c));
}
}

36
projects/ng-openlayers/src/lib/controls/fullscreen.component.ts
View File

@ -1,36 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { FullScreen } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-fullscreen',
template: ` <ng-content></ng-content> `,
})
export class ControlFullScreenComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
label: string;
@Input()
labelActive: string;
@Input()
tipLabel: string;
@Input()
keys: boolean;
instance: FullScreen;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-fullscreen');
}
ngOnInit() {
this.instance = new FullScreen(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-fullscreen');
this.map.instance.removeControl(this.instance);
}
}

36
projects/ng-openlayers/src/lib/controls/mouseposition.component.ts
View File

@ -1,36 +0,0 @@
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import MousePosition from 'ol/control/MousePosition';
import { MapComponent } from '../map.component';
import { CoordinateFormat } from 'ol/coordinate';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-control-mouseposition',
template: ``,
})
export class ControlMousePositionComponent implements OnInit, OnDestroy {
@Input()
coordinateFormat: CoordinateFormat;
@Input()
projection: ProjectionLike;
instance: MousePosition;
target: HTMLElement;
constructor(
private map: MapComponent,
private element: ElementRef
) {}
ngOnInit() {
this.target = this.element.nativeElement;
// console.log('ol.control.MousePosition init: ', this);
this.instance = new MousePosition(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-mouseposition');
this.map.instance.removeControl(this.instance);
}
}

53
projects/ng-openlayers/src/lib/controls/overviewmap.component.ts
View File

@ -1,53 +0,0 @@
import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Layer } from 'ol/layer';
import { View } from 'ol';
import { OverviewMap } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-overviewmap',
template: ` <ng-content></ng-content> `,
})
export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
@Input()
collapsed: boolean;
@Input()
collapseLabel: string;
@Input()
collapsible: boolean;
@Input()
label: string;
@Input()
layers: Layer[];
@Input()
target: HTMLElement;
@Input()
tipLabel: string;
@Input()
view: View;
instance: OverviewMap;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
this.map.instance.removeControl(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance != null && changes.hasOwnProperty('view')) {
this.reloadInstance();
}
}
private reloadInstance() {
this.map.instance.removeControl(this.instance);
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);
}
}

36
projects/ng-openlayers/src/lib/controls/rotate.component.ts
View File

@ -1,36 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Rotate } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-rotate',
template: ` <ng-content></ng-content> `,
})
export class ControlRotateComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
label: string;
@Input()
tipLabel: string;
@Input()
duration: number;
@Input()
autoHide: boolean;
instance: Rotate;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-rotate');
}
ngOnInit() {
this.instance = new Rotate(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-rotate');
this.map.instance.removeControl(this.instance);
}
}

26
projects/ng-openlayers/src/lib/controls/scaleline.component.ts
View File

@ -1,26 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ScaleLine } from 'ol/control';
import { MapComponent } from '../map.component';
import { Units } from 'ol/control/ScaleLine';
@Component({
selector: 'aol-control-scaleline',
template: ` <ng-content></ng-content> `,
})
export class ControlScaleLineComponent implements OnInit, OnDestroy {
@Input()
units: Units;
instance: ScaleLine;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new ScaleLine(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
this.map.instance.removeControl(this.instance);
}
}

38
projects/ng-openlayers/src/lib/controls/zoom.component.ts
View File

@ -1,38 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Zoom } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoom',
template: ` <ng-content></ng-content> `,
})
export class ControlZoomComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
zoomInLabel: string | HTMLElement;
@Input()
zoomOutLabel: string | HTMLElement;
@Input()
zoomInTipLabel: string;
@Input()
zoomOutTipLabel: string;
@Input()
delta: number;
instance: Zoom;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoom');
}
ngOnInit() {
this.instance = new Zoom(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-zoom');
this.map.instance.removeControl(this.instance);
}
}

34
projects/ng-openlayers/src/lib/controls/zoomslider.component.ts
View File

@ -1,34 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ZoomSlider } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoomslider',
template: ` <ng-content></ng-content> `,
})
export class ControlZoomSliderComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
duration: number;
@Input()
maxResolution: number;
@Input()
minResolution: number;
instance: ZoomSlider;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomslider');
}
ngOnInit() {
this.instance = new ZoomSlider(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-zoomslider');
this.map.instance.removeControl(this.instance);
}
}

35
projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts
View File

@ -1,35 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { ZoomToExtent } from 'ol/control';
import { MapComponent } from '../map.component';
import { Extent } from 'ol/extent';
@Component({
selector: 'aol-control-zoomtoextent',
template: ` <ng-content></ng-content> `,
})
export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
label: string | HTMLElement;
@Input()
tipLabel: string;
@Input()
extent: Extent;
instance: ZoomToExtent;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomtoextent');
}
ngOnInit() {
this.instance = new ZoomToExtent(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
// console.log('removing aol-control-zoomtoextent');
this.map.instance.removeControl(this.instance);
}
}

80
projects/ng-openlayers/src/lib/coordinate.component.ts
View File

@ -1,80 +0,0 @@
import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
import { transform } from 'ol/proj';
import { MapComponent } from './map.component';
import { GeometryPointComponent } from './geom/geometrypoint.component';
import { GeometryCircleComponent } from './geom/geometrycircle.component';
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, OnInit {
@Input()
x: number;
@Input()
y: number;
@Input()
srid = 'EPSG:3857';
private host: any;
private mapSrid = 'EPSG:3857';
constructor(
private map: MapComponent,
@Optional() viewHost: ViewComponent,
@Optional() geometryPointHost: GeometryPointComponent,
@Optional() geometryCircleHost: GeometryCircleComponent,
@Optional() overlayHost: OverlayComponent
) {
// console.log('instancing aol-coordinate');
if (geometryPointHost !== null) {
this.host = geometryPointHost;
} else if (geometryCircleHost !== null) {
this.host = geometryCircleHost;
} else if (viewHost !== null) {
this.host = viewHost;
} else if (overlayHost !== null) {
this.host = overlayHost;
}
}
ngOnInit() {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
this.transformCoordinates();
}
private onMapViewChanged(event) {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
let transformedCoordinates: number[];
if (this.srid === this.mapSrid) {
transformedCoordinates = [this.x, this.y];
} else {
transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
}
switch (this.host.componentType) {
case 'geometry-point':
this.host.instance.setCoordinates(transformedCoordinates);
break;
case 'geometry-circle':
case 'view':
this.host.instance.setCenter(transformedCoordinates);
break;
case 'overlay':
this.host.instance.setPosition(transformedCoordinates);
break;
}
}
}

35
projects/ng-openlayers/src/lib/feature.component.ts
View File

@ -1,35 +0,0 @@
import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
import { Feature } from 'ol';
import { SourceVectorComponent } from './sources/vector.component';
@Component({
selector: 'aol-feature',
template: ` <ng-content></ng-content> `,
})
export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
@Input()
id: string | number | undefined;
public componentType = 'feature';
public instance: Feature;
constructor(private host: SourceVectorComponent) {}
ngOnInit() {
this.instance = new Feature();
if (this.id !== undefined) {
this.instance.setId(this.id);
}
this.host.instance.addFeature(this.instance);
}
ngOnDestroy() {
this.host.instance.removeFeature(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance) {
this.instance.setId(this.id);
}
}
}

6
projects/ng-openlayers/src/lib/formats/format.component.ts
View File

@ -1,6 +0,0 @@
import Feature from 'ol/format/Feature';
export class FormatComponent {
public instance: Feature;
public componentType = 'format';
}

27
projects/ng-openlayers/src/lib/formats/mvt.component.ts
View File

@ -1,27 +0,0 @@
import { Component, forwardRef, Input } from '@angular/core';
import { FormatComponent } from './format.component';
import { MVT } from 'ol/format';
import { FeatureClass } from 'ol/Feature';
@Component({
selector: 'aol-format-mvt',
template: '',
providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
})
export class FormatMVTComponent extends FormatComponent {
@Input()
featureClass: FeatureClass;
@Input()
geometryName: string;
@Input()
layerName: string;
@Input()
layers: string[];
instance: MVT;
constructor() {
super();
this.instance = new MVT(this);
}
}

28
projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts
View File

@ -1,28 +0,0 @@
import { Component, Input, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Circle } from 'ol/geom';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-geometry-circle',
template: ` <ng-content></ng-content> `,
})
export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
@Input()
get radius(): number {
return this.instance.getRadius();
}
set radius(radius: number) {
this.instance.setRadius(radius);
}
public componentType = 'geometry-circle';
public instance: Circle;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
// defaulting coordinates to [0,0]. To be overridden in child component.
this.instance = new Circle([0, 0]);
}
}

26
projects/ng-openlayers/src/lib/geom/geometrylinestring.component.ts
View File

@ -1,26 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { LineString } from 'ol/geom';
@Component({
selector: 'aol-geometry-linestring',
template: ` <ng-content></ng-content> `,
})
export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-linestring';
public instance: LineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new LineString([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
}

28
projects/ng-openlayers/src/lib/geom/geometrymultilinestring.component.ts
View File

@ -1,28 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiLineString } from 'ol/geom';
@Component({
selector: 'aol-geometry-multilinestring',
template: ` <ng-content></ng-content> `,
})
export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-multilinestring';
public instance: MultiLineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiLineString([
[
[0, 0],
[1, 1],
],
]);
super.ngOnInit();
}
}

26
projects/ng-openlayers/src/lib/geom/geometrymultipoint.component.ts
View File

@ -1,26 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiPoint } from 'ol/geom';
@Component({
selector: 'aol-geometry-multipoint',
template: ` <ng-content></ng-content> `,
})
export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-multipoint';
public instance: MultiPoint;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPoint([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
}

31
projects/ng-openlayers/src/lib/geom/geometrymultipolygon.component.ts
View File

@ -1,31 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { MultiPolygon } from 'ol/geom';
@Component({
selector: 'aol-geometry-multipolygon',
template: ` <ng-content></ng-content> `,
})
export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-multipolygon';
public instance: MultiPolygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPolygon([
[
[
[0, 0],
[1, 1],
[0, 1],
],
],
]);
super.ngOnInit();
}
}

23
projects/ng-openlayers/src/lib/geom/geometrypoint.component.ts
View File

@ -1,23 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { Point } from 'ol/geom';
@Component({
selector: 'aol-geometry-point',
template: ` <ng-content></ng-content> `,
})
export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-point';
public instance: Point;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Point([0, 0]);
super.ngOnInit();
}
}

29
projects/ng-openlayers/src/lib/geom/geometrypolygon.component.ts
View File

@ -1,29 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { SimpleGeometryComponent } from './simplegeometry.component';
import { MapComponent } from '../map.component';
import { Polygon } from 'ol/geom';
@Component({
selector: 'aol-geometry-polygon',
template: ` <ng-content></ng-content> `,
})
export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
public componentType = 'geometry-polygon';
public instance: Polygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Polygon([
[
[0, 0],
[1, 1],
[0, 1],
],
]);
super.ngOnInit();
}
}

22
projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts
View File

@ -1,22 +0,0 @@
import { Input, OnInit, Directive } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { MapComponent } from '../map.component';
import SimpleGeometry from 'ol/geom/SimpleGeometry';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class SimpleGeometryComponent implements OnInit {
@Input() srid: string;
public instance: SimpleGeometry;
public componentType = 'simple-geometry';
protected constructor(
protected map: MapComponent,
protected host: FeatureComponent
) {}
ngOnInit() {
this.host.instance.setGeometry(this.instance);
}
}

57
projects/ng-openlayers/src/lib/graticule.component.ts
View File

@ -1,57 +0,0 @@
import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { Graticule } from 'ol';
import { Stroke } from 'ol/style';
import { MapComponent } from './map.component';
@Component({
selector: 'aol-graticule',
template: '<ng-content></ng-content>',
})
export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
@Input()
strokeStyle: Stroke;
@Input()
showLabels: boolean;
@Input()
lonLabelPosition: number;
@Input()
latLabelPosition: number;
instance: any;
public componentType = 'graticule';
constructor(private map: MapComponent) {}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
}
if (properties) {
this.instance = new Graticule(properties);
}
this.instance.setMap(this.map.instance);
}
ngAfterContentInit(): void {
this.instance = new Graticule({
strokeStyle: this.strokeStyle,
showLabels: this.showLabels,
lonLabelPosition: this.lonLabelPosition,
latLabelPosition: this.latLabelPosition,
});
this.instance.setMap(this.map.instance);
}
ngOnDestroy(): void {
this.instance.setMap(null);
}
}

46
projects/ng-openlayers/src/lib/interactions/default.component.ts
View File

@ -1,46 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { defaults, Interaction } from 'ol/interaction';
import { Collection } from 'ol';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-default',
template: '',
})
export class DefaultInteractionComponent implements OnInit, OnDestroy {
@Input()
altShiftDragRotate: boolean;
@Input()
onFocusOnly: boolean;
@Input()
doubleClickZoom: boolean;
@Input()
keyboard: boolean;
@Input()
mouseWheelZoom: boolean;
@Input()
shiftDragZoom: boolean;
@Input()
dragPan: boolean;
@Input()
pinchRotate: boolean;
@Input()
pinchZoom: boolean;
@Input()
zoomDelta: number;
@Input()
zoomDuration: number;
instance: Collection<Interaction>;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = defaults(this);
this.instance.forEach((i) => this.map.instance.addInteraction(i));
}
ngOnDestroy() {
this.instance.forEach((i) => this.map.instance.removeInteraction(i));
}
}

27
projects/ng-openlayers/src/lib/interactions/doubleclickzoom.component.ts
View File

@ -1,27 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { DoubleClickZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-doubleclickzoom',
template: '',
})
export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
delta: number;
instance: DoubleClickZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DoubleClickZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

31
projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts
View File

@ -1,31 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { DragAndDrop } from 'ol/interaction';
import FeatureFormat from 'ol/format/Feature';
import { MapComponent } from '../map.component';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-interaction-draganddrop',
template: '',
})
export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
@Input()
formatConstructors: FeatureFormat[];
@Input()
projection: ProjectionLike;
@Input()
target: HTMLElement;
instance: DragAndDrop;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragAndDrop(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

31
projects/ng-openlayers/src/lib/interactions/dragbox.component.ts
View File

@ -1,31 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragBox } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
import { EndCondition } from 'ol/interaction/DragBox';
@Component({
selector: 'aol-interaction-dragbox',
template: '',
})
export class DragBoxInteractionComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
condition: Condition;
@Input()
boxEndCondition: EndCondition;
instance: DragBox;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragBox(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

29
projects/ng-openlayers/src/lib/interactions/dragpan.component.ts
View File

@ -1,29 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragPan } from 'ol/interaction';
import Kinetic from 'ol/Kinetic';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragpan',
template: '',
})
export class DragPanInteractionComponent implements OnInit, OnDestroy {
@Input()
condition: Condition;
@Input()
kinetic: Kinetic;
instance: DragPan;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragPan(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

28
projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts
View File

@ -1,28 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragRotate } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotate',
template: '',
})
export class DragRotateInteractionComponent implements OnInit, OnDestroy {
@Input()
condition: Condition;
@Input()
duration: number;
instance: DragRotate;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragRotate(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

28
projects/ng-openlayers/src/lib/interactions/dragrotateandzoom.component.ts
View File

@ -1,28 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragRotateAndZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotateandzoom',
template: '',
})
export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
condition: Condition;
@Input()
duration: number;
instance: DragRotateAndZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragRotateAndZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

32
projects/ng-openlayers/src/lib/interactions/dragzoom.component.ts
View File

@ -1,32 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragzoom',
template: '',
})
export class DragZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
className: string;
@Input()
condition: Condition;
@Input()
duration: number;
@Input()
out: boolean;
instance: DragZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new DragZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

84
projects/ng-openlayers/src/lib/interactions/draw.component.ts
View File

@ -1,84 +0,0 @@
import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
import { MapComponent } from '../map.component';
import { Draw } from 'ol/interaction';
import { Collection, Feature } from 'ol';
import { Vector } from 'ol/source';
import { Style } from 'ol/style';
import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { Type } from 'ol/geom/Geometry';
import { ObjectEvent } from 'ol/Object';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-interaction-draw',
template: '',
})
export class DrawInteractionComponent implements OnInit, OnDestroy {
@Input()
clickTolerance?: number;
@Input()
features?: Collection<Feature>;
@Input()
source?: Vector;
@Input()
snapTolerance?: number;
@Input()
type: Type;
@Input()
maxPoints?: number;
@Input()
minPoints?: number;
@Input()
finishCondition?: Condition;
@Input()
style?: Style | Style[] | StyleFunction;
@Input()
geometryFunction?: GeometryFunction;
@Input()
geometryName?: string;
@Input()
condition?: Condition;
@Input()
freehandCondition?: Condition;
@Input()
freehand?: boolean;
@Input()
wrapX?: boolean;
@Output()
olChange = new EventEmitter<DrawEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olDrawAbort = new EventEmitter<DrawEvent>();
@Output()
drawEnd = new EventEmitter<DrawEvent>();
@Output()
drawStart = new EventEmitter<DrawEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
instance: Draw;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new Draw(this);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('drawabort', (event: DrawEvent) => this.olDrawAbort.emit(event));
this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

27
projects/ng-openlayers/src/lib/interactions/keyboardpan.component.ts
View File

@ -1,27 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { KeyboardPan } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-keyboardpan',
template: '',
})
export class KeyboardPanInteractionComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
pixelDelta: number;
instance: KeyboardPan;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new KeyboardPan(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

27
projects/ng-openlayers/src/lib/interactions/keyboardzoom.component.ts
View File

@ -1,27 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { KeyboardZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-keyboardpan',
template: '',
})
export class KeyboardZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
delta: number;
instance: KeyboardZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new KeyboardZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

65
projects/ng-openlayers/src/lib/interactions/modify.component.ts
View File

@ -1,65 +0,0 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Modify } from 'ol/interaction';
import { Collection, Feature } from 'ol';
import { Style } from 'ol/style';
import { Vector } from 'ol/source';
import { ModifyEvent } from 'ol/interaction/Modify';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { ObjectEvent } from 'ol/Object';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-interaction-modify',
template: '',
})
export class ModifyInteractionComponent implements OnInit, OnDestroy {
@Input()
condition?: Condition;
@Input()
deleteCondition?: Condition;
@Input()
pixelTolerance?: number;
@Input()
style?: Style | Style[] | StyleFunction;
@Input()
features: Collection<Feature>;
@Input()
wrapX?: boolean;
@Input()
source?: Vector;
@Output()
olChange = new EventEmitter<DrawEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
olModifyEnd = new EventEmitter<ModifyEvent>();
@Output()
olModifyStart = new EventEmitter<ModifyEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
instance: Modify;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new Modify(this);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('modifyend', (event: ModifyEvent) => this.olModifyEnd.emit(event));
this.instance.on('modifystart', (event: ModifyEvent) => this.olModifyStart.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

29
projects/ng-openlayers/src/lib/interactions/mousewheelzoom.component.ts
View File

@ -1,29 +0,0 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { MouseWheelZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-mousewheelzoom',
template: '',
})
export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
timeout: number;
@Input()
useAnchor: boolean;
instance: MouseWheelZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new MouseWheelZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

27
projects/ng-openlayers/src/lib/interactions/pinchzoom.component.ts
View File

@ -1,27 +0,0 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { PinchZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-pinchzoom',
template: '',
})
export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
@Input()
duration: number;
@Input()
constrainResolution: boolean;
instance: PinchZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new PinchZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

68
projects/ng-openlayers/src/lib/interactions/select.component.ts
View File

@ -1,68 +0,0 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Select } from 'ol/interaction';
import { Layer } from 'ol/layer';
import { Style } from 'ol/style';
import { Collection, Feature } from 'ol';
import { SelectEvent, FilterFunction } from 'ol/interaction/Select';
import { StyleFunction } from 'ol/style/Style';
import { Condition } from 'ol/events/condition';
import { ObjectEvent } from 'ol/Object';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-interaction-select',
template: '',
})
export class SelectInteractionComponent implements OnInit, OnDestroy {
@Input()
addCondition?: Condition;
@Input()
condition?: Condition;
@Input()
layers?: Layer[] | ((layer: Layer) => boolean);
@Input()
style?: Style | Style[] | StyleFunction;
@Input()
removeCondition?: Condition;
@Input()
toggleCondition?: Condition;
@Input()
multi?: boolean;
@Input()
features?: Collection<Feature>;
@Input()
filter?: FilterFunction;
@Input()
wrapX?: boolean;
@Output()
olChange = new EventEmitter<SelectEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
olSelect = new EventEmitter<SelectEvent>();
instance: Select;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new Select(this);
this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

58
projects/ng-openlayers/src/lib/interactions/translate.component.ts
View File

@ -1,58 +0,0 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Translate } from 'ol/interaction';
import { Collection, Feature } from 'ol';
import { Layer } from 'ol/layer';
import { TranslateEvent } from 'ol/interaction/Translate';
import { MapComponent } from '../map.component';
import BaseEvent from 'ol/events/Event';
import { ObjectEvent } from 'ol/Object';
@Component({
selector: 'aol-interaction-translate',
template: '',
})
export class TranslateInteractionComponent implements OnInit, OnDestroy {
@Input()
features?: Collection<Feature>;
@Input()
layers?: Layer[] | ((layer: Layer) => boolean);
@Input()
hitTolerance?: number;
@Output()
olChange = new EventEmitter<BaseEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
translateEnd = new EventEmitter<TranslateEvent>();
@Output()
translateStart = new EventEmitter<TranslateEvent>();
@Output()
translating = new EventEmitter<TranslateEvent>();
instance: Translate;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = new Translate(this);
this.instance.on('change', (event: BaseEvent) => this.olChange.emit(event));
this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
this.map.instance.removeInteraction(this.instance);
}
}

68
projects/ng-openlayers/src/lib/layers/layer.component.ts
View File

@ -1,68 +0,0 @@
import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
import Event from 'ol/events/Event';
import { MapComponent } from '../map.component';
import { LayerGroupComponent } from './layergroup.component';
import { Extent } from 'ol/extent';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
@Input()
opacity: number;
@Input()
visible: boolean;
@Input()
extent: Extent;
@Input()
zIndex: number;
@Input()
minResolution: number;
@Input()
maxResolution: number;
@Input()
prerender: (evt: Event) => void;
@Input()
postrender: (evt: Event) => void;
public instance: any;
public componentType = 'layer';
protected constructor(protected host: MapComponent | LayerGroupComponent) {}
ngOnInit() {
if (this.prerender !== null && this.prerender !== undefined) {
this.instance.on('prerender', this.prerender);
}
if (this.postrender !== null && this.postrender !== undefined) {
this.instance.on('postrender', this.postrender);
}
this.host.instance.getLayers().push(this.instance);
}
ngOnDestroy() {
this.host.instance.getLayers().remove(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
if (key === 'prerender') {
this.instance.un('prerender', changes[key].previousValue);
this.instance.on('prerender', changes[key].currentValue);
}
if (key === 'postrender') {
this.instance.un('postrender', changes[key].previousValue);
this.instance.on('postrender', changes[key].currentValue);
}
}
}
// console.log('changes detected in aol-layer, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}
}

27
projects/ng-openlayers/src/lib/layers/layergroup.component.ts
View File

@ -1,27 +0,0 @@
import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
import { Group } from 'ol/layer';
import { LayerComponent } from './layer.component';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-layer-group',
template: ` <ng-content></ng-content> `,
})
export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
public instance: Group;
constructor(
map: MapComponent,
@SkipSelf()
@Optional()
group?: LayerGroupComponent
) {
super(group || map);
}
ngOnInit() {
// console.log(`creating ol.layer.Group instance with:`, this);
this.instance = new Group(this);
super.ngOnInit();
}
}

38
projects/ng-openlayers/src/lib/layers/layerimage.component.ts
View File

@ -1,38 +0,0 @@
import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
import { Image } from 'ol/layer';
import { MapComponent } from '../map.component';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { Extent } from 'ol/extent';
@Component({
selector: 'aol-layer-image',
template: ` <ng-content></ng-content> `,
})
export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
@Input()
opacity: number;
@Input()
visible: boolean;
@Input()
extent: Extent;
@Input()
minResolution: number;
@Input()
maxResolution: number;
@Input()
zIndex: number;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
this.instance = new Image(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

30
projects/ng-openlayers/src/lib/layers/layertile.component.ts
View File

@ -1,30 +0,0 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { Tile } from 'ol/layer';
import { MapComponent } from '../map.component';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
@Component({
selector: 'aol-layer-tile',
template: ` <ng-content></ng-content> `,
})
export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
@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 Tile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

39
projects/ng-openlayers/src/lib/layers/layervector.component.ts
View File

@ -1,39 +0,0 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { MapComponent } from '../map.component';
import { Vector } from 'ol/layer';
import { Style } from 'ol/style';
import { StyleFunction } from 'ol/style/Style';
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 {
@Input()
renderBuffer: number;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
updateWhileAnimating: boolean;
@Input()
updateWhileInteracting: boolean;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
// console.log('creating ol.layer.Vector instance with:', this);
this.instance = new Vector(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

44
projects/ng-openlayers/src/lib/layers/layervectortile.component.ts
View File

@ -1,44 +0,0 @@
import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
import { VectorTile } from 'ol/layer';
import { Feature } from 'ol';
import { Style } from 'ol/style';
import { MapComponent } from '../map.component';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { StyleFunction } from 'ol/style/Style';
@Component({
selector: 'aol-layer-vectortile',
template: ` <ng-content></ng-content> `,
})
export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
@Input()
renderBuffer: number;
@Input()
renderMode: any | string;
/* not marked as optional in the typings */
@Input()
renderOrder: (feature1: Feature, feature2: Feature) => number;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
updateWhileAnimating: boolean;
@Input()
updateWhileInteracting: boolean;
@Input()
visible: boolean;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
// console.log('creating ol.layer.VectorTile instance with:', this);
this.instance = new VectorTile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

142
projects/ng-openlayers/src/lib/map.component.ts
View File

@ -1,142 +0,0 @@
import {
Component,
OnInit,
ElementRef,
Input,
Output,
EventEmitter,
AfterViewInit,
SimpleChanges,
OnChanges,
} from '@angular/core';
import { Map } from 'ol';
import MapBrowserEvent from 'ol/MapBrowserEvent';
import MapEvent from 'ol/MapEvent';
import { ObjectEvent } from 'ol/Object';
import RenderEvent from 'ol/render/Event';
import { Control } from 'ol/control';
import { Interaction } from 'ol/interaction';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-map',
template: `
<div [style.width]="width" [style.height]="height"></div>
<ng-content></ng-content>
`,
})
export class MapComponent implements OnInit, AfterViewInit, OnChanges {
@Input()
width = '100%';
@Input()
height = '100%';
@Input()
pixelRatio: number;
@Input()
keyboardEventTarget: HTMLElement | string;
@Input()
loadTilesWhileAnimating: boolean;
@Input()
loadTilesWhileInteracting: boolean;
@Input()
logo: string | boolean;
@Input()
renderer: 'canvas' | 'webgl';
@Output()
olChange = new EventEmitter<DrawEvent>();
@Output()
olChangeLayerGroup = new EventEmitter<ObjectEvent>();
@Output()
olChangeSize = new EventEmitter<ObjectEvent>();
@Output()
olChangeTarget = new EventEmitter<ObjectEvent>();
@Output()
olChangeView = new EventEmitter<ObjectEvent>();
@Output()
olClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
dblClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
loadEnd = new EventEmitter<MapEvent>();
@Output()
loadStart = new EventEmitter<MapEvent>();
@Output()
moveEnd = new EventEmitter<MapEvent>();
@Output()
moveStart = new EventEmitter<MapEvent>();
@Output()
pointerDrag = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
pointerMove = new EventEmitter<MapBrowserEvent<MouseEvent>>();
@Output()
olPostCompose = new EventEmitter<RenderEvent>();
@Output()
olPostRender = new EventEmitter<RenderEvent>();
@Output()
olPreCompose = new EventEmitter<RenderEvent>();
@Output()
olPropertyChange = new EventEmitter<ObjectEvent>();
@Output()
postRender = new EventEmitter<MapEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
singleClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
public instance: Map;
public componentType = 'map';
// we pass empty arrays to not get default controls/interactions because we have our own directives
controls: Control[] = [];
interactions: Interaction[] = [];
constructor(private host: ElementRef) {}
ngOnInit() {
// console.log('creating ol.Map instance with:', this);
this.instance = new Map(this);
this.instance.setTarget(this.host.nativeElement.firstElementChild);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:layergroup', (event: ObjectEvent) => this.olChangeLayerGroup.emit(event));
this.instance.on('change:size', (event: ObjectEvent) => this.olChangeSize.emit(event));
this.instance.on('change:target', (event: ObjectEvent) => this.olChangeTarget.emit(event));
this.instance.on('change:view', (event: ObjectEvent) => this.olChangeView.emit(event));
this.instance.on('click', (event: MapBrowserEvent<MouseEvent>) => this.olClick.emit(event));
this.instance.on('dblclick', (event: MapBrowserEvent<MouseEvent>) => this.dblClick.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('loadend', (event: MapEvent) => this.loadEnd.emit(event));
this.instance.on('loadstart', (event: MapEvent) => this.loadStart.emit(event));
this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
this.instance.on('pointerdrag', (event: MapBrowserEvent<MouseEvent>) => this.pointerDrag.emit(event));
this.instance.on('pointermove', (event: MapBrowserEvent<MouseEvent>) => this.pointerMove.emit(event));
this.instance.on('postcompose', (event: RenderEvent) => this.olPostCompose.emit(event));
this.instance.on('postrender', (event: RenderEvent) => this.olPostRender.emit(event));
this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
this.instance.on('precompose', (event: RenderEvent) => this.olPreCompose.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.olPropertyChange.emit(event));
this.instance.on('singleclick', (event: MapBrowserEvent<MouseEvent>) => this.singleClick.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
}
// console.log('changes detected in aol-map, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}
ngAfterViewInit() {
this.instance.updateSize();
}
}

50
projects/ng-openlayers/src/lib/overlay.component.ts
View File

@ -1,50 +0,0 @@
import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
import { MapComponent } from './map.component';
import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
import { ContentComponent } from './content.component';
@Component({
selector: 'aol-overlay',
template: '<ng-content></ng-content>',
})
export class OverlayComponent implements OnInit, OnDestroy {
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
@Input()
id: number | string;
@Input()
offset: number[];
@Input()
positioning: Positioning;
@Input()
stopEvent: boolean;
@Input()
insertFirst: boolean;
@Input()
autoPan: boolean;
@Input()
autoPanAnimation: PanOptions;
@Input()
autoPanMargin: number;
componentType = 'overlay';
instance: Overlay;
element: HTMLElement;
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);
}
}
}

42
projects/ng-openlayers/src/lib/sources/bingmaps.component.ts
View File

@ -1,42 +0,0 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { BingMaps } from 'ol/source';
import { SourceComponent } from './source.component';
import { LayerTileComponent } from '../layers/layertile.component';
import { LoadFunction } from 'ol/Tile';
@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 {
@Input()
cacheSize: number;
@Input()
hidpi: boolean;
@Input()
culture: string;
@Input()
key: string;
@Input()
imagerySet: 'Road' | 'Aerial' | 'AerialWithLabels' | 'collinsBart' | 'ordnanceSurvey' = 'Aerial';
@Input()
maxZoom: number;
@Input()
reprojectionErrorThreshold: number;
@Input()
tileLoadFunction: LoadFunction;
@Input()
wrapX: boolean;
instance: BingMaps;
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
this.instance = new BingMaps(this);
this.host.instance.setSource(this.instance);
}
}

54
projects/ng-openlayers/src/lib/sources/cluster.component.ts
View File

@ -1,54 +0,0 @@
import {
AfterContentInit,
Component,
ContentChild,
forwardRef,
Host,
Input,
OnChanges,
SimpleChanges,
} from '@angular/core';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Cluster, Vector } from 'ol/source';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import { SourceVectorComponent } from './vector.component';
@Component({
selector: 'aol-source-cluster',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
})
export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges {
@Input()
distance: number;
@Input()
geometryFunction?: (feature: Feature) => Point;
@Input()
wrapX?: boolean;
@ContentChild(SourceVectorComponent, { static: false })
sourceVectorComponent: SourceVectorComponent;
instance: Cluster;
source: Vector;
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngAfterContentInit() {
this.source = this.sourceVectorComponent.instance;
this.instance = new Cluster(this);
this.host.instance.setSource(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance && changes.hasOwnProperty('distance')) {
this.instance.setDistance(this.distance);
}
}
}

36
projects/ng-openlayers/src/lib/sources/geojson.component.ts
View File

@ -1,36 +0,0 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import FeatureFormat from 'ol/format/Feature';
import { Vector } from 'ol/source';
import { GeoJSON } from 'ol/format';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-source-geojson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }],
})
export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
@Input()
defaultDataProjection: ProjectionLike;
@Input()
featureProjection: ProjectionLike;
@Input()
geometryName: string;
@Input()
url: string;
instance: Vector;
format: FeatureFormat;
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit() {
this.format = new GeoJSON(this);
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);
}
}

62
projects/ng-openlayers/src/lib/sources/imagearcgisrest.component.ts
View File

@ -1,62 +0,0 @@
import {
Component,
EventEmitter,
forwardRef,
Host,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import ImageArcGISRest from 'ol/source/ImageArcGISRest';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { AttributionLike } from 'ol/source/Source';
import { LoadFunction } from 'ol/Image';
import { ImageSourceEvent } from 'ol/source/Image';
@Component({
selector: 'aol-source-imagearcgisrest',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
})
export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
@Input() projection: ProjectionLike | string;
@Input() url: string;
@Input() attributions: AttributionLike;
@Input() crossOrigin?: string;
@Input() imageLoadFunction?: LoadFunction;
@Input() params?: { [k: string]: any };
@Input() ratio = 1.5;
@Input() resolutions?: number[];
@Input() wrapX?: boolean;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageArcGISRest;
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
this.instance = new ImageArcGISRest(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}
}
}

88
projects/ng-openlayers/src/lib/sources/imagestatic.component.ts
View File

@ -1,88 +0,0 @@
import {
Component,
Host,
Input,
forwardRef,
Output,
EventEmitter,
OnChanges,
SimpleChanges,
OnInit,
} from '@angular/core';
import { ImageStatic } from 'ol/source';
import { SourceComponent } from './source.component';
import { LayerImageComponent } from '../layers/layerimage.component';
import { ProjectionLike } from 'ol/proj';
import { Extent } from 'ol/extent';
import { AttributionLike } from 'ol/source/Source';
import { LoadFunction } from 'ol/Image';
import { Size } from 'ol/size';
import { ImageSourceEvent } from 'ol/source/Image';
@Component({
selector: 'aol-source-imagestatic',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
})
export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
@Input()
projection: ProjectionLike | string;
@Input()
imageExtent: Extent;
@Input()
url: string;
@Input()
attributions: AttributionLike;
@Input()
crossOrigin?: string;
@Input()
imageLoadFunction?: LoadFunction;
@Input()
imageSize?: Size;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageStatic;
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
setLayerSource(): void {
this.instance = new ImageStatic(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnInit() {
this.setLayerSource();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
}
this.instance.setProperties(properties, false);
}
}

74
projects/ng-openlayers/src/lib/sources/imagewms.component.ts
View File

@ -1,74 +0,0 @@
import {
Component,
Host,
Input,
OnChanges,
OnInit,
forwardRef,
SimpleChanges,
Output,
EventEmitter,
} from '@angular/core';
import { ImageWMS } from 'ol/source';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { AttributionLike } from 'ol/source/Source';
import { LoadFunction } from 'ol/Image';
import { ImageSourceEvent } from 'ol/source/Image';
import { ServerType } from 'ol/source/wms';
@Component({
selector: 'aol-source-imagewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
})
export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
@Input()
attributions: AttributionLike;
@Input()
crossOrigin: string;
@Input()
hidpi: boolean;
@Input()
serverType: ServerType;
@Input()
imageLoadFunction?: LoadFunction;
@Input()
params: { [key: string]: any };
@Input()
projection: ProjectionLike | string;
@Input()
ratio: number;
@Input()
resolutions: Array<number>;
@Input()
url: string;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output()
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageWMS;
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
this.instance = new ImageWMS(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}
}
}

62
projects/ng-openlayers/src/lib/sources/osm.component.ts
View File

@ -1,62 +0,0 @@
import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
import { OSM } from 'ol/source';
import { AttributionLike } from 'ol/source/Source';
import { TileSourceEvent } from 'ol/source/Tile';
import { LoadFunction } from 'ol/Tile';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { SourceXYZComponent } from './xyz.component';
@Component({
selector: 'aol-source-osm',
template: ` <div class="aol-source-osm"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
})
export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
@Input()
attributions: AttributionLike;
@Input()
cacheSize: number;
@Input()
crossOrigin: string;
@Input()
maxZoom: number;
@Input()
opaque: boolean;
@Input()
reprojectionErrorThreshold: number;
@Input()
tileLoadFunction: LoadFunction;
@Input()
url: string;
@Input()
wrapX: boolean;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
instance: OSM;
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
if (this.tileGridXYZ) {
this.tileGrid = this.tileGridXYZ.instance;
}
this.instance = new OSM(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
this.register(this.instance);
}
}

68
projects/ng-openlayers/src/lib/sources/raster.component.ts
View File

@ -1,68 +0,0 @@
import {
AfterContentInit,
Component,
ContentChild,
EventEmitter,
forwardRef,
Host,
Input,
Output,
} from '@angular/core';
import { Raster, Source } from 'ol/source';
import { Operation, RasterSourceEvent } from 'ol/source/Raster';
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 {
@Input()
operation?: Operation;
@Input()
threads?: number;
@Input()
lib?: any;
@Input()
operationType?: 'pixel' | 'image';
@Output()
beforeOperations = new EventEmitter<RasterSourceEvent>();
@Output()
afterOperations = new EventEmitter<RasterSourceEvent>();
instance: Raster;
sources: Source[] = [];
@ContentChild(SourceComponent, { static: false })
set source(sourceComponent: SourceComponent) {
this.sources = [sourceComponent.instance];
if (this.instance) {
// Openlayer doesn't handle sources update. Just recreate Raster instance.
this.init();
}
}
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngAfterContentInit() {
this.init();
}
init() {
this.instance = new Raster(this);
this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
this.register(this.instance);
}
}

28
projects/ng-openlayers/src/lib/sources/source.component.ts
View File

@ -1,28 +0,0 @@
import { Input, OnDestroy, Directive } from '@angular/core';
import Source from 'ol/source/Source';
import { LayerComponent } from '../layers/layer.component';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class SourceComponent implements OnDestroy {
@Input()
attributions: any;
public instance: Source;
public componentType = 'source';
protected constructor(protected host: LayerComponent) {}
ngOnDestroy() {
if (this.host && this.host.instance) {
this.host.instance.setSource(null);
}
}
protected register(s: Source) {
if (this.host) {
this.host.instance.setSource(s);
}
}
}

25
projects/ng-openlayers/src/lib/sources/tilejson.component.ts
View File

@ -1,25 +0,0 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { TileJSON } from 'ol/source';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-tilejson',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
})
export class SourceTileJSONComponent extends SourceComponent implements OnInit {
@Input()
url: string;
instance: TileJSON;
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
this.instance = new TileJSON(this);
this.host.instance.setSource(this.instance);
}
}

58
projects/ng-openlayers/src/lib/sources/tilewms.component.ts
View File

@ -1,58 +0,0 @@
import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { TileWMS } from 'ol/source';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LoadFunction } from 'ol/Tile';
import { ServerType } from 'ol/source/wms';
@Component({
selector: 'aol-source-tilewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
})
export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit {
@Input()
cacheSize: number;
@Input()
crossOrigin: string;
@Input()
gutter: number;
@Input()
hidpi: boolean;
@Input()
params: { [key: string]: any };
@Input()
projection: string;
@Input()
reprojectionErrorThreshold: number;
@Input()
serverType: ServerType;
@Input()
tileGrid: TileGrid;
@Input()
tileLoadFunction: LoadFunction;
@Input()
url: string;
@Input()
urls: string[];
@Input()
wrapX: boolean;
instance: TileWMS;
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
this.instance = new TileWMS(this);
this.host.instance.setSource(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}
}
}

117
projects/ng-openlayers/src/lib/sources/tilewmts.component.ts
View File

@ -1,117 +0,0 @@
import {
Component,
Host,
Input,
forwardRef,
AfterContentInit,
ContentChild,
SimpleChanges,
OnChanges,
Output,
EventEmitter,
} from '@angular/core';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { TileGridWMTSComponent } from '../tilegridwmts.component';
import { WMTS as SourceWMTS } from 'ol/source';
import WMTS from 'ol/tilegrid/WMTS';
import { ProjectionLike } from 'ol/proj';
import { LoadFunction } from 'ol/Tile';
import { TileSourceEvent } from 'ol/source/Tile';
import { RequestEncoding } from 'ol/source/WMTS';
@Component({
selector: 'aol-source-tilewmts',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
})
export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges {
@Input()
cacheSize?: number;
@Input()
crossOrigin?: string;
@Input()
tileGrid: WMTS;
@Input()
projection: ProjectionLike;
@Input()
reprojectionErrorThreshold?: number;
@Input()
requestEncoding?: RequestEncoding | undefined;
@Input()
layer: string;
@Input()
style: string;
@Input()
tileClass?: any;
@Input()
tilePixelRatio?: number;
@Input()
version?: string;
@Input()
format?: string;
@Input()
matrixSet: string;
@Input()
dimensions?: any;
@Input()
url?: string;
@Input()
tileLoadFunction?: LoadFunction;
@Input()
urls?: string[];
@Input()
wrapX?: boolean;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
@ContentChild(TileGridWMTSComponent, { static: false })
tileGridWMTS: TileGridWMTSComponent;
instance: SourceWMTS;
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'url':
this.url = changes[key].currentValue;
this.setLayerSource();
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
}
this.instance.setProperties(properties, false);
}
setLayerSource(): void {
this.instance = new SourceWMTS(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
this.host.instance.setSource(this.instance);
}
ngAfterContentInit(): void {
if (this.tileGridWMTS) {
this.tileGrid = this.tileGridWMTS.instance;
this.setLayerSource();
}
}
}

26
projects/ng-openlayers/src/lib/sources/utfgrid.component.ts
View File

@ -1,26 +0,0 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { SourceComponent } from './source.component';
import { LayerTileComponent } from '../layers/layertile.component';
import { UTFGrid } from 'ol/source';
import { Config } from 'ol/source/TileJSON';
@Component({
selector: 'aol-source-utfgrid',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
})
export class SourceUTFGridComponent extends SourceComponent implements OnInit {
@Input() tileJSON: Config;
@Input() url: string;
instance: UTFGrid;
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
this.instance = new UTFGrid(this);
this.host.instance.setSource(this.instance);
}
}

37
projects/ng-openlayers/src/lib/sources/vector.component.ts
View File

@ -1,37 +0,0 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Vector } from 'ol/source';
import Feature from 'ol/format/Feature';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import { LoadingStrategy } from 'ol/source/Vector';
@Component({
selector: 'aol-source-vector',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
})
export class SourceVectorComponent extends SourceComponent implements OnInit {
@Input()
overlaps: boolean;
@Input()
useSpatialIndex: boolean;
@Input()
wrapX: boolean;
@Input()
url: string;
@Input()
format: Feature;
@Input()
strategy: LoadingStrategy;
instance: Vector;
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit() {
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);
}
}

56
projects/ng-openlayers/src/lib/sources/vectortile.component.ts
View File

@ -1,56 +0,0 @@
import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
import { VectorTile } from 'ol/source';
import Feature from 'ol/format/Feature';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LayerVectorTileComponent } from '../layers/layervectortile.component';
import { FormatComponent } from '../formats/format.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { UrlFunction } from 'ol/Tile';
@Component({
selector: 'aol-source-vectortile',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
})
export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
@Input()
cacheSize: number;
@Input()
overlaps: boolean;
@Input()
projection: ProjectionLike;
@Input()
tilePixelRatio: number;
@Input()
tileUrlFunction: UrlFunction;
@Input()
url: string;
@Input()
urls: string[];
@Input()
wrapX: boolean;
@ContentChild(FormatComponent, { static: false })
formatComponent: FormatComponent;
@ContentChild(TileGridComponent, { static: false })
tileGridComponent: TileGridComponent;
public instance: VectorTile;
format: Feature;
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 VectorTile(this);
this.host.instance.setSource(this.instance);
}
}

115
projects/ng-openlayers/src/lib/sources/xyz.component.ts
View File

@ -1,115 +0,0 @@
import {
AfterContentInit,
Component,
ContentChild,
EventEmitter,
forwardRef,
Host,
Input,
OnChanges,
Optional,
Output,
SimpleChanges,
} from '@angular/core';
import { Size } from 'ol/size';
import { XYZ } from 'ol/source';
import { TileSourceEvent } from 'ol/source/Tile';
import { LoadFunction, UrlFunction } from 'ol/Tile';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LayerTileComponent } from '../layers/layertile.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-xyz',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
})
export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
@Input()
cacheSize: number;
@Input()
crossOrigin: string;
@Input()
opaque: boolean;
@Input()
projection: string;
@Input()
reprojectionErrorThreshold: number;
@Input()
minZoom: number;
@Input()
maxZoom: number;
@Input()
tileGrid: TileGrid;
@Input()
tileLoadFunction?: LoadFunction;
@Input()
tilePixelRatio: number;
@Input()
tileSize: number | Size;
@Input()
tileUrlFunction?: UrlFunction;
@Input()
url: string;
@Input()
urls: string[];
@Input()
wrapX: boolean;
@ContentChild(TileGridComponent, { static: false })
tileGridXYZ: TileGridComponent;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
instance: XYZ;
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
if (this.tileGridXYZ) {
this.tileGrid = this.tileGridXYZ.instance;
}
this.init();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
}
this.instance.setProperties(properties, false);
if (changes.hasOwnProperty('url')) {
this.init();
}
}
init() {
this.instance = new XYZ(this);
this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
this.register(this.instance);
}
}

58
projects/ng-openlayers/src/lib/styles/circle.component.ts
View File

@ -1,58 +0,0 @@
import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { Circle, Fill, Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-circle',
template: ` <ng-content></ng-content> `,
})
export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
@Input()
fill: Fill;
@Input()
radius: number;
@Input()
snapToPixel: boolean;
@Input()
stroke: Stroke;
public componentType = 'style-circle';
public instance: Circle;
constructor(@Host() private host: StyleComponent) {}
/**
* WORK-AROUND: since the re-rendering is not triggered on style change
* we trigger a radius change.
* see openlayers #6233 and #5775
*/
update() {
if (!!this.instance) {
// console.log('setting ol.style.Circle instance\'s radius');
this.instance.setRadius(this.radius);
}
this.host.update();
}
ngAfterContentInit() {
// console.log('creating ol.style.Circle instance with: ', this);
this.instance = new Circle(this);
this.host.instance.setImage(this.instance);
this.host.update();
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.radius) {
this.instance.setRadius(changes.radius.currentValue);
}
// console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
}
ngOnDestroy() {
// console.log('removing aol-style-circle');
this.host.instance.setImage(null);
}
}

68
projects/ng-openlayers/src/lib/styles/fill.component.ts
View File

@ -1,68 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Fill } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
import { StyleTextComponent } from './text.component';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-fill',
template: ` <div class="aol-style-fill"></div> `,
})
export class StyleFillComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
public instance: Fill;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
if (!!styleTextHost) {
this.host = styleTextHost;
} else if (!!styleCircleHost) {
this.host = styleCircleHost;
} else {
this.host = styleHost;
}
// console.log('creating aol-style-fill with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Fill instance with: ', this);
this.instance = new Fill(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setFill(this.instance);
// console.log('setting ol.style instance\'s fill:', this.host);
break;
case 'style-text':
this.host.instance.setFill(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).fill = this.instance;
// console.log('setting ol.style.circle instance\'s fill:', this.host);
break;
default:
throw new Error('unknown host type: ' + this.host);
}
}
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);
}
}

80
projects/ng-openlayers/src/lib/styles/icon.component.ts
View File

@ -1,80 +0,0 @@
import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Icon } from 'ol/style';
// TODO https://github.com/openlayers/openlayers/issues/12694
// import IconAnchorUnits from 'ol/style/IconAnchorUnits';
// import IconOrigin from 'ol/style/IconOrigin';
import { StyleComponent } from './style.component';
import { IconAnchorUnits, IconOrigin } from 'ol/style/Icon';
@Component({
selector: 'aol-style-icon',
template: ` <div class="aol-style-icon"></div> `,
})
export class StyleIconComponent implements OnInit, OnChanges {
@Input()
anchor: [number, number];
@Input()
anchorXUnits: IconAnchorUnits;
@Input()
anchorYUnits: IconAnchorUnits;
@Input()
anchorOrigin: IconOrigin;
@Input()
color: [number, number, number, number];
@Input()
crossOrigin: IconOrigin;
@Input()
img: HTMLCanvasElement | HTMLImageElement;
@Input()
offset: [number, number];
@Input()
offsetOrigin: IconOrigin;
@Input()
opacity: number;
@Input()
scale: number;
@Input()
snapToPixel: boolean;
@Input()
rotateWithView: boolean;
@Input()
rotation: number;
@Input()
size: [number, number];
@Input()
imgSize: [number, number];
@Input()
src: string;
public instance: Icon;
constructor(@Host() private host: StyleComponent) {}
ngOnInit() {
// console.log('creating ol.style.Icon instance with: ', this);
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.opacity) {
this.instance.setOpacity(changes.opacity.currentValue);
}
if (changes.rotation) {
this.instance.setRotation(changes.rotation.currentValue);
}
if (changes.scale) {
this.instance.setScale(changes.scale.currentValue);
}
if (changes.src) {
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
this.host.update();
// console.log('changes detected in aol-style-icon: ', changes);
}
}

95
projects/ng-openlayers/src/lib/styles/stroke.component.ts
View File

@ -1,95 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
import { StyleTextComponent } from './text.component';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-stroke',
template: ` <div class="aol-style-stroke"></div> `,
})
export class StyleStrokeComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
@Input()
lineCap: CanvasLineCap | undefined;
@Input()
lineDash: number[];
@Input()
lineJoin: CanvasLineJoin | undefined;
@Input()
miterLimit: number;
@Input()
width: number;
public instance: Stroke;
/* the typings do not have the setters */
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
if (!!styleTextHost) {
this.host = styleTextHost;
} else if (!!styleCircleHost) {
this.host = styleCircleHost;
} else {
this.host = styleHost;
}
// console.log('creating aol-style-stroke with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Stroke instance with: ', this);
this.instance = new Stroke(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setStroke(this.instance);
// console.log('setting ol.style instance\'s stroke:', this.host);
break;
case 'style-text':
this.host.instance.setStroke(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).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);
}
}

48
projects/ng-openlayers/src/lib/styles/style.component.ts
View File

@ -1,48 +0,0 @@
import { Component, Input, Optional, OnInit } from '@angular/core';
import { Fill, Image, Stroke, Style, Text } from 'ol/style';
import { Geometry } from 'ol/geom';
import { FeatureComponent } from '../feature.component';
import { LayerVectorComponent } from '../layers/layervector.component';
import { GeometryFunction } from 'ol/style/Style';
@Component({
selector: 'aol-style',
template: ` <ng-content></ng-content> `,
})
export class StyleComponent implements OnInit {
@Input()
geometry: string | Geometry | GeometryFunction;
@Input()
fill: Fill;
@Input()
image: Image;
@Input()
stroke: Stroke;
@Input()
text: Text;
@Input()
zIndex: number;
public instance: Style;
public componentType = 'style';
private readonly host: FeatureComponent | LayerVectorComponent;
constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) {
// console.log('creating aol-style');
this.host = !!featureHost ? featureHost : layerHost;
if (!this.host) {
throw new Error('aol-style must be applied to a feature or a layer');
}
}
update() {
// console.log('updating style\'s host: ', this.host);
this.host.instance.changed();
}
ngOnInit() {
// console.log('creating aol-style instance with: ', this);
this.instance = new Style(this);
this.host.instance.setStyle(this.instance);
}
}

78
projects/ng-openlayers/src/lib/styles/text.component.ts
View File

@ -1,78 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Text } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-text',
template: ` <div class="aol-style-text"></div> `,
})
export class StyleTextComponent implements OnInit, OnChanges {
@Input()
font: string | undefined;
@Input()
offsetX: number | undefined;
@Input()
offsetY: number | undefined;
@Input()
scale: number | undefined;
@Input()
rotateWithView: boolean | undefined;
@Input()
rotation: number | undefined;
@Input()
text: string | undefined;
@Input()
textAlign: CanvasTextAlign | undefined;
@Input()
textBaseLine: string | undefined;
public instance: Text;
public componentType = 'style-text';
constructor(@Optional() private host: StyleComponent) {
if (!host) {
throw new Error('aol-style-text must be a descendant of aol-style');
}
// console.log('creating aol-style-text with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Text instance with: ', this);
this.instance = new Text(this);
this.host.instance.setText(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.font) {
this.instance.setFont(changes.font.currentValue);
}
if (changes.offsetX) {
this.instance.setOffsetX(changes.offsetX.currentValue);
}
if (changes.offsetY) {
this.instance.setOffsetY(changes.offsetY.currentValue);
}
if (changes.scale) {
this.instance.setScale(changes.scale.currentValue);
}
if (changes.rotation) {
this.instance.setRotation(changes.rotation.currentValue);
}
if (changes.text) {
this.instance.setText(changes.text.currentValue);
}
if (changes.textAlign) {
this.instance.setTextAlign(changes.textAlign.currentValue);
}
if (changes.textBaseLine) {
this.instance.setTextBaseline(changes.textBaseLine.currentValue);
}
this.host.update();
// console.log('changes detected in aol-style-text, setting new properties: ', changes);
}
update() {}
}

43
projects/ng-openlayers/src/lib/tilegrid.component.ts
View File

@ -1,43 +0,0 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { createXYZ } from 'ol/tilegrid';
import TileGrid from 'ol/tilegrid/TileGrid';
import { Extent } from 'ol/extent';
import { Coordinate } from 'ol/coordinate';
import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid',
template: '',
})
export class TileGridComponent implements OnInit, OnChanges {
@Input()
extent: Extent;
@Input()
maxZoom: number;
@Input()
minZoom: number;
@Input()
tileSize: number | Size;
@Input()
origin?: Coordinate;
@Input()
resolutions: number[];
instance: TileGrid;
ngOnInit() {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {
this.instance = new TileGrid(this);
}
}
ngOnChanges(changes: SimpleChanges) {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {
this.instance = new TileGrid(this);
}
}
}

32
projects/ng-openlayers/src/lib/tilegridwmts.component.ts
View File

@ -1,32 +0,0 @@
import { Component, Input, OnInit } from '@angular/core';
import WMTS from 'ol/tilegrid/WMTS';
import { TileGridComponent } from './tilegrid.component';
import { Coordinate } from 'ol/coordinate';
import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid-wmts',
template: '',
})
export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
@Input()
origin?: Coordinate;
@Input()
origins?: Coordinate[];
@Input()
resolutions: number[];
@Input()
matrixIds: string[];
@Input()
sizes?: Size[];
@Input()
tileSizes?: Size[];
@Input()
widths?: number[];
instance: WMTS;
ngOnInit() {
this.instance = new WMTS(this);
}
}

127
projects/ng-openlayers/src/lib/view.component.ts
View File

@ -1,127 +0,0 @@
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core';
import View from 'ol/View';
import { MapComponent } from './map.component';
import { ObjectEvent } from 'ol/Object';
import { Extent } from 'ol/extent';
import { Coordinate } from 'ol/coordinate';
import { DrawEvent } from 'ol/interaction/Draw';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-view',
template: ` <ng-content></ng-content> `,
})
export class ViewComponent implements OnInit, OnChanges, OnDestroy {
@Input()
constrainRotation: boolean | number;
@Input()
enableRotation: boolean;
@Input()
extent: Extent;
@Input()
maxResolution: number;
@Input()
minResolution: number;
@Input()
maxZoom: number;
@Input()
minZoom: number;
@Input()
resolution: number;
@Input()
resolutions: number[];
@Input()
rotation: number;
@Input()
zoom: number;
@Input()
zoomFactor: number;
@Input()
center: Coordinate;
@Input()
projection: string;
@Input()
constrainOnlyCenter: boolean;
@Input()
smoothExtentConstraint: boolean;
@Input()
constrainResolution: boolean;
@Input()
smoothResolutionConstraint: boolean;
@Input()
showFullExtent: boolean;
@Input()
multiWorld: boolean;
@Input()
zoomAnimation = false;
@Output()
olChange = new EventEmitter<DrawEvent>();
@Output()
changeCenter = new EventEmitter<ObjectEvent>();
@Output()
changeResolution = new EventEmitter<ObjectEvent>();
@Output()
changeRotation = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
public instance: View;
public componentType = 'view';
constructor(private host: MapComponent) {}
ngOnInit() {
// console.log('creating ol.View instance with: ', this);
this.instance = new View(this);
this.host.instance.setView(this.instance);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change:center', (event: ObjectEvent) => this.changeCenter.emit(event));
this.instance.on('change:resolution', (event: ObjectEvent) => this.changeResolution.emit(event));
this.instance.on('change:rotation', (event: ObjectEvent) => this.changeRotation.emit(event));
this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
if (!this.instance) {
return;
}
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'zoom':
/** Work-around: setting the zoom via setProperties does not work. */
if (this.zoomAnimation) {
this.instance.animate({ zoom: changes[key].currentValue });
} else {
this.instance.setZoom(changes[key].currentValue);
}
break;
case 'projection':
this.instance = new View(this);
this.host.instance.setView(this.instance);
break;
case 'center':
/** Work-around: setting the center via setProperties does not work. */
this.instance.setCenter(changes[key].currentValue);
break;
default:
break;
}
properties[key] = changes[key].currentValue;
}
}
// console.log('changes detected in aol-view, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}
ngOnDestroy() {
// console.log('removing aol-view');
}
}

250
projects/ng-openlayers/src/public-api.ts
View File

@ -1,250 +0,0 @@
/*
* Public API Surface of ng-openlayers
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SimpleGeometryComponent } from './lib/geom/simplegeometry.component';
import { SourceComponent } from './lib/sources/source.component';
import { ViewComponent } from './lib/view.component';
import { GraticuleComponent } from './lib/graticule.component';
import { LayerGroupComponent } from './lib/layers/layergroup.component';
import { LayerImageComponent } from './lib/layers/layerimage.component';
import { LayerTileComponent } from './lib/layers/layertile.component';
import { MapComponent } from './lib/map.component';
import { LayerVectorComponent } from './lib/layers/layervector.component';
import { LayerVectorTileComponent } from './lib/layers/layervectortile.component';
import { SourceOsmComponent } from './lib/sources/osm.component';
import { SourceBingmapsComponent } from './lib/sources/bingmaps.component';
import { SourceClusterComponent } from './lib/sources/cluster.component';
import { SourceVectorComponent } from './lib/sources/vector.component';
import { SourceXYZComponent } from './lib/sources/xyz.component';
import { SourceTileWMTSComponent } from './lib/sources/tilewmts.component';
import { SourceVectorTileComponent } from './lib/sources/vectortile.component';
import { SourceTileWMSComponent } from './lib/sources/tilewms.component';
import { SourceTileJSONComponent } from './lib/sources/tilejson.component';
import { SourceGeoJSONComponent } from './lib/sources/geojson.component';
import { SourceImageStaticComponent } from './lib/sources/imagestatic.component';
import { SourceImageWMSComponent } from './lib/sources/imagewms.component';
import { SourceImageArcGISRestComponent } from './lib/sources/imagearcgisrest.component';
import { SourceRasterComponent } from './lib/sources/raster.component';
import { FeatureComponent } from './lib/feature.component';
import { GeometryCircleComponent } from './lib/geom/geometrycircle.component';
import { GeometryLinestringComponent } from './lib/geom/geometrylinestring.component';
import { GeometryMultiLinestringComponent } from './lib/geom/geometrymultilinestring.component';
import { GeometryMultiPointComponent } from './lib/geom/geometrymultipoint.component';
import { GeometryMultiPolygonComponent } from './lib/geom/geometrymultipolygon.component';
import { GeometryPointComponent } from './lib/geom/geometrypoint.component';
import { GeometryPolygonComponent } from './lib/geom/geometrypolygon.component';
import { CoordinateComponent } from './lib/coordinate.component';
import { CollectionCoordinatesComponent } from './lib/collectioncoordinates.component';
import { StyleComponent } from './lib/styles/style.component';
import { StyleCircleComponent } from './lib/styles/circle.component';
import { StyleStrokeComponent } from './lib/styles/stroke.component';
import { StyleIconComponent } from './lib/styles/icon.component';
import { StyleFillComponent } from './lib/styles/fill.component';
import { StyleTextComponent } from './lib/styles/text.component';
import { DefaultControlComponent } from './lib/controls/default.component';
import { ControlComponent } from './lib/controls/control.component';
import { ControlAttributionComponent } from './lib/controls/attribution.component';
import { ControlFullScreenComponent } from './lib/controls/fullscreen.component';
import { ControlMousePositionComponent } from './lib/controls/mouseposition.component';
import { ControlOverviewMapComponent } from './lib/controls/overviewmap.component';
import { ControlRotateComponent } from './lib/controls/rotate.component';
import { ControlScaleLineComponent } from './lib/controls/scaleline.component';
import { ControlZoomComponent } from './lib/controls/zoom.component';
import { ControlZoomSliderComponent } from './lib/controls/zoomslider.component';
import { ControlZoomToExtentComponent } from './lib/controls/zoomtoextent.component';
import { FormatMVTComponent } from './lib/formats/mvt.component';
import { TileGridComponent } from './lib/tilegrid.component';
import { TileGridWMTSComponent } from './lib/tilegridwmts.component';
import { DefaultInteractionComponent } from './lib/interactions/default.component';
import { DoubleClickZoomInteractionComponent } from './lib/interactions/doubleclickzoom.component';
import { DragAndDropInteractionComponent } from './lib/interactions/draganddrop.component';
import { DragBoxInteractionComponent } from './lib/interactions/dragbox.component';
import { DragPanInteractionComponent } from './lib/interactions/dragpan.component';
import { DragRotateInteractionComponent } from './lib/interactions/dragrotate.component';
import { DragRotateAndZoomInteractionComponent } from './lib/interactions/dragrotateandzoom.component';
import { DragZoomInteractionComponent } from './lib/interactions/dragzoom.component';
import { MouseWheelZoomInteractionComponent } from './lib/interactions/mousewheelzoom.component';
import { PinchZoomInteractionComponent } from './lib/interactions/pinchzoom.component';
import { DrawInteractionComponent } from './lib/interactions/draw.component';
import { KeyboardPanInteractionComponent } from './lib/interactions/keyboardpan.component';
import { KeyboardZoomInteractionComponent } from './lib/interactions/keyboardzoom.component';
import { SelectInteractionComponent } from './lib/interactions/select.component';
import { ModifyInteractionComponent } from './lib/interactions/modify.component';
import { TranslateInteractionComponent } from './lib/interactions/translate.component';
import { OverlayComponent } from './lib/overlay.component';
import { ContentComponent } from './lib/content.component';
import { AttributionsComponent } from './lib/attributions.component';
import { AttributionComponent } from './lib/attribution.component';
import { SourceUTFGridComponent } from './lib/sources/utfgrid.component';
import { LayerComponent } from './lib/layers/layer.component';
export {
MapComponent,
ViewComponent,
GraticuleComponent,
LayerComponent,
LayerGroupComponent,
LayerImageComponent,
LayerTileComponent,
LayerVectorComponent,
LayerVectorTileComponent,
SourceComponent,
SourceOsmComponent,
SourceBingmapsComponent,
SourceClusterComponent,
SourceUTFGridComponent,
SourceVectorComponent,
SourceXYZComponent,
SourceVectorTileComponent,
SourceTileWMSComponent,
SourceTileWMTSComponent,
SourceTileJSONComponent,
SourceGeoJSONComponent,
SourceImageStaticComponent,
SourceImageWMSComponent,
SourceRasterComponent,
SourceImageArcGISRestComponent,
SimpleGeometryComponent,
FeatureComponent,
GeometryLinestringComponent,
GeometryMultiLinestringComponent,
GeometryMultiPointComponent,
GeometryMultiPolygonComponent,
GeometryPointComponent,
GeometryPolygonComponent,
GeometryCircleComponent,
CoordinateComponent,
CollectionCoordinatesComponent,
StyleComponent,
StyleCircleComponent,
StyleFillComponent,
StyleIconComponent,
StyleStrokeComponent,
StyleTextComponent,
DefaultControlComponent,
ControlComponent,
ControlAttributionComponent,
ControlFullScreenComponent,
ControlMousePositionComponent,
ControlOverviewMapComponent,
ControlRotateComponent,
ControlScaleLineComponent,
ControlZoomComponent,
ControlZoomSliderComponent,
ControlZoomToExtentComponent,
FormatMVTComponent,
TileGridComponent,
TileGridWMTSComponent,
DefaultInteractionComponent,
DoubleClickZoomInteractionComponent,
DragAndDropInteractionComponent,
DragBoxInteractionComponent,
DragPanInteractionComponent,
DragRotateInteractionComponent,
DragRotateAndZoomInteractionComponent,
DragZoomInteractionComponent,
MouseWheelZoomInteractionComponent,
PinchZoomInteractionComponent,
DrawInteractionComponent,
KeyboardPanInteractionComponent,
KeyboardZoomInteractionComponent,
SelectInteractionComponent,
ModifyInteractionComponent,
TranslateInteractionComponent,
OverlayComponent,
ContentComponent,
AttributionsComponent,
AttributionComponent,
};
const COMPONENTS = [
MapComponent,
ViewComponent,
GraticuleComponent,
LayerGroupComponent,
LayerImageComponent,
LayerTileComponent,
LayerVectorComponent,
LayerVectorTileComponent,
SourceOsmComponent,
SourceBingmapsComponent,
SourceClusterComponent,
SourceUTFGridComponent,
SourceVectorComponent,
SourceXYZComponent,
SourceVectorTileComponent,
SourceTileWMSComponent,
SourceTileWMTSComponent,
SourceTileJSONComponent,
SourceGeoJSONComponent,
SourceImageStaticComponent,
SourceImageWMSComponent,
SourceImageArcGISRestComponent,
SourceRasterComponent,
FeatureComponent,
GeometryLinestringComponent,
GeometryMultiLinestringComponent,
GeometryMultiPointComponent,
GeometryMultiPolygonComponent,
GeometryPointComponent,
GeometryPolygonComponent,
GeometryCircleComponent,
CoordinateComponent,
CollectionCoordinatesComponent,
StyleComponent,
StyleCircleComponent,
StyleFillComponent,
StyleIconComponent,
StyleStrokeComponent,
StyleTextComponent,
DefaultControlComponent,
ControlComponent,
ControlAttributionComponent,
ControlFullScreenComponent,
ControlMousePositionComponent,
ControlOverviewMapComponent,
ControlRotateComponent,
ControlScaleLineComponent,
ControlZoomComponent,
ControlZoomSliderComponent,
ControlZoomToExtentComponent,
FormatMVTComponent,
TileGridComponent,
TileGridWMTSComponent,
DefaultInteractionComponent,
DoubleClickZoomInteractionComponent,
DragAndDropInteractionComponent,
DragBoxInteractionComponent,
DragPanInteractionComponent,
DragRotateInteractionComponent,
DragRotateAndZoomInteractionComponent,
DragZoomInteractionComponent,
MouseWheelZoomInteractionComponent,
PinchZoomInteractionComponent,
DrawInteractionComponent,
SelectInteractionComponent,
ModifyInteractionComponent,
TranslateInteractionComponent,
OverlayComponent,
ContentComponent,
AttributionsComponent,
AttributionComponent,
];
@NgModule({
declarations: COMPONENTS,
imports: [CommonModule],
exports: COMPONENTS,
})
export class AngularOpenlayersModule {}

12
projects/ng-openlayers/src/test.ts
View File

@ -1,12 +0,0 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'core-js/es7/reflect';
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false },
});

27
projects/ng-openlayers/tsconfig.lib.json
View File

@ -1,27 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipLibCheck": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
],
"include": [
"**/*.ts"
]
}

9
projects/ng-openlayers/tsconfig.lib.prod.json
View File

@ -1,9 +0,0 @@
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}

17
projects/ng-openlayers/tsconfig.spec.json
View File

@ -1,17 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}

7
projects/ng-openlayers/tslint-prettier.json
View File

@ -1,7 +0,0 @@
{
"extends": [
"./tslint.json",
"tslint-config-prettier",
"tslint-plugin-prettier"
]
}

5
tsconfig.base.json
View File

@ -19,11 +19,6 @@
"es2018", "es2018",
"dom" "dom"
], ],
"paths": {
"ng-openlayers": [
"libs/ng-openlayers/src/public-api.ts"
]
},
"useDefineForClassFields": false, "useDefineForClassFields": false,
"rootDir": "." "rootDir": "."
}, },