diff --git a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts index 06bfb95b..f996390e 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts @@ -1,7 +1,8 @@ import { Component, forwardRef, Host, Input, OnInit } from '@angular/core'; -import { source, ProjectionLike, Attribution, ImageLoadFunctionType } from 'openlayers'; +import { ImageArcGISRest } from 'ol/source'; import { LayerImageComponent } from '../layers/layerimage.component'; import { SourceComponent } from './source.component'; +import { AttributionLike, ImageLoadFunction, ProjectionLike } from '../../ol-models'; @Component({ selector: 'aol-source-imagearcgisrest', @@ -11,24 +12,24 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }], }) export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit { - instance: source.ImageArcGISRest; + instance: ImageArcGISRest; @Input() projection: ProjectionLike | string; @Input() url: string; - @Input() attributions: Attribution[]; + @Input() attributions: AttributionLike[]; @Input() crossOrigin?: string; - @Input() imageLoadFunction?: ImageLoadFunctionType; + @Input() imageLoadFunction?: ImageLoadFunction; @Input() params?: { [k: string]: any }; @Input() ratio = 1; @Input() resolutions?: number[]; - @Input() logo?: string | olx.LogoOptions; + @Input() logo?: string; // TODO: (string | olx.LogoOptions); constructor(@Host() layer: LayerImageComponent) { super(layer); } ngOnInit() { - this.instance = new source.ImageArcGISRest(this); + this.instance = new ImageArcGISRest(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts index 50ae4466..46507c63 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts @@ -12,7 +12,7 @@ import { AttributionLike, ImageLoadFunction, ProjectionLike } from '../../ol-mod providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }], }) export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit { - instance: source.ImageWMS; + instance: ImageWMS; @Input() attributions: AttributionLike; diff --git a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts index 444959d3..d85737d7 100644 --- a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts @@ -1,6 +1,5 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; import { TileJSON } from 'ol/source'; -import { TileGrid } from 'ol/tilegrid'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; diff --git a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts index 5fac816d..72aae11c 100644 --- a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts @@ -14,7 +14,7 @@ import { TileGridWMTSComponent } from '../tilegridwmts.component'; import { WMTS } from 'ol/source'; import { WMTS as TileGridWMTS } from 'ol/tilegrid'; import { WMTSRequestEncoding } from 'ol/source'; -import { ProjectionLike, TileCoord, TileLoadFunction } from '../../ol-models'; +import { ProjectionLike, TileLoadFunction } from '../../ol-models'; @Component({ selector: 'aol-source-tilewmts', diff --git a/projects/ngx-openlayers/src/ol-models.ts b/projects/ngx-openlayers/src/ol-models.ts index 25b3225f..5e29e835 100644 --- a/projects/ngx-openlayers/src/ol-models.ts +++ b/projects/ngx-openlayers/src/ol-models.ts @@ -9,7 +9,6 @@ import { Layer } from 'ol/layer'; import { Geometry } from 'ol/geom'; import MapBrowserEvent from 'ol/MapBrowserEvent'; - export type Extent = [number, number, number, number]; export type Coordinate = [number, number]; @@ -28,13 +27,15 @@ export type TileLoadFunction = (tile: Tile, url: string) => void; export type ImageLoadFunction = (image: Image, src: string) => void; -export type Attribution = () => (string | Array); +export type Attribution = () => string | Array; export type AttributionLike = string | Array | Attribution; export type Pixel = [number, number, number, number]; -export type RasterOperation = ((pixels: Array, data: any) => Pixel) | ((images: Array, data: any) => ImageData); +export type RasterOperation = + | ((pixels: Array, data: any) => Pixel) + | ((images: Array, data: any) => ImageData); export type TileCoord = [number, number, number]; diff --git a/src/app/draw-polygon/draw-polygon.component.ts b/src/app/draw-polygon/draw-polygon.component.ts index 1656fd45..386c1a2f 100644 --- a/src/app/draw-polygon/draw-polygon.component.ts +++ b/src/app/draw-polygon/draw-polygon.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { createBox, Draw } from 'ol/interaction/Draw'; +import { createBox } from 'ol/interaction/Draw'; import { Feature } from 'ol'; import Projection from 'ol/proj/Projection'; -import { fromExtent, Polygon } from 'ol/geom/Polygon'; +import { fromExtent } from 'ol/geom/Polygon'; @Component({ selector: 'app-draw-polygon', diff --git a/src/app/map-position/map-position.component.ts b/src/app/map-position/map-position.component.ts index e5850757..4895fb91 100644 --- a/src/app/map-position/map-position.component.ts +++ b/src/app/map-position/map-position.component.ts @@ -104,10 +104,6 @@ export class MapPositionComponent implements OnInit { displayCoordinates(): void { this.currentZoom = this.view.instance.getZoom(); - [this.currentLon, this.currentLat] = transform( - this.view.instance.getCenter(), - this.displayProj, - this.inputProj - ); + [this.currentLon, this.currentLat] = transform(this.view.instance.getCenter(), this.displayProj, this.inputProj); } } diff --git a/src/app/modify-polygon/modify-polygon.component.ts b/src/app/modify-polygon/modify-polygon.component.ts new file mode 100644 index 00000000..a40e5119 --- /dev/null +++ b/src/app/modify-polygon/modify-polygon.component.ts @@ -0,0 +1,93 @@ +import { Component, OnInit } from '@angular/core'; +import { Feature } from 'ol'; +import Projection from 'ol/proj/Projection'; +import { GeoJSON } from 'ol/format'; + +@Component({ + selector: 'app-modify-polygon', + template: ` + + + + + + + + + + + + + + + + + + + + + + + + +
+

Result

+ +
{{ feature | json }}
+
+
+ `, + styles: [ + ` + :host { + display: flex; + } + + aol-map { + width: 70%; + } + + .info { + width: 28%; + padding: 1rem; + } + `, + ], +}) +export class ModifyPolygonComponent implements OnInit { + constructor() {} + + format: GeoJSON = new GeoJSON(); + displayProj = new Projection({ code: 'EPSG:3857' }); + inputProj = new Projection({ code: 'EPSG:4326' }); + + feature: Feature = { + geometry: { + coordinates: [ + [ + [-1.7138671875, 43.35713822211053], + [4.515380859375, 43.35713822211053], + [4.515380859375, 47.76886840424207], + [-1.7138671875, 47.76886840424207], + [-1.7138671875, 43.35713822211053], + ], + ], + type: 'Polygon', + }, + properties: {}, + type: 'Feature', + }; + + ngOnInit() {} + + modifyEnd(feature: Feature) { + this.feature = this.format.writeFeatureObject(feature, { + dataProjection: this.inputProj, + featureProjection: this.displayProj, + }); + } +} diff --git a/src/app/overlay/overlay.component.ts b/src/app/overlay/overlay.component.ts index 7ed5b3d5..9a80df9c 100644 --- a/src/app/overlay/overlay.component.ts +++ b/src/app/overlay/overlay.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { GeoJSON } from 'ol/format'; import { Feature as OlFeature } from 'ol'; -import { fromExtent, Polygon } from 'ol/geom/Polygon'; +import { fromExtent } from 'ol/geom/Polygon'; @Component({ selector: 'app-display-overlay',