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

AW-6526 update angular 21
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Peter (extern)
2026-01-19 12:19:09 +01:00
parent c35114b2d3
commit 9cc581dd3d
102 changed files with 3287 additions and 4023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@@ -25,25 +25,25 @@
"@farmmaps/common-map3d": "file:dist/common-map3d",
"@farmmaps/ng-openlayers": "file:dist/ng-openlayers",
"@microsoft/signalr": "^3.1.16",
"@ng-bootstrap/ng-bootstrap": "^19.0.0",
"@ngrx/effects": "^18.0.2",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@ng-bootstrap/ng-bootstrap": "^21.0.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"@popperjs/core": "^2.11.8",
"angular-oauth2-oidc": "^17.0.2",
"angular-oauth2-oidc": "20.0.2",
"assert": "^2.0.0",
"bootstrap": "^5.3.3",
"bootstrap": "5.3.8",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"cesium": "^1.97.0",
"core-js": "^2.6.12",
"https-browserify": "^1.0.0",
"moment": "^2.29.4",
"ngrx-store-localstorage": "^18.0.0",
"ngx-avatars": "^1.8.0",
"ngrx-store-localstorage": "21.0.1",
"ngx-avatars": "^1.10.0",
"ngx-clipboard": "^16.0.0",
"ngx-image-cropper": "^7.0.0",
"ngx-uploadx": "^6.2.0",
"ngx-uploadx": "7.0.1",
"ol": "^8.2.0",
"olcs": "^2.13.1",
"resumablejs": "^1.1.0",
@@ -61,7 +61,7 @@
"@rollup/rollup-linux-x64-gnu": "^4.21.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^19.0.0",
"@angular-builders/custom-webpack": "^21.0.3",
"@angular-devkit/build-angular": "21.1.0",
"@angular/cli": "21.1.0",
"@angular/compiler-cli": "21.1.0",

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

@@ -11,11 +11,11 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.2.3",
"@ngrx/effects": "^18.0.2",
"@ngrx/router-store": "^18.0.2",
"@ngrx/store": "^18.0.2",
"ngrx-store-localstorage": "^18",
"@angular/core": "21.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"ngrx-store-localstorage": "20.1.0",
"tassign": "^1.0.0"
}
},
@@ -36,52 +36,64 @@
"extraneous": true
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
"integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
"integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0 || ~0.16.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@angular/platform-browser": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.3.tgz",
"integrity": "sha512-M2ob4zN7tAcL2mx7U6KnZNqNFPFl9MlPBE0FrjQjIzAjU0wSYPIJXmaPu9aMUp9niyo+He5iX98I+URi2Yc99g==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
"integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/animations": "18.2.3",
"@angular/common": "18.2.3",
"@angular/core": "18.2.3"
"@angular/animations": "21.1.0",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0"
},
"peerDependenciesMeta": {
"@angular/animations": {
@@ -90,76 +102,67 @@
}
},
"node_modules/@angular/router": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.3.tgz",
"integrity": "sha512-fvD9eSDIiIbeYoUokoWkXzu7/ZaxlzKPUHFqX1JuKuH5ciQDeT/d7lp4mj31Bxammhohzi3+z12THJYsCkj/iQ==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
"integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/common": "18.2.3",
"@angular/core": "18.2.3",
"@angular/platform-browser": "18.2.3",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"@angular/platform-browser": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@ngrx/effects": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-18.0.2.tgz",
"integrity": "sha512-YojXcOD9Lsq4kl2HCjENccyUM/mOlgBdtddsg9j/ojzSUgu3ZuBVKLN3atrL2TJYkbMX1MN0RzafSkL3TPGFIA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-21.0.1.tgz",
"integrity": "sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@ngrx/operators": "18.0.1",
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.0.0",
"@ngrx/store": "18.0.2",
"@angular/core": "^21.0.0",
"@ngrx/store": "21.0.1",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
"node_modules/@ngrx/operators": {
"version": "18.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/operators/-/operators-18.0.1.tgz",
"integrity": "sha512-M+QMrHNKgcuiLaRGZxJ4aQi5/OCRfKC4+T/63dsHyLFZ53/FFpF6a/ytSO1Q+tzOplZ5o99S+i8FVaZqNQ3LmQ==",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@ngrx/router-store": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-18.0.2.tgz",
"integrity": "sha512-jUrQ/uJJ53x8O1XbN2YxH2GpRREZlwS5gRxlCoc4fWL4Us/uS1/K6+QfRmKBPtpTKBIixqsOb+dIUV5iwBrivA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-21.0.1.tgz",
"integrity": "sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/router": "^18.0.0",
"@ngrx/store": "18.0.2",
"@angular/common": "^21.0.0",
"@angular/core": "^21.0.0",
"@angular/router": "^21.0.0",
"@ngrx/store": "21.0.1",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
"node_modules/@ngrx/store": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-18.0.2.tgz",
"integrity": "sha512-ajwv0+njsO4vzArp9esnFvs1wyUb1U1W8E8LSCKrcW2hWWo9o1Pezj+JRsdQwatxHfrrPFuTDyajsl6GQM/JSA==",
"version": "21.0.1",
"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-21.0.1.tgz",
"integrity": "sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "^18.0.0",
"@angular/core": "^21.0.0",
"rxjs": "^6.5.3 || ^7.5.0"
}
},
@@ -173,18 +176,19 @@
}
},
"node_modules/ngrx-store-localstorage": {
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/ngrx-store-localstorage/-/ngrx-store-localstorage-18.0.0.tgz",
"integrity": "sha512-WoDePvMWiWF9LQHe+dTqbpm8lxoKCPoIvA0/1enIPTmdLQsOpdDKhMSD5YgwuqDusNfEik3QslProTFGyXZwtw==",
"version": "20.1.0",
"resolved": "https://registry.npmjs.org/ngrx-store-localstorage/-/ngrx-store-localstorage-20.1.0.tgz",
"integrity": "sha512-/5+i5qTxZdE8Q5qdSmj7+9JvriAnHwW7RsXzh1rrQ/UHA9vf12q6mJ6wYTTehUO4Qcl2t/K5MRkooN2eG2ZEvw==",
"license": "MIT",
"peer": true,
"dependencies": {
"deepmerge": "^4.2.2",
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^18.0.1",
"@angular/core": "^18.0.1",
"@ngrx/store": "^18.0.0"
"@angular/common": ">=20.0.0",
"@angular/core": ">=20.0.0",
"@ngrx/store": ">=20.0.0"
}
},
"node_modules/rxjs": {
@@ -206,12 +210,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"peer": true
}
}
}

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

@@ -8,11 +8,11 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/core": "19.2.18",
"ngrx-store-localstorage": "^19.0.0",
"@ngrx/effects": "^19.0.0",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@angular/core": "21.1.0",
"ngrx-store-localstorage": "20.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"tassign": "^1.0.0"
}
}

2
projects/common-map/src/fm-map/components/map-search/map-search.component.scss
View File

@@ -14,7 +14,7 @@ div.map-search {
}
.disabled {
color:lighten(#000000,80%);
color: adjust(#000000,80%);
}
:host ::ng-deep ngb-typeahead-window.dropdown-menu {

3
projects/common-map/src/fm-map/components/map/map.component.html
View File

@@ -22,7 +22,8 @@
styles:styles$|async,
selectedFeature:selectedFeature$|async,
fullscreen:fullscreen$|async,
showDataLayerSlide:showDataLayerSlide$|async
showDataLayerSlide:showDataLayerSlide$|async,
menuVisible:menuVisible$|async
}; as state) {
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
<div>

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

@@ -11,8 +11,8 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "^18.2.3",
"@angular/core": "^18.2.3",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"cesium": "^1.97.0",
"ol-cesium": ">=2.13.0"
}
@@ -34,35 +34,46 @@
"extraneous": true
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
"integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "21.1.0",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
"integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "21.1.0",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0 || ~0.16.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@cesium/engine": {
@@ -498,9 +509,10 @@
}
},
"node_modules/rxjs": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"tslib": "^2.1.0"
@@ -549,12 +561,6 @@
"integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ==",
"peer": true
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"peer": true
},
"node_modules/zstddec": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",

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

@@ -8,8 +8,8 @@
"tslib": "^2.0.0"
},
"peerDependencies": {
"@angular/common": "19.2.18",
"@angular/core": "19.2.18",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"cesium": "^1.97.0",
"ol-cesium": ">=2.13.0"
}

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

File diff suppressed because it is too large Load Diff

41
projects/common/package.json
View File

@@ -1,25 +1,42 @@
{
"name": "@farmmaps/common",
"version": "2.1.0",
"version": "21.1.0",
"publishConfig": {
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"peerDependencies": {
"@ng-bootstrap/ng-bootstrap": "^19.0.0",
"@angular/common": "19.2.18",
"@angular/core": "19.2.18",
"@angular/forms": "19.2.18",
"@ngrx/effects": "^19.0.0",
"@ngrx/router-store": "^19.0.0",
"@ngrx/store": "^19.0.0",
"@ng-bootstrap/ng-bootstrap": "^20.0.0",
"@angular/common": "21.1.0",
"@angular/core": "21.1.0",
"@angular/forms": "21.1.0",
"@ngrx/effects": "21.0.1",
"@ngrx/router-store": "21.0.1",
"@ngrx/store": "21.0.1",
"tassign": "^1.0.0",
"bootstrap": "^5.3.3",
"@microsoft/signalr": "^3.1.16",
"@microsoft/signalr": "10.0.0",
"ngx-uploadx": "^6.2.0",
"angular-oauth2-oidc": "^17.0.2",
"angular-oauth2-oidc": "20.0.2",
"moment": "^2.29.4",
"ngx-avatars": "^1.8.0",
"ngx-image-cropper": "^7.0.0",
"ngx-avatars": "1.10.1",
"ngx-image-cropper": "9.1.6",
"ngx-clipboard": "^16.0.0"
},
"overrides": {
"ngx-avatars": {
"@angular/common": "$@angular/common",
"@angular/core": "$@angular/core"
},
"ngx-clipboard": {
"@angular/core": "$@angular/core"
},
"ngx-image-cropper": {
"@angular/common": "$@angular/common",
"@angular/core": "$@angular/core"
}
,
"ngx-uploadx": {
"@angular/core": "$@angular/core"
}
}
}

6
projects/common/src/fm/common.module.ts
View File

@@ -20,7 +20,7 @@ import { MODULE_NAME } from './module-name';
//components
import { AvatarModule } from 'ngx-avatars';
import { ImageCropperModule } from 'ngx-image-cropper';
import { ImageCropperComponent } from 'ngx-image-cropper';
import * as commonActions from './actions/app-common.actions';
import { AppMenuComponent } from './components/app-menu/app-menu.component';
import { AppComponent } from './components/app/app.component';
@@ -34,7 +34,6 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive';
import { HasPackageDirective } from './components/has-package/has-package.directive';
import { HasRoleDirective } from './components/has-role/has-role.directive';
import { HelpMenuComponent } from './components/help-menu/help-menu.component';
import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
import { ItemLinkComponent } from './components/item-link/item-link.component';
import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
@@ -43,6 +42,7 @@ import { NotificationMenuComponent } from './components/notification-menu/notifi
import { PackageExistsDirective } from './components/package-exists/package-exists.directive';
import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
import { SidePanelComponent } from './components/side-panel/side-panel.component';
import { TagInputComponent } from './components/tag-input/tag-input.component';
import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -151,6 +151,6 @@ export {
UploadxModule,
ClipboardModule,
AvatarModule,
ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
ImageCropperComponent], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class AppCommonModule {
}

10
projects/common/src/fm/components/app-menu/app-menu.component.ts
View File

@@ -1,9 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { IUser } from '../../models/user';
import {Store} from '@ngrx/store';
import * as appReducers from '../../reducers/app-common.reducer';
import { Component, Input, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as appActions from '../../actions/app-common.actions';
import { IUser } from '../../models/user';
import * as appReducers from '../../reducers/app-common.reducer';
@Component({
selector: 'fm-app-menu',
@@ -34,5 +33,4 @@ export class AppMenuComponent implements OnInit {
deActivateRoute() {
this.noContent=true;
}
}

4
projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss
View File

@@ -45,7 +45,7 @@ div.card-header span.fa {
.upload-file .progress-container .progress-bar {
display: block;
background-color: color("green");
background-color: green;
width: 0%;
height: 100%;
}
@@ -84,7 +84,7 @@ div.card-header span.fa {
}
.upload-file.done > div > span.fa-check {
color: color("green");
color: green;
width: 20px;
display: inline-block;
vertical-align: middle;

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

@@ -10,7 +10,8 @@
],
"parserOptions": {
"project": [
"libs/ng-openlayers/tsconfig.*?.json"
"projects/ngx-openlayers/tsconfig.lib.json",
"projects/ngx-openlayers/tsconfig.spec.json"
],
"createDefaultProgram": true
},
@@ -41,7 +42,8 @@
"off",
"always"
],
"import/order": "off"
"import/order": "off",
"no-underscore-dangle": "off"
}
},
{

705
projects/ng-openlayers/CHANGELOG.md Normal file
View File

@@ -0,0 +1,705 @@
# Changelog
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
## [20.0.1](https://github.com/quentinlampin/ngx-openlayers/compare/20.0.0...20.0.1) (2026-01-13)
### Bug Fixes
* LayerImageComponent, LayerTileComponent, LayerVectorComponent and LayerVectorTileComponent inputs are not applied ([dd03fbb](https://github.com/quentinlampin/ngx-openlayers/commit/dd03fbb6f09ee93d3d90358fa5735c6a6ca4d1f3)), closes [#348](https://github.com/quentinlampin/ngx-openlayers/issues/348)
## [20.0.0](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.3...20.0.0) (2025-12-18)
### ⚠ BREAKING CHANGES
* Angular 18 is no more supported
* ol peer dependency is now ~10.7.0
### build
* update to Angular 20 ([ce87117](https://github.com/quentinlampin/ngx-openlayers/commit/ce87117311c0eb6b5df95da0289a64392e0df8f3)), closes [#333](https://github.com/quentinlampin/ngx-openlayers/issues/333)
## [19.1.3](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.2...19.1.3) (2025-11-06)
## [19.1.2](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.1...19.1.2) (2025-11-06)
## [19.1.1](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.0...19.1.1) (2025-11-06)
## [19.1.0](https://github.com/quentin-ol/ngx-openlayers/compare/19.0.0...19.1.0) (2025-11-06)
### Features
* **interaction:** snap interaction ([cd0e34e](https://github.com/quentin-ol/ngx-openlayers/commit/cd0e34ec345da3e1181fca7486bba3a18e43a766)), closes [#335](https://github.com/quentin-ol/ngx-openlayers/issues/335)
## [19.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.2...19.0.0) (2025-10-02)
### ⚠ BREAKING CHANGES
* Angular 17 is no more supported
### build
* update to Angular 19 ([83f06f8](https://github.com/quentin-ol/ngx-openlayers/commit/83f06f829672045454cb6c32b3c89e2cebc2a953)), closes [#326](https://github.com/quentin-ol/ngx-openlayers/issues/326)
## [18.0.2](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.1...18.0.2) (2025-06-23)
### Bug Fixes
* **layers:** add missing inputs ([a25a612](https://github.com/quentin-ol/ngx-openlayers/commit/a25a6122ec6eb2a44e5bb3d08ad20989c7991111)), closes [#318](https://github.com/quentin-ol/ngx-openlayers/issues/318)
## [18.0.1](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.0...18.0.1) (2025-06-17)
## [18.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...v18.0.0) (2025-06-17)
### ⚠ BREAKING CHANGES
* Angular 16 is no more supported
* `ol` peer dep is now `~10.5.0`
* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
* `ol` peer dep is now `~9.2.4`
* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
* Angular 15 is no more supported
* `ol` peer dep is now `8.2.0`
* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
* Angular 14 is no more supported
* `ol` peer dep is now `~7.5.2`
* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
* `ol` peer dep is now `~6.15.1`
* `DrawInteractionComponent` : input `type` is now of type `Type`
* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
* `OverlayComponent` : input `positioning` is now of type `Positioning`
* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
* `ViewComponent` : `changeZoom` output has been removed
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
### build
* update to Angular 16 ([b3c6691](https://github.com/quentin-ol/ngx-openlayers/commit/b3c6691b88893a6509020ade9b9eee9664754a5a))
* update to Angular 17 ([5676ce3](https://github.com/quentin-ol/ngx-openlayers/commit/5676ce304c8260e4acbea9aaed1f9c72c0edb9ab))
* update to Angular 18 ([f2e5ed8](https://github.com/quentin-ol/ngx-openlayers/commit/f2e5ed8d6235ba95c874ea3fd4a934dbd2a0b87f))
### Features
* **cluster:** add wrapX option ([f3106e4](https://github.com/quentin-ol/ngx-openlayers/commit/f3106e4996537faa4b2823d786cdcc3339069025))
* **cluster:** update distance input ([6e448a8](https://github.com/quentin-ol/ngx-openlayers/commit/6e448a849c76ea3e6240754d6a1f7598b679116e))
* **demo:** add example of a cursor position ([eae0a1f](https://github.com/quentin-ol/ngx-openlayers/commit/eae0a1f80822c8bf0976b607a04a447f59697653))
* **demo:** add example of geojson feature : point, polygon, linestring ([43e5eb7](https://github.com/quentin-ol/ngx-openlayers/commit/43e5eb791de291ac1d030056af783dcc6bc0b16e))
* **demo:** add example of map position with longitude, latitude and zoom ([107e94c](https://github.com/quentin-ol/ngx-openlayers/commit/107e94c2180348f9b5bffa6ae53ad1f7d952042d))
* **demo:** add example to display geometry of a geojson file ([939499c](https://github.com/quentin-ol/ngx-openlayers/commit/939499c146ea6dffe30716cf0fdbdd7d0985e2fc))
* **demo:** example change color on hover or on select ([6f8d7f9](https://github.com/quentin-ol/ngx-openlayers/commit/6f8d7f990f48340e98ce57fee465286fddc79424))
* **demo:** example draw a polygon ([2bf558c](https://github.com/quentin-ol/ngx-openlayers/commit/2bf558c29c66bd5abe7d7df07482c279ba209735))
* **demo:** example modify polygon ([240e3dc](https://github.com/quentin-ol/ngx-openlayers/commit/240e3dc275c3f31fdb84add34561bdd9ed0c8eda))
* **demo:** example of marker with svg ([f37e5ef](https://github.com/quentin-ol/ngx-openlayers/commit/f37e5ef2538a977d590c97a05caa4c51e0e58f9e))
* **demo:** example of overlay ([af15282](https://github.com/quentin-ol/ngx-openlayers/commit/af15282117ae69395e4cc7deb56aa2d49f17dc22))
* **demo:** example of side by side ([8f2408e](https://github.com/quentin-ol/ngx-openlayers/commit/8f2408e9b3155cff79c3548a9ea3fab6368d495f))
* **demo:** example of swipe ([8bb64c5](https://github.com/quentin-ol/ngx-openlayers/commit/8bb64c5e3ed1c42581081b464ccbc96e8d834ff0))
* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([9ac6458](https://github.com/quentin-ol/ngx-openlayers/commit/9ac6458f7fa791ae3d36a1588cdcf684b5a3193c))
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([98a10d0](https://github.com/quentin-ol/ngx-openlayers/commit/98a10d0982f6ed2493794042622ed13ab8c4a030))
* **graticule:** unregister on destroy ([bb7fa9f](https://github.com/quentin-ol/ngx-openlayers/commit/bb7fa9f16750020441c0d1a8e564d65d09ce59cc))
* **image:** add image loading events ([beada1b](https://github.com/quentin-ol/ngx-openlayers/commit/beada1b6cb927af01abc819ce538493743a9a54f))
* **imagearcgis:** add image events ([9e26397](https://github.com/quentin-ol/ngx-openlayers/commit/9e2639769c30b82eaafce61ef601ec1b4340167b))
* **map:** add onMoveStart event ([46b8ad3](https://github.com/quentin-ol/ngx-openlayers/commit/46b8ad390d8e0f8085b0c456fe0160b3d6452917))
* **openlayers:** migrate to 5 version ([54e47fc](https://github.com/quentin-ol/ngx-openlayers/commit/54e47fc039a77d3e5697c8a85903d5df13aa907d))
* **overviewmap:** refresh overview when the view changes ([18bc7a6](https://github.com/quentin-ol/ngx-openlayers/commit/18bc7a60f281b04c20f99f5d2efe94ca47b19cf8))
* **raster:** not updated when source change ([ad5f265](https://github.com/quentin-ol/ngx-openlayers/commit/ad5f26530e00b809bf02eb757095343d3e36231b))
* **source-vector:** support of 'loader' input ([0bda38a](https://github.com/quentin-ol/ngx-openlayers/commit/0bda38a7ef0233f9e7f01ca8c39dfe53504d15e0))
* **source:imagestatic:** refresh layer source when url change ([d71712f](https://github.com/quentin-ol/ngx-openlayers/commit/d71712ffea0ac6e8472ba2f9c420e90e3d3c8a56))
* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([4a4a4ef](https://github.com/quentin-ol/ngx-openlayers/commit/4a4a4efdb001821e29b6e57ee8b10ca7c2a3a5cd))
* **source:** add UTF grid source ([813a81b](https://github.com/quentin-ol/ngx-openlayers/commit/813a81b696955b05a218f2c5180810210bebc2dd))
* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([91de249](https://github.com/quentin-ol/ngx-openlayers/commit/91de249a6f4404ce6d3e8290b16ad455ee9f5a9a))
* **stroke:** add ColorLike typing to color input ([1b84a4b](https://github.com/quentin-ol/ngx-openlayers/commit/1b84a4ba40bc60d37d79282579d5c1bf6ebcfceb))
* update openlayers to `~7.5.2` ([7bb278d](https://github.com/quentin-ol/ngx-openlayers/commit/7bb278d59ed866d773698e10d11154a237f9bd0a))
* update openlayers to `10.5.0` ([6c88713](https://github.com/quentin-ol/ngx-openlayers/commit/6c8871353f8ea4c4eee220d028b9cab8bab46506))
* update openlayers to `8.2.0` ([4057d44](https://github.com/quentin-ol/ngx-openlayers/commit/4057d44e021a5f860485961c9f14a962d93bc457))
* update openlayers to `9.2.4` ([866ae56](https://github.com/quentin-ol/ngx-openlayers/commit/866ae561b1f9ee14fcce7fce3e799129353fa3ff))
* update openlayers to ~6.13.0 ([42fb323](https://github.com/quentin-ol/ngx-openlayers/commit/42fb3230645db423b2747a125c33419979954ea1))
* update openlayers to ~6.15.1 ([9588b9d](https://github.com/quentin-ol/ngx-openlayers/commit/9588b9d6b4a4d74ef6fc550e2aff24fb1e6df9be))
* update to angular 9 ([36bf6a8](https://github.com/quentin-ol/ngx-openlayers/commit/36bf6a8e82f108fc27f17b6356b0fb74b5f4d73e))
* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([ae72c41](https://github.com/quentin-ol/ngx-openlayers/commit/ae72c4130dfcb34574861c5f4512db1a892d77c9)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
* **view:** add change:resolution and change:center outputs ([7eb0b98](https://github.com/quentin-ol/ngx-openlayers/commit/7eb0b98e6b3eac3bd6b2a8b4308fafbf5edd07b7))
* **view:** add missing inputs ([9848242](https://github.com/quentin-ol/ngx-openlayers/commit/9848242b050b5b5041a6f405832c8f2105a117ff))
* **view:** add multiWorld ([059a641](https://github.com/quentin-ol/ngx-openlayers/commit/059a641d438fde881cc0303bbffb88234b134f84))
* **view:** add zoom change output ([ea08721](https://github.com/quentin-ol/ngx-openlayers/commit/ea08721e7899fcea9110fc4eb0e46b9aa6a6154f))
* **view:** dynamically update view projection ([425b0e0](https://github.com/quentin-ol/ngx-openlayers/commit/425b0e07daae029064c61c2c835bad40cbe4b319))
* **wmts:** add wmts tile load events ([04b35d3](https://github.com/quentin-ol/ngx-openlayers/commit/04b35d35725f1a0fa828acadee33568ffae211e1))
### Bug Fixes
* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([c3ba771](https://github.com/quentin-ol/ngx-openlayers/commit/c3ba771e2eefc24006604a44bffaf314a9262a17))
* **source:** update params ImageArcgisRest ([bfc6663](https://github.com/quentin-ol/ngx-openlayers/commit/bfc6663cc5024677421223c94caa6c5671efa534))
* **stroke:** fix ColorLike import path ([c2179ea](https://github.com/quentin-ol/ngx-openlayers/commit/c2179eab3cca0cb8f5f70c87b29f24d7257305e9))
* **travis:** lib build without ngcc (demo issue) ([9edc820](https://github.com/quentin-ol/ngx-openlayers/commit/9edc8203316545146034cea07d4ed203b5d745e8))
* **view:** set the center explicitly because it does not work via setProperties ([2472cff](https://github.com/quentin-ol/ngx-openlayers/commit/2472cff6978c2cc1cdbe2a791fc5889069f159ab))
## [18.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.2...18.0.0-next.0) (2025-06-11)
### ⚠ BREAKING CHANGES
* Angular 16 is no more supported
* `ol` peer dep is now `~10.5.0`
* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
### build
* update to Angular 18 ([eaf8b49](https://github.com/quentin-ol/ngx-openlayers/commit/eaf8b49190d2d97a97bc0b85b7ca5e573579a754))
### Features
* update openlayers to `10.5.0` ([8fd4db4](https://github.com/quentin-ol/ngx-openlayers/commit/8fd4db4e035843e7ffc940a63ed64ebc6e0595ba))
## [17.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.1...17.0.0-next.2) (2025-05-26)
## [17.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.0...17.0.0-next.1) (2025-05-26)
## [17.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/16.0.0-next.0...17.0.0-next.0) (2025-05-26)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~9.2.4`
* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
* Angular 15 is no more supported
### build
* update to Angular 17 ([c3bed7d](https://github.com/quentin-ol/ngx-openlayers/commit/c3bed7d7c05b7c483cb5da076b5616f6f0fdbd6a))
### Features
* update openlayers to `9.2.4` ([725e363](https://github.com/quentin-ol/ngx-openlayers/commit/725e36304ee48ad7323fcffbf1091917fe867bca))
## [16.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/15.0.0-next.0...16.0.0-next.0) (2025-01-10)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `8.2.0`
* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
* Angular 14 is no more supported
### build
* update to Angular 16 ([b129c81](https://github.com/quentin-ol/ngx-openlayers/commit/b129c81ec30a5195ad04725101798936dee38db6))
### Features
* update openlayers to `8.2.0` ([8b376e3](https://github.com/quentin-ol/ngx-openlayers/commit/8b376e33314977db52307403bd6a5219f0e5731d))
## [15.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.1.0-next.0...15.0.0-next.0) (2024-12-12)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~7.5.2`
* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
### Features
* update openlayers to `~7.5.2` ([0c0e3cb](https://github.com/quentin-ol/ngx-openlayers/commit/0c0e3cb7ed6dd7d7e5d8eb385feff4d9072e4211))
## [14.1.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.0.0-next.0...14.1.0-next.0) (2024-04-29)
### Features
* **source-vector:** support of 'loader' input ([58c1a6b](https://github.com/quentin-ol/ngx-openlayers/commit/58c1a6bb8e33ca4bec2d4094b1efb4610c3ee516))
## [14.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.21...14.0.0-next.0) (2024-03-26)
### ⚠ BREAKING CHANGES
* `ol` peer dep is now `~6.15.1`
* `DrawInteractionComponent` : input `type` is now of type `Type`
* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
* `OverlayComponent` : input `positioning` is now of type `Positioning`
* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
* `ViewComponent` : `changeZoom` output has been removed
### Features
* update openlayers to ~6.13.0 ([ec7f0b5](https://github.com/quentin-ol/ngx-openlayers/commit/ec7f0b5f285facd1f5fbdcd72a7f46d03a7763b4))
* update openlayers to ~6.15.1 ([f068b92](https://github.com/quentin-ol/ngx-openlayers/commit/f068b92e8f52b5e90e75be2cd91bba25391cee67))
## [1.0.0-next.21](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.20...1.0.0-next.21) (2023-11-30)
## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
<a name="1.0.0-next.19"></a>
# [1.0.0-next.19](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.17...1.0.0-next.19) (2021-09-03)
### Bug Fixes
* **stroke:** fix ColorLike import path ([ebdca6e](https://github.com/quentin-ol/ngx-openlayers/commit/ebdca6e))
### Features
* **stroke:** add ColorLike typing to color input ([f940292](https://github.com/quentin-ol/ngx-openlayers/commit/f940292))
<a name="1.0.0-next.17"></a>
# [1.0.0-next.17](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.16...1.0.0-next.17) (2021-01-06)
### Bug Fixes
* **view:** set the center explicitly because it does not work via setProperties ([958383a](https://github.com/quentin-ol/ngx-openlayers/commit/958383a))
### Features
* **view:** add multiWorld ([f695cbe](https://github.com/quentin-ol/ngx-openlayers/commit/f695cbe))
<a name="1.0.0-next.13"></a>
# [1.0.0-next.13](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.12...1.0.0-next.13) (2019-11-13)
### Features
* **wmts:** add wmts tile load events ([7aba5ca](https://github.com/quentin-ol/ngx-openlayers/commit/7aba5ca))
<a name="1.0.0-next.12"></a>
# [1.0.0-next.12](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.11...1.0.0-next.12) (2019-11-13)
### Chores
* update angular and openayer ([187a3b0](https://github.com/quentin-ol/ngx-openlayers/commit/187a3b0))
### Features
* **map:** add onMoveStart event ([f41daf9](https://github.com/quentin-ol/ngx-openlayers/commit/f41daf9))
### BREAKING CHANGES
* - precompose, postcompose become prerender, postrender
- remove `on` prefix for all output, exception for native events :
- `click` -> `olClick`
- `select` -> `olFeature`
- `change` -> `olChange`
<a name="1.0.0-next.11"></a>
# [1.0.0-next.11](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.10...1.0.0-next.11) (2019-08-08)
### Features
* **imagearcgis:** add image events ([24c1c65](https://github.com/quentin-ol/ngx-openlayers/commit/24c1c65))
<a name="1.0.0-next.10"></a>
# [1.0.0-next.10](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.10) (2019-07-23)
### Bug Fixes
* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
### Features
* **cluster:** update distance input ([5edbd57](https://github.com/quentin-ol/ngx-openlayers/commit/5edbd57))
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
### BREAKING CHANGES
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
<a name="1.0.0-next.9"></a>
# [1.0.0-next.9](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.8...1.0.0-next.9) (2019-06-04)
### Bug Fixes
* **ci:** fix build error of npm package
<a name="1.0.0-next.8"></a>
# [1.0.0-next.8](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.7...1.0.0-next.8) (2019-06-04)
### Features
* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
### Documentation
* add tile json source example ([a65bb8c](https://github.com/quentin-ol/ngx-openlayers/commit/a65bb8c))
* select interaction example ([1e2a46f](https://github.com/quentin-ol/ngx-openlayers/commit/1e2a46f))
* add image static example ([8ebc128](https://github.com/quentin-ol/ngx-openlayers/commit/8ebc128))
# [1.0.0-next.7](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.6...1.0.0-next.7) (2019-04-18)
### Features
* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
### BREAKING CHANGES
* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
That means the existing code must be updated for polygons:
Old style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
New style:
```html
<aol-feature>
<aol-geometry-polygon>
<aol-collection-coordinates
[coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
[srid]="'EPSG:4326'"
>
</aol-collection-coordinates>
</aol-geometry-polygon>
<aol-style>
<aol-style-stroke [color]="'red'"></aol-style-stroke>
<aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
</aol-style>
</aol-feature>
```
Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
This also allows to display polygon with holes, which is not possible with the current code.
* **openlayers:** Migration from `openlayers` package to `ol`
# [1.0.0-next.6](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.6) (2019-04-18)
### Bug Fixes
* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
# [1.0.0-next.5](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.4...1.0.0-next.5) (2019-02-04)
### Features
* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([76c0c83](https://github.com/quentin-ol/ngx-openlayers/commit/76c0c83)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
# [1.0.0-next.4](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.3...1.0.0-next.4) (2019-01-14)
### Features
* **raster:** not updated when source change ([13a28c7](https://github.com/quentin-ol/ngx-openlayers/commit/13a28c7))
# [1.0.0-next.3](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.2...1.0.0-next.3) (2018-12-12)
### Features
* **cluster:** add wrapX option ([93429a6](https://github.com/quentin-ol/ngx-openlayers/commit/93429a6))
* **image:** add image loading events ([fc856b3](https://github.com/quentin-ol/ngx-openlayers/commit/fc856b3))
# [1.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.1...1.0.0-next.2) (2018-11-21)
### Features
* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([d789ccf](https://github.com/quentin-ol/ngx-openlayers/commit/d789ccf))
* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([98d1577](https://github.com/quentin-ol/ngx-openlayers/commit/98d1577))
# [1.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.0...1.0.0-next.1) (2018-11-06)
### Bug Fixes
* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([afeb1a9](https://github.com/quentin-ol/ngx-openlayers/commit/afeb1a9))
### Features
* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([f7578a4](https://github.com/quentin-ol/ngx-openlayers/commit/f7578a4))
* **view:** add zoom change output ([884429f](https://github.com/quentin-ol/ngx-openlayers/commit/884429f))
# [1.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...1.0.0-next.0) (2018-09-21)
### Features
* **demo:** add example of a cursor position ([9a8988e](https://github.com/quentin-ol/ngx-openlayers/commit/9a8988e))
* **demo:** add example of geojson feature : point, polygon, linestring ([367c72d](https://github.com/quentin-ol/ngx-openlayers/commit/367c72d))
* **demo:** add example of map position with longitude, latitude and zoom ([251bbf7](https://github.com/quentin-ol/ngx-openlayers/commit/251bbf7))
* **demo:** add example to display geometry of a geojson file ([fe977e6](https://github.com/quentin-ol/ngx-openlayers/commit/fe977e6))
* **demo:** example change color on hover or on select ([2e7bda4](https://github.com/quentin-ol/ngx-openlayers/commit/2e7bda4))
* **demo:** example draw a polygon ([2737e6b](https://github.com/quentin-ol/ngx-openlayers/commit/2737e6b))
* **demo:** example modify polygon ([18c95fa](https://github.com/quentin-ol/ngx-openlayers/commit/18c95fa))
* **demo:** example of marker with svg ([b5f57b3](https://github.com/quentin-ol/ngx-openlayers/commit/b5f57b3))
* **demo:** example of overlay ([b7749f9](https://github.com/quentin-ol/ngx-openlayers/commit/b7749f9))
* **demo:** example of side by side ([4b5b08b](https://github.com/quentin-ol/ngx-openlayers/commit/4b5b08b))
* **demo:** example of swipe ([9aa4dab](https://github.com/quentin-ol/ngx-openlayers/commit/9aa4dab))
## [0.8.22](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.21...v0.8.22) (2018-07-02)
### Bug Fixes
* **example.raster:** allow example project to work in --aot mode ([ca0c9bb](https://github.com/quentin-ol/ngx-openlayers/commit/ca0c9bb))
### Features
* **sources:** add source tileutfgrid component ([#179](https://github.com/quentin-ol/ngx-openlayers/issues/179)) ([d946755](https://github.com/quentin-ol/ngx-openlayers/commit/d946755))
## [0.8.21](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.20...v0.8.21) (2018-06-08)
### Features
* **raster:** add component and demo ([#171](https://github.com/quentin-ol/ngx-openlayers/issues/171)) ([0b40bbd](https://github.com/quentin-ol/ngx-openlayers/commit/0b40bbd))
## [0.8.20](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.19...v0.8.20) (2018-05-04)
### Features
* **modify-interaction:** add source input ([#146](https://github.com/quentin-ol/ngx-openlayers/issues/146)) ([d27d6ba](https://github.com/quentin-ol/ngx-openlayers/commit/d27d6ba))
## [0.8.19](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.18...v0.8.19) (2018-04-23)
### Features
* **source:** add geaometryFunction input to cluster component ([#167](https://github.com/quentin-ol/ngx-openlayers/issues/167)) ([8962034](https://github.com/quentin-ol/ngx-openlayers/commit/8962034))
## [0.8.18](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.17...v0.8.18) (2018-04-12)
### Features
* **tileJSON:** add tileJSON component ([d65e7b2](https://github.com/quentin-ol/ngx-openlayers/commit/d65e7b2))
## [0.8.17](https://github.com/quentin-ol/ngx-openlayers/compare/fd0ae4b...v0.8.17) (2018-03-16)
### Bug Fixes
* added componentType property to ViewComponent ([692e00d](https://github.com/quentin-ol/ngx-openlayers/commit/692e00d))
* addition of text style component to the export list ([9a14460](https://github.com/quentin-ol/ngx-openlayers/commit/9a14460))
* issues related to calling function makeDecorator with AOT ([205bb49](https://github.com/quentin-ol/ngx-openlayers/commit/205bb49))
* license is MPL-2.0. Was incorrectly reported as MIT, though it do not differ much ([a6e257a](https://github.com/quentin-ol/ngx-openlayers/commit/a6e257a))
* minor fixes in README.md ([7c7d764](https://github.com/quentin-ol/ngx-openlayers/commit/7c7d764))
* setting an ID evaluation to a "falsy" statement is now possible. Prior to this commit, setting an ID to 0 failed. ([7473a5c](https://github.com/quentin-ol/ngx-openlayers/commit/7473a5c))
* **types:** upgrade types of OpenLayers ([e36b8aa](https://github.com/quentin-ol/ngx-openlayers/commit/e36b8aa))
* the example icon is now renamed marker.png ([fd0ae4b](https://github.com/quentin-ol/ngx-openlayers/commit/fd0ae4b))
* **devDep:** limit typescript version and match types for OpenLayers ([af4b2da](https://github.com/quentin-ol/ngx-openlayers/commit/af4b2da))
* **example:** add form to package.json ([984da63](https://github.com/quentin-ol/ngx-openlayers/commit/984da63))
* **example:** add value `width` which is mandatory for aot build of example ([b70a698](https://github.com/quentin-ol/ngx-openlayers/commit/b70a698))
* **layer:** remove useless input and change layer component init ([6f512dc](https://github.com/quentin-ol/ngx-openlayers/commit/6f512dc))
* **source.XYZ:** instantiate XYZ source even if no tileGrid is provided ([8c34e00](https://github.com/quentin-ol/ngx-openlayers/commit/8c34e00))
* **style:** trigger update onChange ([6bc94e7](https://github.com/quentin-ol/ngx-openlayers/commit/6bc94e7))
* **view:** set animation on zoom changes ([8d73c38](https://github.com/quentin-ol/ngx-openlayers/commit/8d73c38))
### Features
* **cluster:** add cluster component and demo ([34a1688](https://github.com/quentin-ol/ngx-openlayers/commit/34a1688))
* **example:** move to a new version of the example project ([40ce2d5](https://github.com/quentin-ol/ngx-openlayers/commit/40ce2d5))
* **graticule:** Adding GraticuleComponent ([5adc320](https://github.com/quentin-ol/ngx-openlayers/commit/5adc320))
* **Layer:** add pre and post compose inputs and change behavior for all Layers ([4ceef04](https://github.com/quentin-ol/ngx-openlayers/commit/4ceef04))
* **layergroup:** add LayerGroupComponent ([c1f2513](https://github.com/quentin-ol/ngx-openlayers/commit/c1f2513))
* **ModifyInteractionComponent:** add modify interaction to be able to re-draw feature(s) ([e3625b5](https://github.com/quentin-ol/ngx-openlayers/commit/e3625b5))
* **scaleline:** add input units to scaleline component ([26a9a5c](https://github.com/quentin-ol/ngx-openlayers/commit/26a9a5c))
* **SelectInteractionComponent:** add new interaction to ba able to ([4017117](https://github.com/quentin-ol/ngx-openlayers/commit/4017117))
* **Source:OSM:** Use SourceXYZComponent as parent class instead of SourceComponent ([92d9519](https://github.com/quentin-ol/ngx-openlayers/commit/92d9519))
* **source:wmts:** refresh layer source when url change ([7730673](https://github.com/quentin-ol/ngx-openlayers/commit/7730673))
* **Source:XYZ:** add tilegrid childComponent ([c732980](https://github.com/quentin-ol/ngx-openlayers/commit/c732980))
* **source.imagestatic:** add image static source ([4aa6f3a](https://github.com/quentin-ol/ngx-openlayers/commit/4aa6f3a))
* **sources:** trigger refresh on property changes for XYZ Component ([1fe5219](https://github.com/quentin-ol/ngx-openlayers/commit/1fe5219))
* **SourceTileWMTSComponent:** add wmts source component and wmts grid tile component ([9e029ed](https://github.com/quentin-ol/ngx-openlayers/commit/9e029ed))
* **SourceXYZComponent:** add tileGrid input ([390add8](https://github.com/quentin-ol/ngx-openlayers/commit/390add8))
* **SourceXYZComponent:** add tileLoadFunction input ([f76321e](https://github.com/quentin-ol/ngx-openlayers/commit/f76321e))
* **tilegrid:** Allow resolutions and origin, and use new tilegrid.Tilegrid constructor ([95db90c](https://github.com/quentin-ol/ngx-openlayers/commit/95db90c))
* **TranslateInteractionComponent:** add interaction to be able to move feature(s) ([1d265ae](https://github.com/quentin-ol/ngx-openlayers/commit/1d265ae))

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

@@ -9,16 +9,29 @@ module.exports = function (config) {
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-coverage'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/ng-openlayers'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/ngx-openlayers'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'lcovonly' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@@ -27,6 +40,6 @@ module.exports = function (config) {
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true,
restartOnFileChange: true
});
};

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

@@ -1,6 +1,6 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ng-openlayers",
"dest": "../../dist/ngx-openlayers",
"assets": [
"ngcc.config.js"
],

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

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

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

@@ -1,54 +1,59 @@
{
"name": "ng-openlayers",
"version": "18.0.0",
"name": "@farmmaps/ng-openlayers",
"version": "20.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ng-openlayers",
"version": "18.0.0",
"license": "MPL-2.0",
"dependencies": {
"tslib": "^2.3.0"
},
"name": "@farmmaps/ng-openlayers",
"version": "20.0.1",
"peerDependencies": {
"@angular/common": "^18.2.3",
"@angular/core": "^18.2.3",
"ol": "^8.2.0"
"@angular/common": ">=19.0.0 <=20.x.x",
"@angular/core": ">=19.0.0 <=20.x.x",
"ol": "~10.7.0"
}
},
"node_modules/@angular/common": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
"integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
"version": "20.3.16",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
"integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/core": "18.2.3",
"@angular/core": "20.3.16",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/core": {
"version": "18.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
"integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
"version": "20.3.16",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
"integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": "^18.19.1 || ^20.11.1 || >=22.0.0"
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
},
"peerDependencies": {
"@angular/compiler": "20.3.16",
"rxjs": "^6.5.3 || ^7.4.0",
"zone.js": "~0.14.10"
"zone.js": "~0.15.0"
},
"peerDependenciesMeta": {
"@angular/compiler": {
"optional": true
},
"zone.js": {
"optional": true
}
}
},
"node_modules/@petamoriken/float16": {
@@ -58,48 +63,17 @@
"license": "MIT",
"peer": true
},
"node_modules/color-name": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
"integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12.20"
}
},
"node_modules/color-parse": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
"integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
"license": "MIT",
"peer": true,
"dependencies": {
"color-name": "^2.0.0"
}
},
"node_modules/color-rgba": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
"integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
"license": "MIT",
"peer": true,
"dependencies": {
"color-parse": "^2.0.0",
"color-space": "^2.0.0"
}
},
"node_modules/color-space": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
"integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==",
"node_modules/@types/rbush": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
"integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==",
"license": "MIT",
"peer": true
},
"node_modules/earcut": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
"integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
"license": "ISC",
"peer": true
},
@@ -123,27 +97,6 @@
"node": ">=10.19"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "BSD-3-Clause",
"peer": true
},
"node_modules/lerc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
@@ -152,18 +105,17 @@
"peer": true
},
"node_modules/ol": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
"integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/ol/-/ol-10.7.0.tgz",
"integrity": "sha512-122U5gamPqNgLpLOkogFJhgpywvd/5en2kETIDW+Ubfi9lPnZ0G9HWRdG+CX0oP8od2d6u6ky3eewIYYlrVczw==",
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"color-rgba": "^3.0.0",
"color-space": "^2.0.1",
"earcut": "^2.2.3",
"geotiff": "^2.0.7",
"pbf": "3.2.1",
"rbush": "^3.0.1"
"@types/rbush": "4.0.0",
"earcut": "^3.0.0",
"geotiff": "^2.1.3",
"pbf": "4.0.1",
"rbush": "^4.0.0"
},
"funding": {
"type": "opencollective",
@@ -185,13 +137,12 @@
"peer": true
},
"node_modules/pbf": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
"license": "BSD-3-Clause",
"peer": true,
"dependencies": {
"ieee754": "^1.1.12",
"resolve-protobuf-schema": "^2.1.0"
},
"bin": {
@@ -219,20 +170,20 @@
}
},
"node_modules/quickselect": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
"license": "ISC",
"peer": true
},
"node_modules/rbush": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
"integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"quickselect": "^2.0.0"
"quickselect": "^3.0.0"
}
},
"node_modules/resolve-protobuf-schema": {
@@ -246,9 +197,9 @@
}
},
"node_modules/rxjs": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
@@ -256,9 +207,11 @@
}
},
"node_modules/tslib": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD",
"peer": true
},
"node_modules/web-worker": {
"version": "1.3.0",
@@ -274,13 +227,6 @@
"license": "CC0-1.0",
"peer": true
},
"node_modules/zone.js": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
"integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
"license": "MIT",
"peer": true
},
"node_modules/zstddec": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",

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

@@ -1,38 +1,22 @@
{
"name": "@farmmaps/ng-openlayers",
"version": "18.0.0",
"description": "OpenLayers library for Angular (migrated from angular 17 to 18)",
"author": "Kamil Furtak (kamil.furtak@gmail.com) / Farmmaps",
"version": "20.0.1",
"description": "Ngx openLayers library for Angular",
"author": "Quentin Lampin / Farmmaps",
"publishConfig": {
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"bugs": {
"url": "https://github.com/kamilfurtak/ng-openlayers/issues"
"repository": {
"type": "git",
"url": "https://github.com/quentinlampin/ngx-openlayers.git"
},
"homepage": "https://github.com/kamilfurtak/ng-openlayers",
"keywords": [
"ngx-openlayers",
"angular",
"angular18",
"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": "19.2.18",
"@angular/core": "19.2.18",
"ol": "^8.2.0"
"@angular/common": ">=19.0.0 <=20.x.x",
"@angular/core": ">=19.0.0 <=20.x.x",
"ol": "~10.7.0"
}
}

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

@@ -1,16 +1,19 @@
import { Component, ElementRef, OnInit } from '@angular/core';
import { Component, ElementRef, OnInit, inject } from '@angular/core';
import { Attribution } from 'ol/control';
@Component({
selector: 'aol-attribution',
template: '<ng-content></ng-content>',
standalone: false
standalone: true,
})
export class AttributionComponent implements OnInit {
label: string;
private elementRef = inject(ElementRef);
constructor(private elementRef: ElementRef) {}
instance: Attribution;
html: string;
ngOnInit() {
this.label = this.elementRef.nativeElement.innerHTML;
ngOnInit(): void {
this.html = this.elementRef.nativeElement.innerHTML;
this.instance = new Attribution();
}
}

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

@@ -1,24 +1,24 @@
import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
import { SourceComponent } from './sources/source.component';
import { AfterViewInit, Component, ContentChildren, QueryList, inject } from '@angular/core';
import { AttributionComponent } from './attribution.component';
import { SourceComponent } from './sources/source.component';
@Component({
selector: 'aol-attributions',
template: '<ng-content></ng-content>',
standalone: false
standalone: true,
})
export class AttributionsComponent implements AfterViewInit {
private source = inject(SourceComponent, { host: true });
@ContentChildren(AttributionComponent)
attributions: QueryList<AttributionComponent>;
instance: Array<string>;
constructor(@Host() private source: SourceComponent) {}
/* we can do this at the very end */
ngAfterViewInit() {
ngAfterViewInit(): void {
if (this.attributions.length) {
this.instance = this.attributions.map((cmp) => cmp.label);
this.instance = this.attributions.map((cmp) => cmp.html);
// console.log('setting attributions:', this.instance);
this.source.instance.setAttributions(this.instance);
}

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

@@ -1,90 +1,88 @@
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 { Component, Input, OnChanges, OnInit, inject } from '@angular/core';
import { Coordinate } from 'ol/coordinate';
import { transform } from 'ol/proj';
import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
import { MapComponent } from './map.component';
@Component({
selector: 'aol-collection-coordinates',
template: ` <div class="aol-collection-coordinates"></div> `,
standalone: false
standalone: true,
})
export class CollectionCoordinatesComponent implements OnChanges, OnInit {
private map = inject(MapComponent);
@Input()
coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
@Input()
srid = 'EPSG:3857';
private host: any;
private readonly host:
| GeometryLinestringComponent
| GeometryPolygonComponent
| GeometryMultiPointComponent
| GeometryMultiLinestringComponent
| GeometryMultiPolygonComponent;
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;
constructor() {
const geometryLinestring = inject(GeometryLinestringComponent, { optional: true });
const geometryPolygon = inject(GeometryPolygonComponent, { optional: true });
const geometryMultipoint = inject(GeometryMultiPointComponent, { optional: true });
const geometryMultilinestring = inject(GeometryMultiLinestringComponent, { optional: true });
const geometryMultipolygon = inject(GeometryMultiPolygonComponent, { optional: true });
const geometryComponent =
geometryLinestring ??
geometryPolygon ??
geometryMultipoint ??
geometryMultilinestring ??
geometryMultipolygon ??
undefined;
if (geometryComponent) {
this.host = geometryComponent;
} else {
throw new Error('aol-collection-coordinates must be a child of a geometry component');
}
}
ngOnInit() {
ngOnInit(): void {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
this.transformCoordinates();
}
private onMapViewChanged(event) {
private onMapViewChanged(event): void {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
private transformCoordinates(): void {
if (this.srid === this.mapSrid) {
transformedCoordinates = this.coordinates;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.host.instance.setCoordinates(this.coordinates as any[]);
} else if (this.host instanceof GeometryLinestringComponent || this.host instanceof GeometryMultiPointComponent) {
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid))
);
} else if (this.host instanceof GeometryPolygonComponent || this.host instanceof GeometryMultiLinestringComponent) {
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[][]).map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
);
} 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) =>
this.host.instance.setCoordinates(
(this.coordinates as Coordinate[][][]).map((ccc) =>
ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
)
);
break;
}
}
this.host.instance.setCoordinates(transformedCoordinates);
}
}

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

@@ -1,10 +1,10 @@
import { Component, ElementRef } from '@angular/core';
import { Component, ElementRef, inject } from '@angular/core';
@Component({
selector: 'aol-content',
template: '<ng-content></ng-content>',
standalone: false
standalone: true,
})
export class ContentComponent {
constructor(public elementRef: ElementRef) {}
readonly elementRef = inject(ElementRef);
}

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

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

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

@@ -1,24 +1,24 @@
import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
import { Component, ContentChild, OnDestroy, OnInit, inject } from '@angular/core';
import { Control } from 'ol/control';
import { MapComponent } from '../map.component';
import { ContentComponent } from '../content.component';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
public componentType = 'control';
componentType = 'control';
instance: Control;
element: HTMLElement;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
if (this.content) {
this.element = this.content.elementRef.nativeElement;
this.instance = new Control(this);
@@ -26,7 +26,7 @@ export class ControlComponent implements OnInit, OnDestroy {
}
}
ngOnDestroy() {
ngOnDestroy(): void {
if (this.instance) {
this.map.instance.removeControl(this.instance);
}

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

@@ -1,6 +1,6 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Control, defaults } from 'ol/control';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Collection } from 'ol';
import { Control, defaults } from 'ol/control';
import { Options as AttributionOptions } from 'ol/control/Attribution';
import { Options as RotateOptions } from 'ol/control/Rotate';
import { Options as ZoomOptions } from 'ol/control/Zoom';
@@ -10,9 +10,11 @@ import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-defaults',
template: '',
standalone: false
standalone: true,
})
export class DefaultControlComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
attribution: boolean;
@Input()
@@ -28,15 +30,13 @@ export class DefaultControlComponent implements OnInit, OnDestroy {
instance: Collection<Control>;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
// console.log('ol.control.defaults init: ', this);
this.instance = defaults(this);
this.instance.forEach((c) => this.map.instance.addControl(c));
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-defaults');
this.instance.forEach((c) => this.map.instance.removeControl(c));
}

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { FullScreen } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-fullscreen',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlFullScreenComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -21,16 +23,12 @@ export class ControlFullScreenComponent implements OnInit, OnDestroy {
instance: FullScreen;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-fullscreen');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new FullScreen(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-fullscreen');
this.map.instance.removeControl(this.instance);
}

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

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

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

@@ -1,15 +1,17 @@
import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Layer } from 'ol/layer';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
import { View } from 'ol';
import { OverviewMap } from 'ol/control';
import { Layer } from 'ol/layer';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-overviewmap',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
private map = inject(MapComponent);
@Input()
collapsed: boolean;
@Input()
@@ -29,24 +31,22 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
instance: OverviewMap;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeControl(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance != null && changes.hasOwnProperty('view')) {
this.reloadInstance();
}
}
private reloadInstance() {
private reloadInstance(): void {
this.map.instance.removeControl(this.instance);
this.instance = new OverviewMap(this);
this.map.instance.addControl(this.instance);

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Rotate } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-rotate',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlRotateComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -21,16 +23,12 @@ export class ControlRotateComponent implements OnInit, OnDestroy {
instance: Rotate;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-rotate');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Rotate(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-rotate');
this.map.instance.removeControl(this.instance);
}

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

@@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ScaleLine } from 'ol/control';
import { MapComponent } from '../map.component';
import { Units } from 'ol/control/ScaleLine';
@@ -6,22 +6,23 @@ import { Units } from 'ol/control/ScaleLine';
@Component({
selector: 'aol-control-scaleline',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlScaleLineComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
units: Units;
instance: ScaleLine;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new ScaleLine(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-scaleline');
this.map.instance.removeControl(this.instance);
}
}

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Zoom } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoom',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlZoomComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -23,16 +25,12 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
instance: Zoom;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoom');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Zoom(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoom');
this.map.instance.removeControl(this.instance);
}

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ZoomSlider } from 'ol/control';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoomslider',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlZoomSliderComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -19,16 +21,12 @@ export class ControlZoomSliderComponent implements OnInit, OnDestroy {
instance: ZoomSlider;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomslider');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ZoomSlider(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoomslider');
this.map.instance.removeControl(this.instance);
}

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

@@ -1,14 +1,16 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { ZoomToExtent } from 'ol/control';
import { MapComponent } from '../map.component';
import { Extent } from 'ol/extent';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-control-zoomtoextent',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -20,16 +22,12 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
instance: ZoomToExtent;
constructor(private map: MapComponent) {
// console.log('instancing aol-control-zoomtoextent');
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ZoomToExtent(this);
this.map.instance.addControl(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-control-zoomtoextent');
this.map.instance.removeControl(this.instance);
}

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

@@ -1,17 +1,19 @@
import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
import { Component, Input, OnChanges, OnInit, inject } 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 { GeometryPointComponent } from './geom/geometrypoint.component';
import { MapComponent } from './map.component';
import { OverlayComponent } from './overlay.component';
import { ViewComponent } from './view.component';
@Component({
selector: 'aol-coordinate',
template: ` <div class="aol-coordinate"></div> `,
standalone: false
standalone: true,
})
export class CoordinateComponent implements OnChanges, OnInit {
private map = inject(MapComponent);
@Input()
x: number;
@Input()
@@ -19,16 +21,15 @@ export class CoordinateComponent implements OnChanges, OnInit {
@Input()
srid = 'EPSG:3857';
private host: any;
private host: ViewComponent | GeometryPointComponent | GeometryCircleComponent | OverlayComponent;
private mapSrid = 'EPSG:3857';
constructor(
private map: MapComponent,
@Optional() viewHost: ViewComponent,
@Optional() geometryPointHost: GeometryPointComponent,
@Optional() geometryCircleHost: GeometryCircleComponent,
@Optional() overlayHost: OverlayComponent
) {
constructor() {
const viewHost = inject(ViewComponent, { optional: true });
const geometryPointHost = inject(GeometryPointComponent, { optional: true });
const geometryCircleHost = inject(GeometryCircleComponent, { optional: true });
const overlayHost = inject(OverlayComponent, { optional: true });
// console.log('instancing aol-coordinate');
if (geometryPointHost !== null) {
this.host = geometryPointHost;
@@ -41,22 +42,22 @@ export class CoordinateComponent implements OnChanges, OnInit {
}
}
ngOnInit() {
ngOnInit(): void {
this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
this.mapSrid = this.map.instance.getView().getProjection().getCode();
this.transformCoordinates();
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
this.transformCoordinates();
}
private onMapViewChanged(event) {
private onMapViewChanged(event): void {
this.mapSrid = event.target.get(event.key).getProjection().getCode();
this.transformCoordinates();
}
private transformCoordinates() {
private transformCoordinates(): void {
let transformedCoordinates: number[];
if (this.srid === this.mapSrid) {
@@ -65,17 +66,12 @@ export class CoordinateComponent implements OnChanges, OnInit {
transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
}
switch (this.host.componentType) {
case 'geometry-point':
if (this.host instanceof GeometryPointComponent) {
this.host.instance.setCoordinates(transformedCoordinates);
break;
case 'geometry-circle':
case 'view':
this.host.instance.setCenter(transformedCoordinates);
break;
case 'overlay':
} else if (this.host instanceof OverlayComponent) {
this.host.instance.setPosition(transformedCoordinates);
break;
} else {
this.host.instance.setCenter(transformedCoordinates);
}
}
}

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

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

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

@@ -1,6 +1,7 @@
import Feature from 'ol/format/Feature';
import FeatureFormat from 'ol/format/Feature';
import RenderFeature from 'ol/render/Feature';
export class FormatComponent {
public instance: Feature;
public instance: FeatureFormat<RenderFeature>;
public componentType = 'format';
}

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

@@ -1,17 +1,18 @@
import { Component, forwardRef, Input } from '@angular/core';
import { FormatComponent } from './format.component';
import { MVT } from 'ol/format';
import { FeatureClass } from 'ol/Feature';
import { FormatComponent } from './format.component';
import RenderFeature from 'ol/render/Feature';
import { FeatureToFeatureClass } from 'ol/format/Feature';
@Component({
selector: 'aol-format-mvt',
template: '',
providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
standalone: false
standalone: true,
})
export class FormatMVTComponent extends FormatComponent {
@Input()
featureClass: FeatureClass;
featureClass: FeatureToFeatureClass<RenderFeature>;
@Input()
geometryName: string;
@Input()

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

@@ -1,15 +1,16 @@
import { Component, Input, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component, Input } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryCircleComponent extends SimpleGeometryComponent {
componentType = 'geometry-circle';
instance = new Circle([0, 0]);
@Input()
get radius(): number {
return this.instance.getRadius();
@@ -17,13 +18,4 @@ export class GeometryCircleComponent extends SimpleGeometryComponent implements
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]);
}
}

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

@@ -1,27 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryLinestringComponent extends SimpleGeometryComponent {
public componentType = 'geometry-linestring';
public instance: LineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new LineString([
public instance = new LineString([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
}

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

@@ -1,29 +1,18 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiLinestringComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multilinestring';
public instance: MultiLineString;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiLineString([
public instance = new MultiLineString([
[
[0, 0],
[1, 1],
],
]);
super.ngOnInit();
}
}

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

@@ -1,27 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiPointComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multipoint';
public instance: MultiPoint;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPoint([
public instance = new MultiPoint([
[0, 0],
[1, 1],
]);
super.ngOnInit();
}
}

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

@@ -1,24 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryMultiPolygonComponent extends SimpleGeometryComponent {
public componentType = 'geometry-multipolygon';
public instance: MultiPolygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new MultiPolygon([
public instance = new MultiPolygon([
[
[
[0, 0],
@@ -27,6 +18,4 @@ export class GeometryMultiPolygonComponent extends SimpleGeometryComponent imple
],
],
]);
super.ngOnInit();
}
}

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

@@ -1,24 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryPointComponent extends SimpleGeometryComponent {
public componentType = 'geometry-point';
public instance: Point;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Point([0, 0]);
super.ngOnInit();
}
public instance = new Point([0, 0]);
}

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

@@ -1,30 +1,19 @@
import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature.component';
import { Component } from '@angular/core';
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> `,
standalone: false
standalone: true,
})
export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
export class GeometryPolygonComponent extends SimpleGeometryComponent {
public componentType = 'geometry-polygon';
public instance: Polygon;
constructor(map: MapComponent, host: FeatureComponent) {
super(map, host);
}
ngOnInit() {
this.instance = new Polygon([
public instance = new Polygon([
[
[0, 0],
[1, 1],
[0, 1],
],
]);
super.ngOnInit();
}
}

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

@@ -1,22 +1,19 @@
import { Input, OnInit, Directive } from '@angular/core';
import { Directive, inject, Input, OnInit } from '@angular/core';
import SimpleGeometry from 'ol/geom/SimpleGeometry';
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';
instance: SimpleGeometry;
componentType = 'simple-geometry';
protected constructor(
protected map: MapComponent,
protected host: FeatureComponent
) {}
protected readonly map = inject(MapComponent);
protected readonly host = inject(FeatureComponent);
ngOnInit() {
ngOnInit(): void {
this.host.instance.setGeometry(this.instance);
}
}

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

@@ -1,14 +1,17 @@
import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
import { Graticule } from 'ol';
import { Stroke } from 'ol/style';
import { MapComponent } from './map.component';
import { Options } from 'ol/layer/Graticule';
@Component({
selector: 'aol-graticule',
template: '<ng-content></ng-content>',
standalone: false
standalone: true,
})
export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
private map = inject(MapComponent);
@Input()
strokeStyle: Stroke;
@Input()
@@ -18,24 +21,17 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
@Input()
latLabelPosition: number;
instance: any;
public componentType = 'graticule';
constructor(private map: MapComponent) {}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
instance: Graticule;
componentType = 'graticule';
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Options = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
}
}
if (properties) {
this.instance = new Graticule(properties);
}

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

@@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { defaults, Interaction } from 'ol/interaction';
import { Collection } from 'ol';
import { MapComponent } from '../map.component';
@@ -6,42 +6,19 @@ import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-default',
template: '',
standalone: false
standalone: true,
})
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;
private map = inject(MapComponent);
instance: Collection<Interaction>;
constructor(private map: MapComponent) {}
ngOnInit() {
this.instance = defaults(this);
ngOnInit(): void {
this.instance = defaults();
this.instance.forEach((i) => this.map.instance.addInteraction(i));
}
ngOnDestroy() {
ngOnDestroy(): void {
this.instance.forEach((i) => this.map.instance.removeInteraction(i));
}
}

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { DoubleClickZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-doubleclickzoom',
template: '',
standalone: false
standalone: true,
})
export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -15,14 +17,12 @@ export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
instance: DoubleClickZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DoubleClickZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,15 +1,17 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { DragAndDrop } from 'ol/interaction';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import FeatureFormat from 'ol/format/Feature';
import { MapComponent } from '../map.component';
import { DragAndDrop } from 'ol/interaction';
import { ProjectionLike } from 'ol/proj';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-draganddrop',
template: '',
standalone: false
standalone: true,
})
export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
formatConstructors: FeatureFormat[];
@Input()
@@ -19,14 +21,12 @@ export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
instance: DragAndDrop;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragAndDrop(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,15 +1,17 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragBox } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragBox } from 'ol/interaction';
import { EndCondition } from 'ol/interaction/DragBox';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-dragbox',
template: '',
standalone: false
standalone: true,
})
export class DragBoxInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -19,14 +21,12 @@ export class DragBoxInteractionComponent implements OnInit, OnDestroy {
instance: DragBox;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragBox(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,15 +1,17 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { DragPan } from 'ol/interaction';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import Kinetic from 'ol/Kinetic';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
import { DragPan } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-dragpan',
template: '',
standalone: false
standalone: true,
})
export class DragPanInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -17,14 +19,12 @@ export class DragPanInteractionComponent implements OnInit, OnDestroy {
instance: DragPan;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragPan(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragRotate } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotate',
template: '',
standalone: false
standalone: true,
})
export class DragRotateInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -16,14 +18,12 @@ export class DragRotateInteractionComponent implements OnInit, OnDestroy {
instance: DragRotate;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragRotate(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragRotateAndZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragrotateandzoom',
template: '',
standalone: false
standalone: true,
})
export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition: Condition;
@Input()
@@ -16,14 +18,12 @@ export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy
instance: DragRotateAndZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragRotateAndZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,14 +1,16 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Condition } from 'ol/events/condition';
import { DragZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { Condition } from 'ol/events/condition';
@Component({
selector: 'aol-interaction-dragzoom',
template: '',
standalone: false
standalone: true,
})
export class DragZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
className: string;
@Input()
@@ -20,14 +22,12 @@ export class DragZoomInteractionComponent implements OnInit, OnDestroy {
instance: DragZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new DragZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,22 +1,23 @@
import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
import { MapComponent } from '../map.component';
import { Draw } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Condition } from 'ol/events/condition';
import { Draw } from 'ol/interaction';
import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
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 { MapComponent } from '../map.component';
import { Type } from 'ol/geom/Geometry';
import { ObjectEvent } from 'ol/Object';
import BaseEvent from 'ol/events/Event';
@Component({
selector: 'aol-interaction-draw',
template: '',
standalone: false
standalone: true,
})
export class DrawInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
clickTolerance?: number;
@Input()
@@ -53,33 +54,25 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
@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() {
ngOnInit(): void {
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() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,22 +1,22 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Modify } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
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';
import { Condition } from 'ol/events/condition';
import { Modify } from 'ol/interaction';
import { ModifyEvent } from 'ol/interaction/Modify';
import { Vector } from 'ol/source';
import { Style } from 'ol/style';
import { StyleFunction } from 'ol/style/Style';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-modify',
template: '',
standalone: false
standalone: true,
})
export class ModifyInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
condition?: Condition;
@Input()
@@ -33,34 +33,29 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
source?: Vector;
@Output()
olChange = new EventEmitter<DrawEvent>();
modifyEnd = new EventEmitter<ModifyEvent>();
@Output()
modifyStart = new EventEmitter<ModifyEvent>();
@Output()
olChange = new EventEmitter<ModifyEvent>();
@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() {
ngOnInit(): void {
this.instance = new Modify(this);
this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
this.instance.on('change', (event: ModifyEvent) => 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.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,13 +1,15 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { MouseWheelZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-mousewheelzoom',
template: '',
standalone: false
standalone: true,
})
export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -17,14 +19,12 @@ export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
instance: MouseWheelZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new MouseWheelZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,13 +1,15 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { PinchZoom } from 'ol/interaction';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-pinchzoom',
template: '',
standalone: false
standalone: true,
})
export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
duration: number;
@Input()
@@ -15,14 +17,12 @@ export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
instance: PinchZoom;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
this.instance = new PinchZoom(this);
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,21 +1,22 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MapComponent } from '../map.component';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Condition } from 'ol/events/condition';
import { Select } from 'ol/interaction';
import { FilterFunction, SelectEvent } from 'ol/interaction/Select';
import { Layer } from 'ol/layer';
import { Style } from 'ol/style';
import { 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';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-select',
template: '',
standalone: false
standalone: true,
})
export class SelectInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
addCondition?: Condition;
@Input()
@@ -40,30 +41,23 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
@Output()
olChange = new EventEmitter<SelectEvent>();
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
@Output()
olError = new EventEmitter<BaseEvent>();
olSelect = new EventEmitter<SelectEvent>();
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
@Output()
olSelect = new EventEmitter<SelectEvent>();
instance: Select;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
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.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

66
projects/ng-openlayers/src/lib/interactions/snap.component.ts Normal file
View File

@@ -0,0 +1,66 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
import { Collection, Feature } from 'ol';
import { ObjectEvent } from 'ol/Object';
import { Snap } from 'ol/interaction';
import { MapComponent } from '../map.component';
import { SnapEvent } from 'ol/events/SnapEvent';
import { Segmenters } from 'ol/interaction/Snap';
import VectorSource from 'ol/source/Vector';
import { Geometry } from 'ol/geom';
@Component({
selector: 'aol-interaction-snap',
template: '',
standalone: true,
})
export class SnapInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
features?: Collection<Feature>;
@Input()
source?: VectorSource<Feature<Geometry>>;
@Input()
edge?: boolean;
@Input()
vertex?: boolean;
@Input()
intersection?: boolean;
@Input()
pixelTolerance?: number;
@Input()
segmenters?: Segmenters;
@Output()
olChange: EventEmitter<SnapEvent>;
@Output()
propertyChange: EventEmitter<ObjectEvent>;
@Output()
snap: EventEmitter<SnapEvent>;
@Output()
unsnap: EventEmitter<SnapEvent>;
instance: Snap;
constructor() {
this.olChange = new EventEmitter<SnapEvent>();
this.propertyChange = new EventEmitter<ObjectEvent>();
this.snap = new EventEmitter<SnapEvent>();
this.unsnap = new EventEmitter<SnapEvent>();
}
ngOnInit(): void {
this.instance = new Snap(this);
this.instance.on('change', (event: SnapEvent) => this.olChange.emit(event));
this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
this.instance.on('snap', (event: SnapEvent) => this.snap.emit(event));
this.instance.on('unsnap', (event: SnapEvent) => this.unsnap.emit(event));
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,18 +1,19 @@
import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Translate } from 'ol/interaction';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
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';
import { Translate } from 'ol/interaction';
import { TranslateEvent } from 'ol/interaction/Translate';
import { Layer } from 'ol/layer';
import { MapComponent } from '../map.component';
@Component({
selector: 'aol-interaction-translate',
template: '',
standalone: false
standalone: true,
})
export class TranslateInteractionComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@Input()
features?: Collection<Feature>;
@Input()
@@ -21,30 +22,30 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
hitTolerance?: number;
@Output()
olChange = new EventEmitter<BaseEvent>();
olChange: EventEmitter<TranslateEvent>;
@Output()
olChangeActive = new EventEmitter<ObjectEvent>();
propertyChange: EventEmitter<ObjectEvent>;
@Output()
olError = new EventEmitter<BaseEvent>();
translateEnd: EventEmitter<TranslateEvent>;
@Output()
propertyChange = new EventEmitter<ObjectEvent>();
translateStart: EventEmitter<TranslateEvent>;
@Output()
translateEnd = new EventEmitter<TranslateEvent>();
@Output()
translateStart = new EventEmitter<TranslateEvent>();
@Output()
translating = new EventEmitter<TranslateEvent>();
translating: EventEmitter<TranslateEvent>;
instance: Translate;
constructor(private map: MapComponent) {}
constructor() {
this.olChange = new EventEmitter<TranslateEvent>();
this.propertyChange = new EventEmitter<ObjectEvent>();
this.translateEnd = new EventEmitter<TranslateEvent>();
this.translateStart = new EventEmitter<TranslateEvent>();
this.translating = new EventEmitter<TranslateEvent>();
}
ngOnInit() {
ngOnInit(): void {
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('change', (event: TranslateEvent) => this.olChange.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));
@@ -53,7 +54,7 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
this.map.instance.addInteraction(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.map.instance.removeInteraction(this.instance);
}
}

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

@@ -1,12 +1,15 @@
import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
import Event from 'ol/events/Event';
import { Directive, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Extent } from 'ol/extent';
import RenderEvent from 'ol/render/Event';
import { MapComponent } from '../map.component';
import { LayerGroupComponent } from './layergroup.component';
import { Extent } from 'ol/extent';
import BaseObject from 'ol/Object';
import Map from 'ol/Map';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
@Input()
className: string;
@Input()
opacity: number;
@Input()
@@ -19,18 +22,32 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
minResolution: number;
@Input()
maxResolution: number;
@Input()
minZoom: number;
@Input()
maxZoom: number;
@Input()
map: Map;
@Input()
properties: {
[x: string]: unknown;
};
@Input()
prerender: (evt: Event) => void;
prerender: (evt: RenderEvent) => void;
@Input()
postrender: (evt: Event) => void;
postrender: (evt: RenderEvent) => void;
public instance: any;
public componentType = 'layer';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
instance: any;
componentType = 'layer';
protected constructor(protected host: MapComponent | LayerGroupComponent) {}
private readonly mapComponent = inject(MapComponent);
private readonly group = inject(LayerGroupComponent, { optional: true });
ngOnInit() {
protected host = this.group || this.mapComponent;
ngOnInit(): void {
if (this.prerender !== null && this.prerender !== undefined) {
this.instance.on('prerender', this.prerender);
}
@@ -40,17 +57,16 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
this.host.instance.getLayers().push(this.instance);
}
ngOnDestroy() {
ngOnDestroy(): void {
this.host.instance.getLayers().remove(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
properties[key] = changes[key].currentValue;
if (key === 'prerender') {
this.instance.un('prerender', changes[key].previousValue);
@@ -61,7 +77,6 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
this.instance.on('postrender', changes[key].currentValue);
}
}
}
// console.log('changes detected in aol-layer, setting new properties: ', properties);
this.instance.setProperties(properties, false);
}

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

@@ -1,28 +1,64 @@
import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
import { Group } from 'ol/layer';
import { LayerComponent } from './layer.component';
import { MapComponent } from '../map.component';
import { Extent } from 'ol/extent';
import BaseObject from 'ol/Object';
import BaseLayer from 'ol/layer/Base';
import Collection from 'ol/Collection';
@Component({
selector: 'aol-layer-group',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
export class LayerGroupComponent implements OnInit, OnDestroy, OnChanges {
@Input()
opacity: number;
@Input()
visible: boolean;
@Input()
extent: Extent;
@Input()
zIndex: number;
@Input()
minResolution: number;
@Input()
maxResolution: number;
@Input()
minZoom: number;
@Input()
maxZoom: number;
@Input()
layers: BaseLayer[] | Collection<BaseLayer>;
@Input()
properties: {
[x: string]: unknown;
};
public instance: Group;
componentType = 'layer';
private readonly map = inject(MapComponent);
private readonly group = inject(LayerGroupComponent, { skipSelf: true, optional: true });
private readonly host = this.group || this.map;
constructor(
map: MapComponent,
@SkipSelf()
@Optional()
group?: LayerGroupComponent
) {
super(group || map);
}
ngOnInit() {
ngOnInit(): void {
// console.log(`creating ol.layer.Group instance with:`, this);
this.instance = new Group(this);
super.ngOnInit();
this.host.instance.getLayers().push(this.instance);
}
ngOnDestroy(): void {
this.host.instance.getLayers().remove(this.instance);
}
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
properties[key] = changes[key].currentValue;
}
this.instance.setProperties(properties, false);
}
}

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

@@ -1,39 +1,18 @@
import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Image } from 'ol/layer';
import { MapComponent } from '../map.component';
import ImageSource from 'ol/source/Image';
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> `,
standalone: false
standalone: true,
})
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;
export class LayerImageComponent extends LayerComponent implements OnInit {
source: ImageSource;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new Image(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

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

@@ -1,31 +1,28 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Tile } from 'ol/layer';
import { MapComponent } from '../map.component';
import TileSource from 'ol/source/Tile';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-tile',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
export class LayerTileComponent extends LayerComponent implements OnInit {
@Input()
preload: number;
@Input()
background: BackgroundColor;
@Input()
useInterimTilesOnError: boolean;
@Input()
cacheSize: number;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
source: TileSource;
ngOnInit() {
// console.log('creating ol.layer.Tile instance with:', this);
ngOnInit(): void {
this.instance = new Tile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

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

@@ -1,40 +1,37 @@
import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
import { MapComponent } from '../map.component';
import { Component, Input, OnInit } from '@angular/core';
import { Vector } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import { Style } from 'ol/style';
import { StyleFunction } from 'ol/style/Style';
import { LayerComponent } from './layer.component';
import { LayerGroupComponent } from './layergroup.component';
import { OrderFunction } from 'ol/render';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-vector',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
export class LayerVectorComponent extends LayerComponent implements OnInit {
@Input()
renderBuffer: number;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
updateWhileAnimating: boolean;
@Input()
updateWhileInteracting: boolean;
@Input()
renderOrder: OrderFunction;
@Input()
declutter: string | number | boolean;
@Input()
background: BackgroundColor;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
source: VectorSource;
ngOnInit() {
// console.log('creating ol.layer.Vector instance with:', this);
ngOnInit(): void {
this.instance = new Vector(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

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

@@ -1,25 +1,24 @@
import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
import { Component, Input, OnInit } 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';
import { LayerComponent } from './layer.component';
import { VectorTileRenderType } from 'ol/layer/VectorTile';
import { OrderFunction } from 'ol/render';
import { BackgroundColor } from 'ol/layer/Base';
@Component({
selector: 'aol-layer-vectortile',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
export class LayerVectorTileComponent extends LayerComponent implements OnInit {
@Input()
renderOrder: OrderFunction;
@Input()
renderBuffer: number;
@Input()
renderMode: any | string;
/* not marked as optional in the typings */
@Input()
renderOrder: (feature1: Feature, feature2: Feature) => number;
renderMode: VectorTileRenderType;
@Input()
style: Style | Style[] | StyleFunction;
@Input()
@@ -27,19 +26,18 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit,
@Input()
updateWhileInteracting: boolean;
@Input()
visible: boolean;
declutter: string | number | boolean;
@Input()
background: BackgroundColor;
@Input()
preload: number;
@Input()
useInterimTilesOnError: boolean;
@Input()
cacheSize: number;
constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
super(group || map);
}
ngOnInit() {
// console.log('creating ol.layer.VectorTile instance with:', this);
ngOnInit(): void {
this.instance = new VectorTile(this);
super.ngOnInit();
}
ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
}
}

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

@@ -1,23 +1,23 @@
import {
Component,
OnInit,
ElementRef,
Input,
Output,
EventEmitter,
AfterViewInit,
SimpleChanges,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
inject,
} from '@angular/core';
import { Map } from 'ol';
import Map from 'ol/Map';
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';
import { Interaction } from 'ol/interaction';
import RenderEvent from 'ol/render/Event';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-map',
@@ -25,9 +25,11 @@ import BaseEvent from 'ol/events/Event';
<div [style.width]="width" [style.height]="height"></div>
<ng-content></ng-content>
`,
standalone: false
standalone: true,
})
export class MapComponent implements OnInit, AfterViewInit, OnChanges {
private host = inject(ElementRef);
@Input()
width = '100%';
@Input()
@@ -46,98 +48,78 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
renderer: 'canvas' | 'webgl';
@Output()
olChange = new EventEmitter<DrawEvent>();
olClick: EventEmitter<MapBrowserEvent>;
@Output()
olChangeLayerGroup = new EventEmitter<ObjectEvent>();
dblClick: EventEmitter<MapBrowserEvent>;
@Output()
olChangeSize = new EventEmitter<ObjectEvent>();
moveStart: EventEmitter<MapEvent>;
@Output()
olChangeTarget = new EventEmitter<ObjectEvent>();
moveEnd: EventEmitter<MapEvent>;
@Output()
olChangeView = new EventEmitter<ObjectEvent>();
pointerDrag: EventEmitter<MapBrowserEvent>;
@Output()
olClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
pointerMove: EventEmitter<MapBrowserEvent>;
@Output()
dblClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
onpostrender: EventEmitter<RenderEvent>;
@Output()
olError = new EventEmitter<BaseEvent>();
postRender: EventEmitter<MapEvent>;
@Output()
loadEnd = new EventEmitter<MapEvent>();
onpreCompose: EventEmitter<RenderEvent>;
@Output()
loadStart = new EventEmitter<MapEvent>();
propertyChange: EventEmitter<BaseEvent>;
@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';
singleClick: EventEmitter<MapBrowserEvent>;
instance: Map;
componentType = 'map';
// we pass empty arrays to not get default controls/interactions because we have our own directives
controls: Control[] = [];
interactions: Interaction[] = [];
constructor(private host: ElementRef) {}
constructor() {
this.olClick = new EventEmitter<MapBrowserEvent>();
this.dblClick = new EventEmitter<MapBrowserEvent>();
this.moveStart = new EventEmitter<MapEvent>();
this.moveEnd = new EventEmitter<MapEvent>();
this.pointerDrag = new EventEmitter<MapBrowserEvent>();
this.pointerMove = new EventEmitter<MapBrowserEvent>();
this.onpostrender = new EventEmitter<RenderEvent>();
this.postRender = new EventEmitter<MapEvent>();
this.onpreCompose = new EventEmitter<RenderEvent>();
this.propertyChange = new EventEmitter<BaseEvent>();
this.singleClick = new EventEmitter<MapBrowserEvent>();
}
ngOnInit() {
ngOnInit(): void {
// 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('click', (event: MapBrowserEvent) => this.olClick.emit(event));
this.instance.on('dblclick', (event: MapBrowserEvent) => this.dblClick.emit(event));
this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
this.instance.on('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('moveend', (event: MapEvent) => this.moveEnd.emit(event));
this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.pointerDrag.emit(event));
this.instance.on('pointermove', (event: MapBrowserEvent) => this.pointerMove.emit(event));
this.instance.on('postrender', (event: RenderEvent) => this.onpostrender.emit(event));
this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
this.instance.on('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));
this.instance.on('precompose', (event: RenderEvent) => this.onpreCompose.emit(event));
this.instance.on('propertychange', (event: BaseEvent) => this.propertyChange.emit(event));
this.instance.on('singleclick', (event: MapBrowserEvent) => this.singleClick.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
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() {
ngAfterViewInit(): void {
this.instance.updateSize();
}
}

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

@@ -1,14 +1,17 @@
import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
import { MapComponent } from './map.component';
import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
import { Component, ContentChild, Input, OnDestroy, OnInit, inject } from '@angular/core';
import { Overlay } from 'ol';
import { PanOptions, Positioning } from 'ol/Overlay';
import { ContentComponent } from './content.component';
import { MapComponent } from './map.component';
@Component({
selector: 'aol-overlay',
template: '<ng-content></ng-content>',
standalone: false
standalone: true,
})
export class OverlayComponent implements OnInit, OnDestroy {
private map = inject(MapComponent);
@ContentChild(ContentComponent, { static: true })
content: ContentComponent;
@@ -33,9 +36,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
instance: Overlay;
element: HTMLElement;
constructor(private map: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
if (this.content) {
this.element = this.content.elementRef.nativeElement;
this.instance = new Overlay(this);
@@ -43,7 +44,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
}
}
ngOnDestroy() {
ngOnDestroy(): void {
if (this.instance) {
this.map.instance.removeOverlay(this.instance);
}

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

@@ -1,14 +1,14 @@
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 { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { LoadFunction } from 'ol/Tile';
import { BingMaps } from 'ol/source';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
@Component({
selector: 'aol-source-bingmaps',
template: ` <div class="aol-source-bingmaps"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }],
standalone: false
standalone: true,
})
export class SourceBingmapsComponent extends SourceComponent implements OnInit {
@Input()
@@ -29,14 +29,13 @@ export class SourceBingmapsComponent extends SourceComponent implements OnInit {
tileLoadFunction: LoadFunction;
@Input()
wrapX: boolean;
@Input()
placeholderTiles = false;
instance: BingMaps;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new BingMaps(this);
this.host.instance.setSource(this.instance);
}

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

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

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

@@ -1,16 +1,16 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { GeoJSON } from 'ol/format';
import FeatureFormat from 'ol/format/Feature';
import { ProjectionLike } from 'ol/proj';
import { Vector } from 'ol/source';
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) }],
standalone: false
standalone: true,
})
export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
@Input()
@@ -24,12 +24,9 @@ export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
instance: Vector;
format: FeatureFormat;
host = inject(LayerVectorComponent, { host: true });
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.format = new GeoJSON(this);
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);

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

@@ -2,26 +2,26 @@ import {
Component,
EventEmitter,
forwardRef,
Host,
inject,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import ImageArcGISRest from 'ol/source/ImageArcGISRest';
import { LoadFunction } from 'ol/Image';
import { ProjectionLike } from 'ol/proj';
import { ImageArcGISRest } from 'ol/source';
import { ImageSourceEvent } from 'ol/source/Image';
import { AttributionLike } from 'ol/source/Source';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
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) }],
standalone: false
standalone: true,
})
export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
@Input() projection: ProjectionLike | string;
@@ -29,7 +29,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
@Input() attributions: AttributionLike;
@Input() crossOrigin?: string;
@Input() imageLoadFunction?: LoadFunction;
@Input() params?: { [k: string]: any };
@Input() params?: Record<string, unknown>;
@Input() ratio = 1.5;
@Input() resolutions?: number[];
@Input() wrapX?: boolean;
@@ -42,12 +42,9 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageArcGISRest;
host = inject(LayerImageComponent, { host: true });
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ImageArcGISRest(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
@@ -55,7 +52,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

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

@@ -1,29 +1,29 @@
import {
Component,
Host,
Input,
forwardRef,
Output,
EventEmitter,
forwardRef,
inject,
Input,
OnChanges,
SimpleChanges,
OnInit,
Output,
SimpleChanges,
} 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 { Extent } from 'ol/extent';
import { ProjectionLike } from 'ol/proj';
import { ImageStatic } from 'ol/source';
import { ImageSourceEvent } from 'ol/source/Image';
import { AttributionLike } from 'ol/source/Source';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-source-imagestatic',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
standalone: false
standalone: true,
})
export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
@Input()
@@ -38,8 +38,6 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
crossOrigin?: string;
@Input()
imageLoadFunction?: LoadFunction;
@Input()
imageSize?: Size;
@Output()
imageLoadStart = new EventEmitter<ImageSourceEvent>();
@@ -49,10 +47,7 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageStatic;
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
host = inject(LayerImageComponent, { host: true });
setLayerSource(): void {
this.instance = new ImageStatic(this);
@@ -62,17 +57,16 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnInit() {
ngOnInit(): void {
this.setLayerSource();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'url':
this.url = changes[key].currentValue;
@@ -83,7 +77,6 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni
}
properties[key] = changes[key].currentValue;
}
}
this.instance.setProperties(properties, false);
}
}

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

@@ -1,13 +1,13 @@
import {
Component,
Host,
EventEmitter,
forwardRef,
inject,
Input,
OnChanges,
OnInit,
forwardRef,
SimpleChanges,
Output,
EventEmitter,
SimpleChanges,
} from '@angular/core';
import { ImageWMS } from 'ol/source';
import { LayerImageComponent } from '../layers/layerimage.component';
@@ -22,44 +22,28 @@ import { ServerType } from 'ol/source/wms';
selector: 'aol-source-imagewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
standalone: false
standalone: true,
})
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;
@Input() attributions: AttributionLike;
@Input() crossOrigin: string;
@Input() hidpi: boolean;
@Input() serverType: ServerType;
@Input() imageLoadFunction?: LoadFunction;
@Input() params: Record<string, unknown>;
@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>();
@Output() imageLoadStart = new EventEmitter<ImageSourceEvent>();
@Output() imageLoadEnd = new EventEmitter<ImageSourceEvent>();
@Output() imageLoadError = new EventEmitter<ImageSourceEvent>();
instance: ImageWMS;
host = inject(LayerImageComponent, { host: true });
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new ImageWMS(this);
this.host.instance.setSource(this.instance);
this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
@@ -67,7 +51,7 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange
this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

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

@@ -1,9 +1,8 @@
import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
import { AfterContentInit, Component, EventEmitter, forwardRef, Input, 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';
@@ -11,7 +10,7 @@ import { SourceXYZComponent } from './xyz.component';
selector: 'aol-source-osm',
template: ` <div class="aol-source-osm"></div> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
standalone: false
standalone: true,
})
export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
@Input()
@@ -34,30 +33,24 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
wrapX: boolean;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
instance: OSM;
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
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);
this._register(this.instance);
}
}

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

@@ -4,12 +4,12 @@ import {
ContentChild,
EventEmitter,
forwardRef,
Host,
inject,
Input,
Output,
} from '@angular/core';
import { Raster, Source } from 'ol/source';
import { Operation, RasterSourceEvent } from 'ol/source/Raster';
import { Options, RasterSourceEvent } from 'ol/source/Raster';
import { LayerImageComponent } from '../layers/layerimage.component';
import { SourceComponent } from './source.component';
@@ -23,27 +23,28 @@ import { SourceComponent } from './source.component';
useExisting: forwardRef(() => SourceRasterComponent),
},
],
standalone: false
standalone: true,
})
export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
@Input()
operation?: Operation;
operation?: Options['operation'];
@Input()
threads?: number;
threads?: Options['threads'];
@Input()
lib?: any;
lib?: Options['lib'];
@Input()
operationType?: 'pixel' | 'image';
operationType?: Options['operationType'];
@Output()
beforeOperations = new EventEmitter<RasterSourceEvent>();
beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
@Output()
afterOperations = new EventEmitter<RasterSourceEvent>();
afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
instance: Raster;
sources: Source[] = [];
host = inject(LayerImageComponent, { host: true });
@ContentChild(SourceComponent, { static: false })
@ContentChild(SourceComponent)
set source(sourceComponent: SourceComponent) {
this.sources = [sourceComponent.instance];
if (this.instance) {
@@ -52,18 +53,14 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
}
}
constructor(@Host() layer: LayerImageComponent) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
this.init();
}
init() {
init(): void {
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);
this._register(this.instance);
}
}

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

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

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

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

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

@@ -1,57 +1,42 @@
import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { Component, forwardRef, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { LoadFunction } from 'ol/Tile';
import { TileWMS } from 'ol/source';
import TileGrid from 'ol/tilegrid/TileGrid';
import { LoadFunction } from 'ol/Tile';
import { LayerTileComponent } from '../layers/layertile.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { ServerType } from 'ol/source/wms';
@Component({
selector: 'aol-source-tilewms',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
standalone: false
standalone: true,
})
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;
@Input() cacheSize: number;
@Input() crossOrigin: string;
@Input() gutter: number;
@Input() hidpi: boolean;
@Input() params: Record<string, unknown>;
@Input() projection: ProjectionLike;
@Input() reprojectionErrorThreshold: number;
@Input() serverType: ServerType;
@Input() tileGrid: TileGrid;
@Input() tileLoadFunction: LoadFunction;
@Input() url: string;
@Input() urls: string[];
@Input() wrapX: boolean;
instance: TileWMS;
host = inject(LayerTileComponent, { host: true });
constructor(@Host() layer: LayerTileComponent) {
super(layer);
}
ngOnInit() {
ngOnInit(): void {
this.instance = new TileWMS(this);
this.host.instance.setSource(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (this.instance && changes.hasOwnProperty('params')) {
this.instance.updateParams(this.params);
}

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

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

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

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

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

@@ -1,15 +1,19 @@
import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
import { Component, forwardRef, inject, Input, OnInit } from '@angular/core';
import { Vector } from 'ol/source';
import Feature from 'ol/format/Feature';
import { default as FeatureFormat } from 'ol/format/Feature';
import { LayerVectorComponent } from '../layers/layervector.component';
import { SourceComponent } from './source.component';
import { LoadingStrategy } from 'ol/source/Vector';
import { Geometry } from 'ol/geom';
import { Extent } from 'ol/extent';
import { Projection } from 'ol/proj';
import { Feature } from 'ol';
@Component({
selector: 'aol-source-vector',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
standalone: false
standalone: true,
})
export class SourceVectorComponent extends SourceComponent implements OnInit {
@Input()
@@ -21,18 +25,41 @@ export class SourceVectorComponent extends SourceComponent implements OnInit {
@Input()
url: string;
@Input()
format: Feature;
format: FeatureFormat;
@Input()
strategy: LoadingStrategy;
/**
* The loader function used to load features, from a remote source for example.
* If this is not set and `url` is set, the source will create and use an XHR
* feature loader. The `'featuresloadend'` and `'featuresloaderror'` events
* will only fire if the `success` and `failure` callbacks are used.
*
* An extra argument is provided to the OpenLayers callback to enable retrieval
* of the parent VectorSource.
*/
@Input()
loader: (
extent: Extent,
resolution: number,
projection: Projection,
success: (geos: Feature<Geometry>[]) => void,
failure: () => void,
vectorSource: Vector
) => void;
instance: Vector;
host = inject(LayerVectorComponent, { host: true });
constructor(@Host() layer: LayerVectorComponent) {
super(layer);
}
ngOnInit(): void {
this.instance = new Vector({
...this,
loader: this.loader
? (extent, resolution, projection, success, failure) =>
this.loader(extent, resolution, projection, success, failure, this.instance)
: undefined,
});
ngOnInit() {
this.instance = new Vector(this);
this.host.instance.setSource(this.instance);
}
}

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

@@ -1,19 +1,21 @@
import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
import { AfterContentInit, Component, ContentChild, forwardRef, inject, Input } from '@angular/core';
import { UrlFunction } from 'ol/Tile';
import FeatureFormat from 'ol/format/Feature';
import { ProjectionLike } from 'ol/proj';
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 { LayerVectorTileComponent } from '../layers/layervectortile.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
import { ProjectionLike } from 'ol/proj';
import { UrlFunction } from 'ol/Tile';
import { FeatureLike } from 'ol/Feature';
import RenderFeature from 'ol/render/Feature';
@Component({
selector: 'aol-source-vectortile',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
standalone: false
standalone: true,
})
export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
@Input()
@@ -33,21 +35,19 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC
@Input()
wrapX: boolean;
@ContentChild(FormatComponent, { static: false })
@ContentChild(FormatComponent)
formatComponent: FormatComponent;
@ContentChild(TileGridComponent, { static: false })
@ContentChild(TileGridComponent)
tileGridComponent: TileGridComponent;
public instance: VectorTile;
format: Feature;
format: FeatureFormat<RenderFeature>;
tileGrid: TileGrid;
constructor(@Host() layer: LayerVectorTileComponent) {
super(layer);
}
instance: VectorTile<FeatureLike>;
host = inject(LayerVectorTileComponent, { host: true });
/* need the children to construct the OL3 object */
ngAfterContentInit() {
ngAfterContentInit(): void {
this.format = this.formatComponent.instance;
this.tileGrid = this.tileGridComponent.instance;
// console.log('creating ol.source.VectorTile instance with:', this);

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

@@ -4,10 +4,9 @@ import {
ContentChild,
EventEmitter,
forwardRef,
Host,
inject,
Input,
OnChanges,
Optional,
Output,
SimpleChanges,
} from '@angular/core';
@@ -20,14 +19,17 @@ import TileGrid from 'ol/tilegrid/TileGrid';
import { LayerTileComponent } from '../layers/layertile.component';
import { TileGridComponent } from '../tilegrid.component';
import { SourceComponent } from './source.component';
import BaseObject from 'ol/Object';
@Component({
selector: 'aol-source-xyz',
template: ` <ng-content></ng-content> `,
providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
standalone: false
standalone: true,
})
export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
protected layer?: LayerTileComponent;
@Input()
cacheSize: number;
@Input()
@@ -59,58 +61,47 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
@Input()
wrapX: boolean;
@ContentChild(TileGridComponent, { static: false })
@ContentChild(TileGridComponent)
tileGridXYZ: TileGridComponent;
@Output()
tileLoadStart = new EventEmitter<TileSourceEvent>();
tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadEnd = new EventEmitter<TileSourceEvent>();
tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
@Output()
tileLoadError = new EventEmitter<TileSourceEvent>();
tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
instance: XYZ;
host = inject(LayerTileComponent, { optional: true, host: true });
constructor(
@Optional()
@Host()
protected layer?: LayerTileComponent
) {
super(layer);
}
ngAfterContentInit() {
ngAfterContentInit(): void {
if (this.tileGridXYZ) {
this.tileGrid = this.tileGridXYZ.instance;
}
this.init();
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
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() {
init(): void {
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);
this._register(this.instance);
}
}

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

@@ -1,33 +1,31 @@
import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges, inject } 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> `,
standalone: false
standalone: true,
})
export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
private host = inject(StyleComponent, { host: true });
@Input()
fill: Fill;
@Input()
radius: number;
@Input()
snapToPixel: boolean;
@Input()
stroke: Stroke;
public componentType = 'style-circle';
public instance: Circle;
constructor(@Host() private host: StyleComponent) {}
componentType = 'style-circle';
instance: Circle;
/**
* WORK-AROUND: since the re-rendering is not triggered on style change
* we trigger a radius change.
* see openlayers #6233 and #5775
*/
update() {
update(): void {
if (!!this.instance) {
// console.log('setting ol.style.Circle instance\'s radius');
this.instance.setRadius(this.radius);
@@ -35,14 +33,14 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
this.host.update();
}
ngAfterContentInit() {
ngAfterContentInit(): void {
// 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) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -52,7 +50,7 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
// console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
}
ngOnDestroy() {
ngOnDestroy(): void {
// console.log('removing aol-style-circle');
this.host.instance.setImage(null);
}

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

@@ -1,4 +1,4 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Fill } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
@@ -9,20 +9,20 @@ import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-fill',
template: ` <div class="aol-style-fill"></div> `,
standalone: false
standalone: true,
})
export class StyleFillComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
public instance: Fill;
instance: Fill;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
constructor() {
const styleHost = inject(StyleComponent, { optional: true });
const styleCircleHost = inject(StyleCircleComponent, { optional: true });
const styleTextHost = inject(StyleTextComponent, { optional: true });
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
@@ -36,34 +36,26 @@ export class StyleFillComponent implements OnInit, OnChanges {
// console.log('creating aol-style-fill with: ', this);
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Fill instance with: ', this);
this.instance = new Fill(this);
switch (this.host.componentType) {
case 'style':
if (this.host instanceof StyleComponent || this.host instanceof StyleTextComponent) {
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);
} else {
this.host.fill = this.instance;
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
if (changes.color) {
this.instance.setColor(changes.color.currentValue);
}
if (this.host instanceof StyleCircleComponent || this.host instanceof StyleComponent) {
this.host.update();
}
// console.log('changes detected in aol-style-fill, setting new color: ', changes);
}
}

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

@@ -1,18 +1,20 @@
import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Color } from 'ol/color';
import { Size } from 'ol/size';
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';
type IconAnchorUnits = 'fraction' | 'pixels';
type IconOrigin = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
@Component({
selector: 'aol-style-icon',
template: ` <div class="aol-style-icon"></div> `,
standalone: false
standalone: true,
})
export class StyleIconComponent implements OnInit, OnChanges {
private host = inject(StyleComponent, { host: true });
@Input()
anchor: [number, number];
@Input()
@@ -22,11 +24,11 @@ export class StyleIconComponent implements OnInit, OnChanges {
@Input()
anchorOrigin: IconOrigin;
@Input()
color: [number, number, number, number];
color: Color;
@Input()
crossOrigin: IconOrigin;
crossOrigin: string;
@Input()
img: HTMLCanvasElement | HTMLImageElement;
img: HTMLImageElement | HTMLCanvasElement;
@Input()
offset: [number, number];
@Input()
@@ -42,23 +44,19 @@ export class StyleIconComponent implements OnInit, OnChanges {
@Input()
rotation: number;
@Input()
size: [number, number];
@Input()
imgSize: [number, number];
size: Size;
@Input()
src: string;
public instance: Icon;
instance: Icon;
constructor(@Host() private host: StyleComponent) {}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Icon instance with: ', this);
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}

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

@@ -1,39 +1,38 @@
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 { Component, Input, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
import { Stroke } from 'ol/style';
import { StyleCircleComponent } from './circle.component';
import { StyleComponent } from './style.component';
import { StyleTextComponent } from './text.component';
@Component({
selector: 'aol-style-stroke',
template: ` <div class="aol-style-stroke"></div> `,
standalone: false
standalone: true,
})
export class StyleStrokeComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
@Input()
lineCap: CanvasLineCap | undefined;
lineCap: CanvasLineCap;
@Input()
lineDash: number[];
@Input()
lineJoin: CanvasLineJoin | undefined;
lineJoin: CanvasLineJoin;
@Input()
miterLimit: number;
@Input()
width: number;
public instance: Stroke;
/* the typings do not have the setters */
instance: Stroke;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
constructor() {
const styleHost = inject(StyleComponent, { optional: true });
const styleCircleHost = inject(StyleCircleComponent, { optional: true });
const styleTextHost = inject(StyleTextComponent, { optional: true });
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
@@ -47,28 +46,18 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
// console.log('creating aol-style-stroke with: ', this);
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating ol.style.Stroke instance with: ', this);
this.instance = new Stroke(this);
switch (this.host.componentType) {
case 'style':
if (this.host instanceof StyleComponent || this.host instanceof StyleTextComponent) {
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;
} else {
this.host.stroke = this.instance;
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -90,7 +79,9 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
if (changes.width) {
this.instance.setWidth(changes.width.currentValue);
}
if (this.host instanceof StyleCircleComponent || this.host instanceof StyleComponent) {
this.host.update();
}
// console.log('changes detected in aol-style-stroke, setting new properties: ', changes);
}
}

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

@@ -1,4 +1,4 @@
import { Component, Input, Optional, OnInit } from '@angular/core';
import { Component, Input, OnInit, inject } from '@angular/core';
import { Fill, Image, Stroke, Style, Text } from 'ol/style';
import { Geometry } from 'ol/geom';
import { FeatureComponent } from '../feature.component';
@@ -8,7 +8,7 @@ import { GeometryFunction } from 'ol/style/Style';
@Component({
selector: 'aol-style',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class StyleComponent implements OnInit {
@Input()
@@ -24,11 +24,14 @@ export class StyleComponent implements OnInit {
@Input()
zIndex: number;
public instance: Style;
public componentType = 'style';
private readonly host: FeatureComponent | LayerVectorComponent;
instance: Style;
componentType = 'style';
private host: FeatureComponent | LayerVectorComponent;
constructor() {
const featureHost = inject(FeatureComponent, { optional: true });
const layerHost = inject(LayerVectorComponent, { optional: true });
constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) {
// console.log('creating aol-style');
this.host = !!featureHost ? featureHost : layerHost;
if (!this.host) {
@@ -36,12 +39,12 @@ export class StyleComponent implements OnInit {
}
}
update() {
update(): void {
// console.log('updating style\'s host: ', this.host);
this.host.instance.changed();
}
ngOnInit() {
ngOnInit(): void {
// console.log('creating aol-style instance with: ', this);
this.instance = new Style(this);
this.host.instance.setStyle(this.instance);

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

@@ -1,13 +1,15 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, inject } 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> `,
standalone: false
standalone: true,
})
export class StyleTextComponent implements OnInit, OnChanges {
private host = inject(StyleComponent, { optional: true });
@Input()
font: string | undefined;
@Input()
@@ -27,23 +29,25 @@ export class StyleTextComponent implements OnInit, OnChanges {
@Input()
textBaseLine: string | undefined;
public instance: Text;
public componentType = 'style-text';
instance: Text;
componentType = 'style-text';
constructor() {
const host = this.host;
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() {
ngOnInit(): void {
// console.log('creating ol.style.Text instance with: ', this);
this.instance = new Text(this);
this.host.instance.setText(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
@@ -74,6 +78,4 @@ export class StyleTextComponent implements OnInit, OnChanges {
this.host.update();
// console.log('changes detected in aol-style-text, setting new properties: ', changes);
}
update() {}
}

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

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { createXYZ } from 'ol/tilegrid';
import TileGrid from 'ol/tilegrid/TileGrid';
import { Extent } from 'ol/extent';
@@ -8,7 +8,7 @@ import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid',
template: '',
standalone: false
standalone: true,
})
export class TileGridComponent implements OnInit, OnChanges {
@Input()
@@ -26,7 +26,7 @@ export class TileGridComponent implements OnInit, OnChanges {
instance: TileGrid;
ngOnInit() {
ngOnInit(): void {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {
@@ -34,7 +34,7 @@ export class TileGridComponent implements OnInit, OnChanges {
}
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges(): void {
if (!this.resolutions) {
this.instance = createXYZ(this);
} else {

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

@@ -7,7 +7,7 @@ import { Size } from 'ol/size';
@Component({
selector: 'aol-tilegrid-wmts',
template: '',
standalone: false
standalone: true,
})
export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
@Input()
@@ -27,7 +27,7 @@ export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
instance: WMTS;
ngOnInit() {
ngOnInit(): void {
this.instance = new WMTS(this);
}
}

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

@@ -1,18 +1,19 @@
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, inject } from '@angular/core';
import BaseObject, { ObjectEvent } from 'ol/Object';
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';
import { Extent } from 'ol/extent';
import { MapComponent } from './map.component';
import { ProjectionLike } from 'ol/proj';
@Component({
selector: 'aol-view',
template: ` <ng-content></ng-content> `,
standalone: false
standalone: true,
})
export class ViewComponent implements OnInit, OnChanges, OnDestroy {
export class ViewComponent implements OnInit, OnChanges {
private host = inject(MapComponent);
@Input()
constrainRotation: boolean | number;
@Input()
@@ -40,7 +41,7 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
@Input()
center: Coordinate;
@Input()
projection: string;
projection: ProjectionLike;
@Input()
constrainOnlyCenter: boolean;
@Input()
@@ -58,43 +59,28 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
zoomAnimation = false;
@Output()
olChange = new EventEmitter<DrawEvent>();
changeResolution: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
@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>();
changeCenter: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
public instance: View;
public componentType = 'view';
instance: View;
componentType = 'view';
constructor(private host: MapComponent) {}
ngOnInit() {
ngOnInit(): void {
// 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));
this.instance.on('change:center', (event: ObjectEvent) => this.changeCenter.emit(event));
}
ngOnChanges(changes: SimpleChanges) {
const properties: { [index: string]: any } = {};
ngOnChanges(changes: SimpleChanges): void {
if (!this.instance) {
return;
}
const properties: Parameters<BaseObject['setProperties']>[0] = {};
for (const key in changes) {
if (changes.hasOwnProperty(key)) {
switch (key) {
case 'zoom':
/** Work-around: setting the zoom via setProperties does not work. */
@@ -117,12 +103,7 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
}
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');
}
}

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

@@ -1,8 +1,7 @@
/*
* Public API Surface of ng-openlayers
* Public API Surface of ngx-openlayers
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SimpleGeometryComponent } from './lib/geom/simplegeometry.component';
import { SourceComponent } from './lib/sources/source.component';
import { ViewComponent } from './lib/view.component';
@@ -68,8 +67,6 @@ import { DragZoomInteractionComponent } from './lib/interactions/dragzoom.compon
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';
@@ -79,6 +76,7 @@ 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';
import { SnapInteractionComponent } from './lib/interactions/snap.component';
export {
MapComponent,
@@ -148,11 +146,10 @@ export {
MouseWheelZoomInteractionComponent,
PinchZoomInteractionComponent,
DrawInteractionComponent,
KeyboardPanInteractionComponent,
KeyboardZoomInteractionComponent,
SelectInteractionComponent,
ModifyInteractionComponent,
TranslateInteractionComponent,
SnapInteractionComponent,
OverlayComponent,
ContentComponent,
AttributionsComponent,
@@ -242,9 +239,11 @@ const COMPONENTS = [
AttributionComponent,
];
/**
* @deprecated please use standalone components instead
*/
@NgModule({
declarations: COMPONENTS,
imports: [CommonModule],
imports: COMPONENTS,
exports: COMPONENTS,
})
export class AngularOpenlayersModule {}

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

@@ -1,6 +1,5 @@
// 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';
@@ -8,5 +7,5 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false },
teardown: { destroyAfterEach: true },
});

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

@@ -2,29 +2,20 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "bundler",
"declarationMap": true,
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"esModuleInterop": true,
"types": [],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
}
"lib": [
"dom",
"ES2022"
],
"skipLibCheck": true
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true,
"compilationMode": "partial"
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",

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

@@ -1,33 +1,9 @@
{
"extends": "../../tsconfig.json",
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "bundler",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"esModuleInterop": true,
"types": [],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
]
}
"declarationMap": false
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true,
"compilationMode": "partial"
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
}

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

@@ -1,7 +1,7 @@
{
"extends": "../../tsconfig.base.json",
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"outDir": "../../out-tsc/spec",
"types": [
"jasmine",
"node"

Some files were not shown because too many files have changed in this diff Show More