diff --git a/.gitignore b/.gitignore index f5a5e0b5..1c5682cd 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ node_modules /libpeerconnection.log npm-debug.log yarn-error.log +yarn.lock testem.log /typings diff --git a/angular.json b/angular.json index 5e2771cd..794a5a5e 100644 --- a/angular.json +++ b/angular.json @@ -48,7 +48,7 @@ ], "styles": [ "src/styles.css", - "projects/ngx-openlayers/node_modules/openlayers/dist/ol.css" + "node_modules/ol/ol.css" ], "scripts": [] }, diff --git a/package.json b/package.json index 4d2c80ca..7417c1cb 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "geojson": "^0.5.0", "hammer-timejs": "^1.1.0", "hammerjs": "^2.0.8", + "ol": "^5.3.1", "rxjs": "6.3.3", "zone.js": "^0.8.26" }, diff --git a/projects/ngx-openlayers/ng-package.json b/projects/ngx-openlayers/ng-package.json index f44c934e..d8e72be3 100644 --- a/projects/ngx-openlayers/ng-package.json +++ b/projects/ngx-openlayers/ng-package.json @@ -2,9 +2,6 @@ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/ngx-openlayers", "deleteDestPath": false, - "whitelistedNonPeerDependencies": [ - "openlayers", "@types/openlayers" - ], "lib": { "entryFile": "src/public_api.ts" } diff --git a/projects/ngx-openlayers/package.json b/projects/ngx-openlayers/package.json index 0683ee38..71cb82ea 100644 --- a/projects/ngx-openlayers/package.json +++ b/projects/ngx-openlayers/package.json @@ -9,10 +9,8 @@ }, "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0", - "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0" + "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0", + "ol": "^5.3.1" }, - "dependencies": { - "@types/openlayers": "4.3.x || 4.4.x", - "openlayers": "4.3.x || 4.4.x" - } + "dependencies": {} } diff --git a/projects/ngx-openlayers/src/lib/attribution.component.ts b/projects/ngx-openlayers/src/lib/attribution.component.ts index 3fdd6259..9d0300f6 100644 --- a/projects/ngx-openlayers/src/lib/attribution.component.ts +++ b/projects/ngx-openlayers/src/lib/attribution.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, OnInit } from '@angular/core'; -import { Attribution } from 'openlayers'; +import { Attribution } from 'ol/control'; @Component({ selector: 'aol-attribution', diff --git a/projects/ngx-openlayers/src/lib/attributions.component.ts b/projects/ngx-openlayers/src/lib/attributions.component.ts index f276d4e7..8e53b216 100644 --- a/projects/ngx-openlayers/src/lib/attributions.component.ts +++ b/projects/ngx-openlayers/src/lib/attributions.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core'; -import { Attribution } from 'openlayers'; +import { Attribution } from 'ol/control'; import { SourceComponent } from './sources/source.component'; import { AttributionComponent } from './attribution.component'; diff --git a/projects/ngx-openlayers/src/lib/controls/attribution.component.ts b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts index 2997f9bc..6de9ed71 100644 --- a/projects/ngx-openlayers/src/lib/controls/attribution.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { Attribution } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -8,7 +8,7 @@ import { MapComponent } from '../map.component'; }) export class ControlAttributionComponent implements OnInit, OnDestroy { public componentType = 'control'; - instance: control.Attribution; + instance: Attribution; target: Element; @Input() collapsible: boolean; @@ -18,7 +18,7 @@ export class ControlAttributionComponent implements OnInit, OnDestroy { ngOnInit() { this.target = this.element.nativeElement; // console.log('ol.control.Attribution init: ', this); - this.instance = new control.Attribution(this); + this.instance = new Attribution(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/control.component.ts b/projects/ngx-openlayers/src/lib/controls/control.component.ts index 7c688aea..124a04ca 100644 --- a/projects/ngx-openlayers/src/lib/controls/control.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/control.component.ts @@ -1,5 +1,5 @@ import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { Control } from 'ol/control'; import { MapComponent } from '../map.component'; import { ContentComponent } from '../content.component'; @@ -11,7 +11,7 @@ import { ContentComponent } from '../content.component'; }) export class ControlComponent implements OnInit, OnDestroy { public componentType = 'control'; - instance: control.Control; + instance: Control; element: Element; @ContentChild(ContentComponent) content: ContentComponent; @@ -21,7 +21,7 @@ export class ControlComponent implements OnInit, OnDestroy { ngOnInit() { if (this.content) { this.element = this.content.elementRef.nativeElement; - this.instance = new control.Control(this); + this.instance = new Control(this); this.map.instance.addControl(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/controls/default.component.ts b/projects/ngx-openlayers/src/lib/controls/default.component.ts index 6798cc91..60791084 100644 --- a/projects/ngx-openlayers/src/lib/controls/default.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/default.component.ts @@ -1,5 +1,10 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { control, Collection } from 'openlayers'; +import { Control, defaults } from 'ol/control'; +import { Collection } from 'ol'; +import { Options as AttributionOptions } from 'ol/control/Attribution'; +import { Options as RotateOptions } from 'ol/control/Rotate'; +import { Options as ZoomOptions } from 'ol/control/Zoom'; + import { MapComponent } from '../map.component'; @Component({ @@ -7,25 +12,25 @@ import { MapComponent } from '../map.component'; template: '', }) export class DefaultControlComponent implements OnInit, OnDestroy { - instance: Collection; + instance: Collection; @Input() attribution: boolean; @Input() - attributionOptions: olx.control.AttributionOptions; + attributionOptions: AttributionOptions; @Input() rotate: boolean; @Input() - rotateOptions: olx.control.RotateOptions; + rotateOptions: RotateOptions; @Input() zoom: boolean; @Input() - zoomOptions: olx.control.ZoomOptions; + zoomOptions: ZoomOptions; constructor(private map: MapComponent) {} ngOnInit() { // console.log('ol.control.defaults init: ', this); - this.instance = control.defaults(this); + this.instance = defaults(this); this.instance.forEach(c => this.map.instance.addControl(c)); } diff --git a/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts index a2e99e10..e7671242 100644 --- a/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { FullScreen } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +9,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlFullScreenComponent implements OnInit, OnDestroy { - instance: control.FullScreen; + instance: FullScreen; @Input() className: string; @@ -27,7 +27,7 @@ export class ControlFullScreenComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.FullScreen(this); + this.instance = new FullScreen(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts index 3cf4a6b2..fc4b8f1e 100644 --- a/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts @@ -1,15 +1,17 @@ import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; -import { control, CoordinateFormatType, ProjectionLike } from 'openlayers'; +import MousePosition from 'ol/control/MousePosition'; import { MapComponent } from '../map.component'; +import { CoordinateFormat } from 'ol/coordinate'; +import { ProjectionLike } from 'ol/proj'; @Component({ selector: 'aol-control-mouseposition', template: ``, }) export class ControlMousePositionComponent implements OnInit, OnDestroy { - instance: control.MousePosition; + instance: MousePosition; @Input() - coordinateFormat: CoordinateFormatType; + coordinateFormat: CoordinateFormat; @Input() projection: ProjectionLike; target: Element; @@ -19,7 +21,7 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy { ngOnInit() { this.target = this.element.nativeElement; // console.log('ol.control.MousePosition init: ', this); - this.instance = new control.MousePosition(this); + this.instance = new MousePosition(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts index 01ef6e2b..53b1fa0f 100644 --- a/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control, View, layer } from 'openlayers'; +import { Layer } from 'ol/layer'; +import { View } from 'ol'; +import { OverviewMap } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +11,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlOverviewMapComponent implements OnInit, OnDestroy { - instance: control.OverviewMap; + instance: OverviewMap; @Input() collapsed: boolean; @Input() @@ -19,7 +21,7 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy { @Input() label: string; @Input() - layers: layer.Layer[]; + layers: Layer[]; @Input() target: Element; @Input() @@ -32,7 +34,7 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.OverviewMap(this); + this.instance = new OverviewMap(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/rotate.component.ts b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts index 3e25c8d8..e6e886bb 100644 --- a/projects/ngx-openlayers/src/lib/controls/rotate.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { Rotate } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +9,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlRotateComponent implements OnInit, OnDestroy { - instance: control.Rotate; + instance: Rotate; @Input() className: string; @@ -27,7 +27,7 @@ export class ControlRotateComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.Rotate(this); + this.instance = new Rotate(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts index 04cf7c17..28aa0610 100644 --- a/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { ScaleLine } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +9,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlScaleLineComponent implements OnInit, OnDestroy { - instance: control.ScaleLine; + instance: ScaleLine; @Input() units: string; @@ -18,7 +18,7 @@ export class ControlScaleLineComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.ScaleLine(this); + this.instance = new ScaleLine(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/zoom.component.ts b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts index 32b90693..85ee4ffa 100644 --- a/projects/ngx-openlayers/src/lib/controls/zoom.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { Zoom } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +9,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlZoomComponent implements OnInit, OnDestroy { - instance: control.Zoom; + instance: Zoom; @Input() duration: number; @@ -29,7 +29,7 @@ export class ControlZoomComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.Zoom(this); + this.instance = new Zoom(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts index 9019b9b2..68a6ce3b 100644 --- a/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control } from 'openlayers'; +import { ZoomSlider } from 'ol/control'; import { MapComponent } from '../map.component'; @Component({ @@ -9,7 +9,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlZoomSliderComponent implements OnInit, OnDestroy { - instance: control.ZoomSlider; + instance: ZoomSlider; @Input() className: string; @@ -25,7 +25,7 @@ export class ControlZoomSliderComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.ZoomSlider(this); + this.instance = new ZoomSlider(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts index cf64098d..b8a63462 100644 --- a/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts +++ b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts @@ -1,6 +1,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { control, Extent } from 'openlayers'; +import { ZoomToExtent } from 'ol/control'; import { MapComponent } from '../map.component'; +import { Extent } from 'ol/extent'; @Component({ selector: 'aol-control-zoomtoextent', @@ -9,7 +10,7 @@ import { MapComponent } from '../map.component'; `, }) export class ControlZoomToExtentComponent implements OnInit, OnDestroy { - instance: control.ZoomToExtent; + instance: ZoomToExtent; @Input() className: string; @@ -25,7 +26,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy { } ngOnInit() { - this.instance = new control.ZoomToExtent(this); + this.instance = new ZoomToExtent(this); this.map.instance.addControl(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/coordinate.component.ts b/projects/ngx-openlayers/src/lib/coordinate.component.ts index 06c1e898..5a79ce32 100644 --- a/projects/ngx-openlayers/src/lib/coordinate.component.ts +++ b/projects/ngx-openlayers/src/lib/coordinate.component.ts @@ -1,5 +1,5 @@ import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core'; -import { proj, Coordinate } from 'openlayers'; +import { Projection, transform } from 'ol/proj'; import { MapComponent } from './map.component'; import { GeometryPointComponent, @@ -9,6 +9,7 @@ import { } from './geometry.components'; import { ViewComponent } from './view.component'; import { OverlayComponent } from './overlay.component'; +import { Coordinate } from 'ol/coordinate'; @Component({ selector: 'aol-coordinate', @@ -46,7 +47,7 @@ export class CoordinateComponent implements OnChanges { } ngOnChanges(changes: SimpleChanges) { - let referenceProjection: proj.Projection; + let referenceProjection: Projection; let referenceProjectionCode: string; let transformedCoordinates: number[]; @@ -56,7 +57,7 @@ export class CoordinateComponent implements OnChanges { if (this.srid === referenceProjectionCode) { transformedCoordinates = [this.x, this.y]; } else { - transformedCoordinates = proj.transform([this.x, this.y], this.srid, referenceProjectionCode); + transformedCoordinates = transform([this.x, this.y], this.srid, referenceProjectionCode); } switch (this.host.componentType) { @@ -104,7 +105,7 @@ export class CollectionCoordinatesComponent implements OnChanges { } ngOnChanges(changes: SimpleChanges) { - let referenceProjection: proj.Projection; + let referenceProjection: Projection; let referenceProjectionCode: string; let transformedCoordinates: Array; @@ -119,7 +120,7 @@ export class CollectionCoordinatesComponent implements OnChanges { transformedCoordinates = []; this.coordinates.forEach( function(coordinate: Coordinate) { - transformedCoordinates.push(proj.transform(coordinate, this.srid, referenceProjectionCode)); + transformedCoordinates.push(transform(coordinate, this.srid, referenceProjectionCode)); }.bind(this) ); } diff --git a/projects/ngx-openlayers/src/lib/feature.component.ts b/projects/ngx-openlayers/src/lib/feature.component.ts index 844e7fc3..0d267c15 100644 --- a/projects/ngx-openlayers/src/lib/feature.component.ts +++ b/projects/ngx-openlayers/src/lib/feature.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core'; -import { Feature } from 'openlayers'; +import { Feature } from 'ol'; import { SourceVectorComponent } from './sources/vector.component'; @Component({ diff --git a/projects/ngx-openlayers/src/lib/formats/format.component.ts b/projects/ngx-openlayers/src/lib/formats/format.component.ts index 8df2241b..74c60efd 100644 --- a/projects/ngx-openlayers/src/lib/formats/format.component.ts +++ b/projects/ngx-openlayers/src/lib/formats/format.component.ts @@ -1,6 +1,6 @@ -import { format } from 'openlayers'; +import Feature from 'ol/format/Feature'; export class FormatComponent { - public instance: format.Feature; + public instance: Feature; public componentType = 'format'; } diff --git a/projects/ngx-openlayers/src/lib/formats/mvt.component.ts b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts index 824b1182..89df4058 100644 --- a/projects/ngx-openlayers/src/lib/formats/mvt.component.ts +++ b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts @@ -1,6 +1,8 @@ import { Component, forwardRef, Input } from '@angular/core'; -import { format, geom } from 'openlayers'; import { FormatComponent } from './format.component'; +import { MVT } from 'ol/format'; +import { Geometry } from 'ol/geom'; +import GeometryType from 'ol/geom/GeometryType'; @Component({ selector: 'aol-format-mvt', @@ -8,12 +10,12 @@ import { FormatComponent } from './format.component'; providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }], }) export class FormatMVTComponent extends FormatComponent { - instance: format.MVT; + instance: MVT; @Input() featureClass: - | ((geom: geom.Geometry | { [k: string]: any }) => any) - | ((geom: geom.GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any); + | ((geom: Geometry | { [k: string]: any }) => any) + | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any); @Input() geometryName: string; @Input() @@ -23,6 +25,6 @@ export class FormatMVTComponent extends FormatComponent { constructor() { super(); - this.instance = new format.MVT(this); + this.instance = new MVT(this); } } diff --git a/projects/ngx-openlayers/src/lib/geometry.components.ts b/projects/ngx-openlayers/src/lib/geometry.components.ts index de3be541..dc877271 100644 --- a/projects/ngx-openlayers/src/lib/geometry.components.ts +++ b/projects/ngx-openlayers/src/lib/geometry.components.ts @@ -1,5 +1,5 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core'; -import { geom } from 'openlayers'; +import { Circle, LineString, Point, Polygon } from 'ol/geom'; import { FeatureComponent } from './feature.component'; @Component({ @@ -10,14 +10,14 @@ import { FeatureComponent } from './feature.component'; }) export class GeometryLinestringComponent implements OnInit, OnDestroy { public componentType = 'geometry-linestring'; - public instance: geom.LineString; + public instance: LineString; constructor(private host: FeatureComponent) { // console.log('instancing aol-geometry-linestring'); } ngOnInit() { - this.instance = new geom.LineString([]); + this.instance = new LineString([]); this.host.instance.setGeometry(this.instance); } ngOnDestroy() { @@ -33,14 +33,14 @@ export class GeometryLinestringComponent implements OnInit, OnDestroy { }) export class GeometryPointComponent implements OnInit, OnDestroy { public componentType = 'geometry-point'; - public instance: geom.Point; + public instance: Point; constructor(private host: FeatureComponent) { // console.log('creating aol-geometry-point'); } ngOnInit() { - this.instance = new geom.Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component. + this.instance = new Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component. this.host.instance.setGeometry(this.instance); } @@ -57,7 +57,7 @@ export class GeometryPointComponent implements OnInit, OnDestroy { }) export class GeometryPolygonComponent implements OnInit, OnDestroy { public componentType = 'geometry-polygon'; - public instance: geom.Polygon; + public instance: Polygon; constructor(private host: FeatureComponent) { // console.log('creating aol-geometry-polygon'); @@ -65,7 +65,7 @@ export class GeometryPolygonComponent implements OnInit, OnDestroy { ngOnInit() { // defaulting coordinates to [0,0]. To be overridden in child component. - this.instance = new geom.Polygon([[[0, 0], [1, 0], [1, 1]]]); + this.instance = new Polygon([[[0, 0], [1, 0], [1, 1]]]); this.host.instance.setGeometry(this.instance); } @@ -82,7 +82,7 @@ export class GeometryPolygonComponent implements OnInit, OnDestroy { }) export class GeometryCircleComponent implements OnInit { public componentType = 'geometry-circle'; - public instance: geom.Circle; + public instance: Circle; @Input() get radius(): number { @@ -94,7 +94,7 @@ export class GeometryCircleComponent implements OnInit { constructor(private host: FeatureComponent) { // defaulting coordinates to [0,0]. To be overridden in child component. - this.instance = new geom.Circle([0, 0]); + this.instance = new Circle([0, 0]); } ngOnInit() { diff --git a/projects/ngx-openlayers/src/lib/graticule.component.ts b/projects/ngx-openlayers/src/lib/graticule.component.ts index ad90c70f..e21dd60c 100644 --- a/projects/ngx-openlayers/src/lib/graticule.component.ts +++ b/projects/ngx-openlayers/src/lib/graticule.component.ts @@ -1,5 +1,6 @@ import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core'; -import { Graticule, style } from 'openlayers'; +import { Graticule } from 'ol'; +import { Stroke } from 'ol/style'; import { MapComponent } from './map.component'; @Component({ @@ -11,7 +12,7 @@ export class GraticuleComponent implements AfterContentInit, OnChanges { public componentType = 'graticule'; @Input() - strokeStyle: style.Stroke; + strokeStyle: Stroke; @Input() showLabels: boolean; @Input() diff --git a/projects/ngx-openlayers/src/lib/interactions/default.component.ts b/projects/ngx-openlayers/src/lib/interactions/default.component.ts index 6e17dbae..73443000 100644 --- a/projects/ngx-openlayers/src/lib/interactions/default.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/default.component.ts @@ -1,5 +1,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { interaction, Collection } from 'openlayers'; +import { defaults, Interaction } from 'ol/interaction'; +import { Collection } from 'ol'; import { MapComponent } from '../map.component'; @Component({ @@ -7,12 +8,12 @@ import { MapComponent } from '../map.component'; template: '', }) export class DefaultInteractionComponent implements OnInit, OnDestroy { - instance: Collection; + instance: Collection; constructor(private map: MapComponent) {} ngOnInit() { - this.instance = interaction.defaults(); + this.instance = defaults(); this.instance.forEach(i => this.map.instance.addInteraction(i)); } diff --git a/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts index 2eaf570a..982343cf 100644 --- a/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { interaction } from 'openlayers'; +import { DoubleClickZoom } from 'ol/interaction'; import { MapComponent } from '../map.component'; @Component({ @@ -7,7 +7,7 @@ import { MapComponent } from '../map.component'; template: '', }) export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DoubleClickZoom; + instance: DoubleClickZoom; @Input() duration: number; @@ -17,7 +17,7 @@ export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy { constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DoubleClickZoom(this); + this.instance = new DoubleClickZoom(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts index 60b7f3a1..4f4e353f 100644 --- a/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts @@ -1,16 +1,18 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { interaction, format, ProjectionLike } from 'openlayers'; +import { DragAndDrop } from 'ol/interaction'; +import Feature from 'ol/format/Feature'; import { MapComponent } from '../map.component'; +import { ProjectionLike } from 'ol/proj'; @Component({ selector: 'aol-interaction-draganddrop', template: '', }) export class DragAndDropInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragAndDrop; + instance: DragAndDrop; @Input() - formatConstructors: ((n: format.Feature) => any)[]; + formatConstructors: ((n: Feature) => any)[]; @Input() projection: ProjectionLike; @Input() @@ -19,7 +21,7 @@ export class DragAndDropInteractionComponent implements OnInit, OnDestroy { constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragAndDrop(this); + this.instance = new DragAndDrop(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts index 07521478..6f0850ee 100644 --- a/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts @@ -1,25 +1,27 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction, EventsConditionType, DragBoxEndConditionType } from 'openlayers'; +import { DragBox } from 'ol/interaction'; import { MapComponent } from '../map.component'; +import { Condition } from 'ol/events/condition'; +import { EndCondition } from 'ol/interaction/DragBox'; @Component({ selector: 'aol-interaction-dragbox', template: '', }) export class DragBoxInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragBox; + instance: DragBox; @Input() className: string; @Input() - condition: EventsConditionType; + condition: Condition; @Input() - boxEndCondition: DragBoxEndConditionType; + boxEndCondition: EndCondition; constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragBox(this); + this.instance = new DragBox(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts index fdebad88..3f281f87 100644 --- a/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts @@ -1,23 +1,25 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction, EventsConditionType, Kinetic } from 'openlayers'; +import { DragPan } from 'ol/interaction'; +import Kinetic from 'ol/Kinetic'; import { MapComponent } from '../map.component'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-dragpan', template: '', }) export class DragPanInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragPan; + instance: DragPan; @Input() - condition: EventsConditionType; + condition: Condition; @Input() kinetic: Kinetic; constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragPan(this); + this.instance = new DragPan(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts index 16462643..6a50c79c 100644 --- a/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts @@ -1,23 +1,24 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction, EventsConditionType } from 'openlayers'; +import { DragRotate } from 'ol/interaction'; import { MapComponent } from '../map.component'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-dragrotate', template: '', }) export class DragRotateInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragRotate; + instance: DragRotate; @Input() - condition: EventsConditionType; + condition: Condition; @Input() duration: number; constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragRotate(this); + this.instance = new DragRotate(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts index ff401860..6e9bd8c6 100644 --- a/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts @@ -1,23 +1,24 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction, EventsConditionType } from 'openlayers'; +import { DragRotateAndZoom } from 'ol/interaction'; import { MapComponent } from '../map.component'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-dragrotateandzoom', template: '', }) export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragRotate; + instance: DragRotateAndZoom; @Input() - condition: EventsConditionType; + condition: Condition; @Input() duration: number; constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragRotateAndZoom(this); + this.instance = new DragRotateAndZoom(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts index dc6fd16c..2a9f4ac1 100644 --- a/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts @@ -1,18 +1,19 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction, EventsConditionType } from 'openlayers'; +import { DragZoom } from 'ol/interaction'; import { MapComponent } from '../map.component'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-dragzoom', template: '', }) export class DragZoomInteractionComponent implements OnInit, OnDestroy { - instance: interaction.DragZoom; + instance: DragZoom; @Input() className: string; @Input() - condition: EventsConditionType; + condition: Condition; @Input() duration: number; @Input() @@ -21,7 +22,7 @@ export class DragZoomInteractionComponent implements OnInit, OnDestroy { constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.DragZoom(this); + this.instance = new DragZoom(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/draw.component.ts b/projects/ngx-openlayers/src/lib/interactions/draw.component.ts index edbaa38d..89dd63a3 100644 --- a/projects/ngx-openlayers/src/lib/interactions/draw.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/draw.component.ts @@ -1,65 +1,72 @@ import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core'; -import { interaction } from 'openlayers'; import { MapComponent } from '../map.component'; +import { Draw } from 'ol/interaction'; +import { Collection, Feature } from 'ol'; +import { Vector } from 'ol/source'; +import GeometryType from 'ol/geom/GeometryType'; +import { Style } from 'ol/style'; +import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw'; +import { StyleFunction } from 'ol/style/Style'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-draw', template: '', }) export class DrawInteractionComponent implements OnInit, OnDestroy { - instance: interaction.Draw; + instance: Draw; @Input() clickTolerance?: number; @Input() - features?: ol.Collection; + features?: Collection; @Input() - source?: ol.source.Vector; + source?: Vector; @Input() snapTolerance?: number; @Input() - type: ol.geom.GeometryType; + type: GeometryType; @Input() maxPoints?: number; @Input() minPoints?: number; @Input() - finishCondition?: ol.EventsConditionType; + finishCondition?: Condition; @Input() - style?: ol.style.Style | ol.style.Style[] | ol.StyleFunction; + style?: Style | Style[] | StyleFunction; @Input() - geometryFunction?: ol.DrawGeometryFunctionType; + geometryFunction?: GeometryFunction; @Input() geometryName?: string; @Input() - condition?: ol.EventsConditionType; + condition?: Condition; @Input() - freehandCondition?: ol.EventsConditionType; + freehandCondition?: Condition; @Input() freehand?: boolean; @Input() wrapX?: boolean; @Output() - onChange = new EventEmitter(); + onChange = new EventEmitter(); @Output() - onChangeActive = new EventEmitter(); + onChangeActive = new EventEmitter(); @Output() - onDrawEnd = new EventEmitter(); + onDrawEnd = new EventEmitter(); @Output() - onDrawStart = new EventEmitter(); + onDrawStart = new EventEmitter(); @Output() - onPropertyChange = new EventEmitter(); + onPropertyChange = new EventEmitter(); constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.Draw(this); - this.instance.on('change', (event: ol.interaction.Draw.Event) => this.onChange.emit(event)); - this.instance.on('change:active', (event: ol.interaction.Draw.Event) => this.onChangeActive.emit(event)); - this.instance.on('drawend', (event: ol.interaction.Draw.Event) => this.onDrawEnd.emit(event)); - this.instance.on('drawstart', (event: ol.interaction.Draw.Event) => this.onDrawStart.emit(event)); - this.instance.on('propertychange', (event: ol.interaction.Draw.Event) => this.onPropertyChange.emit(event)); + this.instance = new Draw(this); + this.instance.on('change', (event: DrawEvent) => this.onChange.emit(event)); + this.instance.on('change:active', (event: DrawEvent) => this.onChangeActive.emit(event)); + this.instance.on('drawend', (event: DrawEvent) => this.onDrawEnd.emit(event)); + this.instance.on('drawstart', (event: DrawEvent) => this.onDrawStart.emit(event)); + this.instance.on('propertychange', (event: DrawEvent) => this.onPropertyChange.emit(event)); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/modify.component.ts b/projects/ngx-openlayers/src/lib/interactions/modify.component.ts index 2f34d14c..2d61e340 100644 --- a/projects/ngx-openlayers/src/lib/interactions/modify.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/modify.component.ts @@ -1,49 +1,55 @@ import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { interaction, EventsConditionType, style, StyleFunction, Collection, Feature, source } from 'openlayers'; import { MapComponent } from '../map.component'; +import { Modify } from 'ol/interaction'; +import { Collection, Feature } from 'ol'; +import { Style } from 'ol/style'; +import { Vector } from 'ol/source'; +import { ModifyEvent } from 'ol/interaction/Modify'; +import { StyleFunction } from 'ol/style/Style'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-modify', template: '', }) export class ModifyInteractionComponent implements OnInit, OnDestroy { - instance: interaction.Modify; + instance: Modify; @Input() - condition?: EventsConditionType; + condition?: Condition; @Input() - deleteCondition?: EventsConditionType; + deleteCondition?: Condition; @Input() pixelTolerance?: number; @Input() - style?: style.Style | style.Style[] | StyleFunction; + style?: Style | Style[] | StyleFunction; @Input() features: Collection; @Input() wrapX?: boolean; @Input() - source?: source.Vector; + source?: Vector; @Output() - onModifyEnd = new EventEmitter(); + onModifyEnd = new EventEmitter(); @Output() - onModifyStart = new EventEmitter(); + onModifyStart = new EventEmitter(); @Output() - onChange = new EventEmitter(); + onChange = new EventEmitter(); @Output() - onChangeActive = new EventEmitter(); + onChangeActive = new EventEmitter(); @Output() - onPropertyChange = new EventEmitter(); + onPropertyChange = new EventEmitter(); constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.Modify(this); - this.instance.on('change', (event: interaction.Modify.Event) => this.onChange.emit(event)); - this.instance.on('change:active', (event: interaction.Modify.Event) => this.onChangeActive.emit(event)); - this.instance.on('propertychange', (event: interaction.Modify.Event) => this.onPropertyChange.emit(event)); - this.instance.on('modifyend', (event: interaction.Modify.Event) => this.onModifyEnd.emit(event)); - this.instance.on('modifystart', (event: interaction.Modify.Event) => this.onModifyStart.emit(event)); + this.instance = new Modify(this); + this.instance.on('change', (event: ModifyEvent) => this.onChange.emit(event)); + this.instance.on('change:active', (event: ModifyEvent) => this.onChangeActive.emit(event)); + this.instance.on('propertychange', (event: ModifyEvent) => this.onPropertyChange.emit(event)); + this.instance.on('modifyend', (event: ModifyEvent) => this.onModifyEnd.emit(event)); + this.instance.on('modifystart', (event: ModifyEvent) => this.onModifyStart.emit(event)); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts index a6738c24..c64deacd 100644 --- a/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { interaction } from 'openlayers'; +import { MouseWheelZoom } from 'ol/interaction'; import { MapComponent } from '../map.component'; @Component({ @@ -7,7 +7,7 @@ import { MapComponent } from '../map.component'; template: '', }) export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy { - instance: interaction.MouseWheelZoom; + instance: MouseWheelZoom; @Input() duration: number; @Input() @@ -18,7 +18,7 @@ export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy { constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.MouseWheelZoom(this); + this.instance = new MouseWheelZoom(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts b/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts index ffb6b886..5d63441f 100644 --- a/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { interaction } from 'openlayers'; +import { PinchZoom } from 'ol/interaction'; import { MapComponent } from '../map.component'; @Component({ @@ -7,7 +7,7 @@ import { MapComponent } from '../map.component'; template: '', }) export class PinchZoomInteractionComponent implements OnInit, OnDestroy { - instance: interaction.PinchZoom; + instance: PinchZoom; @Input() duration: number; @@ -17,7 +17,7 @@ export class PinchZoomInteractionComponent implements OnInit, OnDestroy { constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.PinchZoom(this); + this.instance = new PinchZoom(this); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/select.component.ts b/projects/ngx-openlayers/src/lib/interactions/select.component.ts index 258233e9..f5a19b81 100644 --- a/projects/ngx-openlayers/src/lib/interactions/select.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/select.component.ts @@ -1,59 +1,56 @@ import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { - interaction, - EventsConditionType, - layer, - style, - Collection, - SelectFilterFunction, - StyleFunction, - Feature, -} from 'openlayers'; import { MapComponent } from '../map.component'; +import { Select } from 'ol/interaction'; +import { Layer } from 'ol/layer'; +import { Style } from 'ol/style'; +import { Collection, Feature } from 'ol'; +import { SelectEvent, FilterFunction } from 'ol/interaction/Select'; +import { StyleFunction } from 'ol/style/Style'; +import { Condition } from 'ol/events/condition'; @Component({ selector: 'aol-interaction-select', template: '', }) export class SelectInteractionComponent implements OnInit, OnDestroy { - instance: interaction.Select; + instance: Select; @Input() - addCondition?: EventsConditionType; + addCondition?: Condition; @Input() - condition?: EventsConditionType; + condition?: Condition; @Input() - layers?: layer.Layer[] | ((layer: layer.Layer) => boolean); + layers?: Layer[] | ((layer: Layer) => boolean); @Input() - style?: style.Style | style.Style[] | StyleFunction; + style?: Style | Style[] | StyleFunction; @Input() - removeCondition?: EventsConditionType; + removeCondition?: Condition; @Input() - toggleCondition?: EventsConditionType; + toggleCondition?: Condition; @Input() multi?: boolean; @Input() features?: Collection; @Input() - filter?: SelectFilterFunction; + filter?: FilterFunction; @Input() wrapX?: boolean; @Output() - onChange = new EventEmitter(); + onChange = new EventEmitter(); @Output() - onSelect = new EventEmitter(); + onSelect = new EventEmitter(); @Output() - onPropertyChange = new EventEmitter(); + onPropertyChange = new EventEmitter(); constructor(private map: MapComponent) {} ngOnInit() { - this.instance = new interaction.Select(this); + this.instance = new Select(this); - this.instance.on('change', (event: interaction.Select.Event) => this.onChange.emit(event)); - this.instance.on('select', (event: interaction.Select.Event) => this.onSelect.emit(event)); - this.instance.on('propertychange', (event: interaction.Select.Event) => this.onPropertyChange.emit(event)); + this.instance.on('change', (event: SelectEvent) => this.onChange.emit(event)); + this.instance.on('select', (event: SelectEvent) => this.onSelect.emit(event)); + this.instance.on('propertychange', (event: SelectEvent) => this.onPropertyChange.emit(event)); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/interactions/translate.component.ts b/projects/ngx-openlayers/src/lib/interactions/translate.component.ts index 700aa4d0..4e1813ad 100644 --- a/projects/ngx-openlayers/src/lib/interactions/translate.component.ts +++ b/projects/ngx-openlayers/src/lib/interactions/translate.component.ts @@ -1,5 +1,8 @@ import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { interaction, layer, Collection, Feature } from 'openlayers'; +import { Translate } from 'ol/interaction'; +import { Collection, Feature } from 'ol'; +import { Layer } from 'ol/layer'; +import { TranslateEvent } from 'ol/interaction/Translate'; import { MapComponent } from '../map.component'; @Component({ @@ -7,42 +10,42 @@ import { MapComponent } from '../map.component'; template: '', }) export class TranslateInteractionComponent implements OnInit, OnDestroy { - instance: interaction.Translate; + instance: Translate; @Input() features?: Collection; @Input() - layers?: layer.Layer[] | ((layer: layer.Layer) => boolean); + layers?: Layer[] | ((layer: Layer) => boolean); @Input() hitTolerance?: number; @Output() - onChange: EventEmitter; + onChange: EventEmitter; @Output() - onPropertyChange: EventEmitter; + onPropertyChange: EventEmitter; @Output() - onTranslateEnd: EventEmitter; + onTranslateEnd: EventEmitter; @Output() - onTranslateStart: EventEmitter; + onTranslateStart: EventEmitter; @Output() - onTranslating: EventEmitter; + onTranslating: EventEmitter; constructor(private map: MapComponent) { - this.onChange = new EventEmitter(); - this.onPropertyChange = new EventEmitter(); - this.onTranslateEnd = new EventEmitter(); - this.onTranslateStart = new EventEmitter(); - this.onTranslating = new EventEmitter(); + this.onChange = new EventEmitter(); + this.onPropertyChange = new EventEmitter(); + this.onTranslateEnd = new EventEmitter(); + this.onTranslateStart = new EventEmitter(); + this.onTranslating = new EventEmitter(); } ngOnInit() { - this.instance = new interaction.Translate(this); + this.instance = new Translate(this); - this.instance.on('change', (event: interaction.Translate.Event) => this.onChange.emit(event)); - this.instance.on('propertychange', (event: interaction.Translate.Event) => this.onPropertyChange.emit(event)); - this.instance.on('translateend', (event: interaction.Translate.Event) => this.onTranslateEnd.emit(event)); - this.instance.on('translatestart', (event: interaction.Translate.Event) => this.onTranslateStart.emit(event)); - this.instance.on('translating', (event: interaction.Translate.Event) => this.onTranslating.emit(event)); + this.instance.on('change', (event: TranslateEvent) => this.onChange.emit(event)); + this.instance.on('propertychange', (event: TranslateEvent) => this.onPropertyChange.emit(event)); + this.instance.on('translateend', (event: TranslateEvent) => this.onTranslateEnd.emit(event)); + this.instance.on('translatestart', (event: TranslateEvent) => this.onTranslateStart.emit(event)); + this.instance.on('translating', (event: TranslateEvent) => this.onTranslating.emit(event)); this.map.instance.addInteraction(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/layers/layer.component.ts b/projects/ngx-openlayers/src/lib/layers/layer.component.ts index 2a04696f..b6c86f8a 100644 --- a/projects/ngx-openlayers/src/lib/layers/layer.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layer.component.ts @@ -1,7 +1,8 @@ import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core'; +import { Event } from 'ol/events'; import { MapComponent } from '../map.component'; -import { Extent } from 'openlayers'; import { LayerGroupComponent } from './layergroup.component'; +import { Extent } from 'ol/extent'; export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy { public instance: any; @@ -21,11 +22,11 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy { maxResolution: number; @Input() - precompose: (evt: ol.events.Event) => void; + precompose: (evt: Event) => void; @Input() - postcompose: (evt: ol.events.Event) => void; + postcompose: (evt: Event) => void; - constructor(protected host: LayerGroupComponent | MapComponent) {} + constructor(protected host: MapComponent | LayerGroupComponent) {} ngOnInit() { if (this.precompose !== null && this.precompose !== undefined) { diff --git a/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts index 7388cb03..f8fa6422 100644 --- a/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core'; -import { layer } from 'openlayers'; +import { Group } from 'ol/layer'; import { LayerComponent } from './layer.component'; import { MapComponent } from '../map.component'; @@ -10,7 +10,7 @@ import { MapComponent } from '../map.component'; `, }) export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy { - public instance: ol.layer.Group; + public instance: Group; constructor( map: MapComponent, @@ -23,7 +23,7 @@ export class LayerGroupComponent extends LayerComponent implements OnInit, OnDes ngOnInit() { // console.log(`creating ol.layer.Group instance with:`, this); - this.instance = new layer.Group(this); + this.instance = new Group(this); super.ngOnInit(); } } diff --git a/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts index 6473e147..e9ad0794 100644 --- a/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts @@ -1,8 +1,9 @@ import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core'; -import { Extent, layer, source } from 'openlayers'; +import { Image } from 'ol/layer'; import { MapComponent } from '../map.component'; import { LayerComponent } from './layer.component'; import { LayerGroupComponent } from './layergroup.component'; +import { Extent } from 'ol/extent'; @Component({ selector: 'aol-layer-image', @@ -11,7 +12,7 @@ import { LayerGroupComponent } from './layergroup.component'; `, }) export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges { - public source: source.Image; + public source: Image; @Input() opacity: number; @@ -31,7 +32,7 @@ export class LayerImageComponent extends LayerComponent implements OnInit, OnCha } ngOnInit() { - this.instance = new layer.Image(this); + this.instance = new Image(this); super.ngOnInit(); } diff --git a/projects/ngx-openlayers/src/lib/layers/layertile.component.ts b/projects/ngx-openlayers/src/lib/layers/layertile.component.ts index 88cc5140..a8ffdb74 100644 --- a/projects/ngx-openlayers/src/lib/layers/layertile.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layertile.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core'; -import { layer, source } from 'openlayers'; +import { Tile } from 'ol/layer'; import { MapComponent } from '../map.component'; import { LayerComponent } from './layer.component'; import { LayerGroupComponent } from './layergroup.component'; @@ -11,7 +11,7 @@ import { LayerGroupComponent } from './layergroup.component'; `, }) export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges { - public source: source.Tile; + public source: Tile; @Input() preload: number; @@ -24,7 +24,7 @@ export class LayerTileComponent extends LayerComponent implements OnInit, OnDest ngOnInit() { // console.log('creating ol.layer.Tile instance with:', this); - this.instance = new layer.Tile(this); + this.instance = new Tile(this); super.ngOnInit(); } diff --git a/projects/ngx-openlayers/src/lib/layers/layervector.component.ts b/projects/ngx-openlayers/src/lib/layers/layervector.component.ts index 952f5d39..5c3843a6 100644 --- a/projects/ngx-openlayers/src/lib/layers/layervector.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layervector.component.ts @@ -1,6 +1,8 @@ import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core'; -import { layer, source, style, StyleFunction } from 'openlayers'; import { MapComponent } from '../map.component'; +import { Vector } from 'ol/layer'; +import { Style } from 'ol/style'; +import { StyleFunction } from 'ol/style/Style'; import { LayerComponent } from './layer.component'; import { LayerGroupComponent } from './layergroup.component'; @@ -11,13 +13,13 @@ import { LayerGroupComponent } from './layergroup.component'; `, }) export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges { - public source: source.Vector; + public source: Vector; @Input() renderBuffer: number; @Input() - style: style.Style | style.Style[] | StyleFunction; + style: Style | Style[] | StyleFunction; @Input() updateWhileAnimating: boolean; @@ -31,7 +33,7 @@ export class LayerVectorComponent extends LayerComponent implements OnInit, OnDe ngOnInit() { // console.log('creating ol.layer.Vector instance with:', this); - this.instance = new layer.Vector(this); + this.instance = new Vector(this); super.ngOnInit(); } diff --git a/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts b/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts index f9e2454c..3817a995 100644 --- a/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts +++ b/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts @@ -1,8 +1,12 @@ import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core'; -import { layer, style, StyleFunction } from 'openlayers'; +import { VectorTile } from 'ol/layer'; +import { RenderType } from 'ol/layer/VectorTile'; +import { Feature } from 'ol'; +import { Style } from 'ol/style'; import { MapComponent } from '../map.component'; import { LayerComponent } from './layer.component'; import { LayerGroupComponent } from './layergroup.component'; +import { StyleFunction } from 'ol/style/Style'; @Component({ selector: 'aol-layer-vectortile', @@ -14,12 +18,12 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit, @Input() renderBuffer: number; @Input() - renderMode: layer.VectorTileRenderType | string; + renderMode: RenderType | string; /* not marked as optional in the typings */ @Input() - renderOrder: (feature1: ol.Feature, feature2: ol.Feature) => number; + renderOrder: (feature1: Feature, feature2: Feature) => number; @Input() - style: style.Style | style.Style[] | StyleFunction; + style: Style | Style[] | StyleFunction; @Input() updateWhileAnimating: boolean; @Input() @@ -33,7 +37,7 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit, ngOnInit() { // console.log('creating ol.layer.VectorTile instance with:', this); - this.instance = new layer.VectorTile(this); + this.instance = new VectorTile(this); super.ngOnInit(); } diff --git a/projects/ngx-openlayers/src/lib/map.component.ts b/projects/ngx-openlayers/src/lib/map.component.ts index 50515a5a..7201ff57 100644 --- a/projects/ngx-openlayers/src/lib/map.component.ts +++ b/projects/ngx-openlayers/src/lib/map.component.ts @@ -9,7 +9,13 @@ import { SimpleChanges, OnChanges, } from '@angular/core'; -import { Map, MapBrowserEvent, MapEvent, render, ObjectEvent, control, interaction } from 'openlayers'; +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'; @Component({ selector: 'aol-map', @@ -50,19 +56,19 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges { @Output() onPointerMove: EventEmitter; @Output() - onPostCompose: EventEmitter; + onPostCompose: EventEmitter; @Output() onPostRender: EventEmitter; @Output() - onPreCompose: EventEmitter; + onPreCompose: EventEmitter; @Output() onPropertyChange: EventEmitter; @Output() onSingleClick: EventEmitter; // we pass empty arrays to not get default controls/interactions because we have our own directives - controls: control.Control[] = []; - interactions: interaction.Interaction[] = []; + controls: Control[] = []; + interactions: Interaction[] = []; constructor(private host: ElementRef) { this.onClick = new EventEmitter(); @@ -70,9 +76,9 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges { this.onMoveEnd = new EventEmitter(); this.onPointerDrag = new EventEmitter(); this.onPointerMove = new EventEmitter(); - this.onPostCompose = new EventEmitter(); + this.onPostCompose = new EventEmitter(); this.onPostRender = new EventEmitter(); - this.onPreCompose = new EventEmitter(); + this.onPreCompose = new EventEmitter(); this.onPropertyChange = new EventEmitter(); this.onSingleClick = new EventEmitter(); } @@ -86,9 +92,9 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges { this.instance.on('moveend', (event: MapEvent) => this.onMoveEnd.emit(event)); this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.onPointerDrag.emit(event)); this.instance.on('pointermove', (event: MapBrowserEvent) => this.onPointerMove.emit(event)); - this.instance.on('postcompose', (event: render.Event) => this.onPostCompose.emit(event)); + this.instance.on('postcompose', (event: RenderEvent) => this.onPostCompose.emit(event)); this.instance.on('postrender', (event: MapEvent) => this.onPostRender.emit(event)); - this.instance.on('precompose', (event: render.Event) => this.onPreCompose.emit(event)); + this.instance.on('precompose', (event: RenderEvent) => this.onPreCompose.emit(event)); this.instance.on('propertychange', (event: ObjectEvent) => this.onPropertyChange.emit(event)); this.instance.on('singleclick', (event: MapBrowserEvent) => this.onSingleClick.emit(event)); } diff --git a/projects/ngx-openlayers/src/lib/overlay.component.ts b/projects/ngx-openlayers/src/lib/overlay.component.ts index 53cbe782..c9ceea24 100644 --- a/projects/ngx-openlayers/src/lib/overlay.component.ts +++ b/projects/ngx-openlayers/src/lib/overlay.component.ts @@ -1,7 +1,8 @@ import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core'; import { MapComponent } from './map.component'; -import { Overlay, OverlayPositioning } from 'openlayers'; +import { Overlay, PanOptions } from 'ol'; import { ContentComponent } from './content.component'; +import OverlayPositioning from 'ol/OverlayPositioning'; @Component({ selector: 'aol-overlay', @@ -27,7 +28,7 @@ export class OverlayComponent implements OnInit, OnDestroy { @Input() autoPan: boolean; @Input() - autoPanAnimation: olx.animation.PanOptions; + autoPanAnimation: PanOptions; @Input() autoPanMargin: number; diff --git a/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts b/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts index 24a601cf..8977ba72 100644 --- a/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts @@ -1,7 +1,8 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; -import { source, TileLoadFunctionType } from 'openlayers'; +import { BingMaps } from 'ol/source'; import { SourceComponent } from './source.component'; import { LayerTileComponent } from '../layers/layertile.component'; +import { LoadFunction } from 'ol/Tile'; @Component({ selector: 'aol-source-bingmaps', @@ -11,7 +12,7 @@ import { LayerTileComponent } from '../layers/layertile.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }], }) export class SourceBingmapsComponent extends SourceComponent implements OnInit { - instance: source.BingMaps; + instance: BingMaps; @Input() cacheSize: number; @@ -28,7 +29,7 @@ export class SourceBingmapsComponent extends SourceComponent implements OnInit { @Input() reprojectionErrorThreshold: number; @Input() - tileLoadFunction: TileLoadFunctionType; + tileLoadFunction: LoadFunction; @Input() wrapX: boolean; @@ -37,7 +38,7 @@ export class SourceBingmapsComponent extends SourceComponent implements OnInit { } ngOnInit() { - this.instance = new source.BingMaps(this); + this.instance = new BingMaps(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/cluster.component.ts b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts index 623c33c6..120c0473 100644 --- a/projects/ngx-openlayers/src/lib/sources/cluster.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts @@ -1,8 +1,10 @@ import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core'; -import { source, Feature, geom } from 'openlayers'; +import { Feature } from 'ol'; import { LayerVectorComponent } from '../layers/layervector.component'; import { SourceComponent } from './source.component'; import { SourceVectorComponent } from './vector.component'; +import { Cluster, Vector } from 'ol/source'; +import { Point } from 'ol/geom'; @Component({ selector: 'aol-source-cluster', @@ -12,18 +14,18 @@ import { SourceVectorComponent } from './vector.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }], }) export class SourceClusterComponent extends SourceComponent implements AfterContentInit { - instance: source.Cluster; + instance: Cluster; @Input() distance: number; @Input() - geometryFunction?: (feature: Feature) => geom.Point; + geometryFunction?: (feature: Feature) => Point; @Input() wrapX?: boolean; @ContentChild(SourceVectorComponent) sourceVectorComponent: SourceVectorComponent; - source: source.Vector; + source: Vector; constructor(@Host() layer: LayerVectorComponent) { super(layer); @@ -32,7 +34,7 @@ export class SourceClusterComponent extends SourceComponent implements AfterCont ngAfterContentInit() { this.source = this.sourceVectorComponent.instance; - this.instance = new source.Cluster(this); + this.instance = new Cluster(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/geojson.component.ts b/projects/ngx-openlayers/src/lib/sources/geojson.component.ts index 4e3f4056..0376ad88 100644 --- a/projects/ngx-openlayers/src/lib/sources/geojson.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/geojson.component.ts @@ -1,7 +1,10 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; -import { source, ProjectionLike, format } from 'openlayers'; import { LayerVectorComponent } from '../layers/layervector.component'; import { SourceComponent } from './source.component'; +import { Feature } from 'ol'; +import { Vector } from 'ol/source'; +import { GeoJSON } from 'ol/format'; +import { ProjectionLike } from 'ol/proj'; @Component({ selector: 'aol-source-geojson', @@ -11,8 +14,8 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }], }) export class SourceGeoJSONComponent extends SourceComponent implements OnInit { - instance: source.Vector; - format: format.Feature; + instance: Vector; + format: Feature; @Input() defaultDataProjection: ProjectionLike; @Input() @@ -27,8 +30,8 @@ export class SourceGeoJSONComponent extends SourceComponent implements OnInit { } ngOnInit() { - this.format = new format.GeoJSON(this); - this.instance = new source.Vector(this); + this.format = new GeoJSON(this); + this.instance = new Vector(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts index 6434f264..4c06d106 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts @@ -1,8 +1,10 @@ import { Component, forwardRef, Host, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; -import { Attribution, ImageLoadFunctionType, ProjectionLike, source } from 'openlayers'; - +import { ImageArcGISRest } from 'ol/source'; import { LayerImageComponent } from '../layers/layerimage.component'; import { SourceComponent } from './source.component'; +import { ProjectionLike } from 'ol/proj'; +import { AttributionLike } from 'ol/source/Source'; +import { LoadFunction } from 'ol/Image'; @Component({ selector: 'aol-source-imagearcgisrest', @@ -12,17 +14,16 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }], }) export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges { - 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?: LoadFunction; @Input() params?: { [k: string]: any }; - @Input() ratio = 1; + @Input() ratio = 1.5; @Input() resolutions?: number[]; - @Input() logo?: string | olx.LogoOptions; @Input() wrapX?: boolean; constructor(@Host() layer: LayerImageComponent) { @@ -30,7 +31,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O } 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/imagestatic.component.ts b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts index ababa90d..004c2f5e 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts @@ -1,7 +1,13 @@ import { Component, Host, Input, OnInit, forwardRef, Output, EventEmitter } from '@angular/core'; -import { ProjectionLike, source, Extent, AttributionLike, ImageLoadFunctionType, Size } from 'openlayers'; +import { ImageStatic } from 'ol/source'; import { SourceComponent } from './source.component'; import { LayerImageComponent } from '../layers/layerimage.component'; +import { ProjectionLike } from 'ol/proj'; +import { Extent } from 'ol/extent'; +import { AttributionLike } from 'ol/source/Source'; +import { LoadFunction } from 'ol/Image'; +import { Size } from 'ol/size'; +import { ImageSourceEvent } from 'ol/source/Image'; @Component({ selector: 'aol-source-imagestatic', @@ -11,7 +17,7 @@ import { LayerImageComponent } from '../layers/layerimage.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }], }) export class SourceImageStaticComponent extends SourceComponent implements OnInit { - instance: source.ImageStatic; + instance: ImageStatic; @Input() projection: ProjectionLike | string; @@ -24,28 +30,26 @@ export class SourceImageStaticComponent extends SourceComponent implements OnIni @Input() crossOrigin?: string; @Input() - imageLoadFunction?: ImageLoadFunctionType; - @Input() - logo?: string | olx.LogoOptions; + imageLoadFunction?: LoadFunction; @Input() imageSize?: Size; @Output() - onImageLoadStart = new EventEmitter(); + onImageLoadStart = new EventEmitter(); @Output() - onImageLoadEnd = new EventEmitter(); + onImageLoadEnd = new EventEmitter(); @Output() - onImageLoadError = new EventEmitter(); + onImageLoadError = new EventEmitter(); constructor(@Host() layer: LayerImageComponent) { super(layer); } ngOnInit() { - this.instance = new source.ImageStatic(this); + this.instance = new ImageStatic(this); this.host.instance.setSource(this.instance); - this.instance.on('imageloadstart', (event: source.ImageEvent) => this.onImageLoadStart.emit(event)); - this.instance.on('imageloadend', (event: source.ImageEvent) => this.onImageLoadEnd.emit(event)); - this.instance.on('imageloaderror', (event: source.ImageEvent) => this.onImageLoadError.emit(event)); + this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.onImageLoadStart.emit(event)); + this.instance.on('imageloadend', (event: ImageSourceEvent) => this.onImageLoadEnd.emit(event)); + this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.onImageLoadError.emit(event)); } } diff --git a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts index 5e304bf1..59ae1f47 100644 --- a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts @@ -9,9 +9,13 @@ import { Output, EventEmitter, } from '@angular/core'; -import { AttributionLike, ImageLoadFunctionType, ProjectionLike, source } from 'openlayers'; +import { ImageWMS } from 'ol/source'; import { LayerImageComponent } from '../layers/layerimage.component'; import { SourceComponent } from './source.component'; +import { ProjectionLike } from 'ol/proj'; +import { AttributionLike } from 'ol/source/Source'; +import { LoadFunction } from 'ol/Image'; +import { ImageSourceEvent } from 'ol/source/Image'; @Component({ selector: 'aol-source-imagewms', @@ -21,7 +25,7 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }], }) export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit { - instance: source.ImageWMS; + instance: ImageWMS; @Input() attributions: AttributionLike; @@ -32,9 +36,7 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange @Input() serverType: string; @Input() - imageLoadFunction?: ImageLoadFunctionType; - @Input() - logo: string | olx.LogoOptions; + imageLoadFunction?: LoadFunction; @Input() params: Object; @Input() @@ -47,22 +49,22 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange url: string; @Output() - onImageLoadStart = new EventEmitter(); + onImageLoadStart = new EventEmitter(); @Output() - onImageLoadEnd = new EventEmitter(); + onImageLoadEnd = new EventEmitter(); @Output() - onImageLoadError = new EventEmitter(); + onImageLoadError = new EventEmitter(); constructor(@Host() layer: LayerImageComponent) { super(layer); } ngOnInit() { - this.instance = new source.ImageWMS(this); + this.instance = new ImageWMS(this); this.host.instance.setSource(this.instance); - this.instance.on('imageloadstart', (event: source.ImageEvent) => this.onImageLoadStart.emit(event)); - this.instance.on('imageloadend', (event: source.ImageEvent) => this.onImageLoadEnd.emit(event)); - this.instance.on('imageloaderror', (event: source.ImageEvent) => this.onImageLoadError.emit(event)); + this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.onImageLoadStart.emit(event)); + this.instance.on('imageloadend', (event: ImageSourceEvent) => this.onImageLoadEnd.emit(event)); + this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.onImageLoadError.emit(event)); } ngOnChanges(changes: SimpleChanges) { diff --git a/projects/ngx-openlayers/src/lib/sources/osm.component.ts b/projects/ngx-openlayers/src/lib/sources/osm.component.ts index d1e9e640..8f9eb473 100644 --- a/projects/ngx-openlayers/src/lib/sources/osm.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/osm.component.ts @@ -1,9 +1,12 @@ import { Component, Host, forwardRef, Input, AfterContentInit, Optional, Output, EventEmitter } from '@angular/core'; -import { source, AttributionLike, TileLoadFunctionType } from 'openlayers'; +import { OSM } from 'ol/source'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; import { SourceXYZComponent } from './xyz.component'; import { SourceRasterComponent } from './raster.component'; +import { LoadFunction } from 'ol/Tile'; +import { AttributionLike } from 'ol/source/Source'; +import { TileSourceEvent } from 'ol/source/Tile'; @Component({ selector: 'aol-source-osm', @@ -13,7 +16,7 @@ import { SourceRasterComponent } from './raster.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }], }) export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit { - instance: source.OSM; + instance: OSM; @Input() attributions: AttributionLike; @@ -28,18 +31,18 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte @Input() reprojectionErrorThreshold: number; @Input() - tileLoadFunction: TileLoadFunctionType; + tileLoadFunction: LoadFunction; @Input() url: string; @Input() wrapX: boolean; @Output() - tileLoadStart: EventEmitter = new EventEmitter(); + tileLoadStart: EventEmitter = new EventEmitter(); @Output() - tileLoadEnd: EventEmitter = new EventEmitter(); + tileLoadEnd: EventEmitter = new EventEmitter(); @Output() - tileLoadError: EventEmitter = new EventEmitter(); + tileLoadError: EventEmitter = new EventEmitter(); constructor( @Host() @@ -57,12 +60,11 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte this.tileGrid = this.tileGridXYZ.instance; } - this.instance = new source.OSM(this); - - this.instance.on('tileloadstart', (event: source.TileEvent) => this.tileLoadStart.emit(event)); - this.instance.on('tileloadend', (event: source.TileEvent) => this.tileLoadEnd.emit(event)); - this.instance.on('tileloaderror', (event: source.TileEvent) => this.tileLoadError.emit(event)); + 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); } } diff --git a/projects/ngx-openlayers/src/lib/sources/raster.component.ts b/projects/ngx-openlayers/src/lib/sources/raster.component.ts index 45779249..91c334d2 100644 --- a/projects/ngx-openlayers/src/lib/sources/raster.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/raster.component.ts @@ -1,8 +1,9 @@ import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Output } from '@angular/core'; -import { RasterOperation, RasterOperationType, source } from 'openlayers'; - +import { Raster, Source } from 'ol/source'; +import { RasterOperationType, RasterSourceEvent } from 'ol/source/Raster'; import { LayerImageComponent } from '../layers/layerimage.component'; import { SourceComponent } from './source.component'; +import { Operation } from 'ol/source/Raster'; @Component({ selector: 'aol-source-raster', @@ -17,10 +18,10 @@ import { SourceComponent } from './source.component'; ], }) export class SourceRasterComponent extends SourceComponent implements AfterContentInit { - instance: source.Raster; + instance: Raster; @Input() - operation?: RasterOperation; + operation?: Operation; @Input() threads?: number; @Input() @@ -29,11 +30,11 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte operationType?: RasterOperationType; @Output() - beforeOperations: EventEmitter = new EventEmitter(); + beforeOperations: EventEmitter = new EventEmitter(); @Output() - afterOperations: EventEmitter = new EventEmitter(); + afterOperations: EventEmitter = new EventEmitter(); - sources: source.Source[] = []; + sources: Source[] = []; constructor(@Host() layer: LayerImageComponent) { super(layer); @@ -44,9 +45,9 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte } init() { - this.instance = new source.Raster(this); - this.instance.on('beforeoperations', (event: source.RasterEvent) => this.beforeOperations.emit(event)); - this.instance.on('afteroperations', (event: source.RasterEvent) => this.afterOperations.emit(event)); + this.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); } } diff --git a/projects/ngx-openlayers/src/lib/sources/source.component.ts b/projects/ngx-openlayers/src/lib/sources/source.component.ts index 9646e4dd..17fc8556 100644 --- a/projects/ngx-openlayers/src/lib/sources/source.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/source.component.ts @@ -1,15 +1,14 @@ import { Input, OnDestroy } from '@angular/core'; -import { source } from 'openlayers'; +import { Source } from 'ol'; import { LayerComponent } from '../layers/layer.component'; -import AttributionLike = ol.AttributionLike; import { SourceRasterComponent } from './raster.component'; export class SourceComponent implements OnDestroy { - public instance: source.Source; + public instance: Source; public componentType = 'source'; @Input() - attributions: AttributionLike; + attributions: any; constructor(protected host: LayerComponent, protected raster?: SourceRasterComponent) {} @@ -23,7 +22,7 @@ export class SourceComponent implements OnDestroy { } } - protected _register(s: source.Source) { + protected _register(s: Source) { if (this.host) { this.host.instance.setSource(s); } diff --git a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts index 201c8fd6..d85737d7 100644 --- a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts @@ -1,5 +1,5 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; -import { source } from 'openlayers'; +import { TileJSON } from 'ol/source'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; @@ -11,7 +11,7 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }], }) export class SourceTileJSONComponent extends SourceComponent implements OnInit { - instance: source.TileJSON; + instance: TileJSON; @Input() url: string; @@ -21,7 +21,7 @@ export class SourceTileJSONComponent extends SourceComponent implements OnInit { } ngOnInit() { - this.instance = new source.TileJSON(this); + this.instance = new TileJSON(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts index 9595e013..646f47f2 100644 --- a/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts @@ -1,7 +1,9 @@ import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core'; -import { source, TileLoadFunctionType, tilegrid } from 'openlayers'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; +import { TileWMS } from 'ol/source'; +import { TileGrid } from 'ol/tilegrid'; +import { LoadFunction } from 'ol/Tile'; @Component({ selector: 'aol-source-tilewms', @@ -11,7 +13,7 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }], }) export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit { - instance: source.TileWMS; + instance: TileWMS; @Input() cacheSize: number; @Input() @@ -29,9 +31,9 @@ export class SourceTileWMSComponent extends SourceComponent implements OnChanges @Input() serverType: string; @Input() - tileGrid: tilegrid.TileGrid; + tileGrid: TileGrid; @Input() - tileLoadFunction: TileLoadFunctionType; + tileLoadFunction: LoadFunction; @Input() url: string; @Input() @@ -44,7 +46,7 @@ export class SourceTileWMSComponent extends SourceComponent implements OnChanges } ngOnInit() { - this.instance = new source.TileWMS(this); + this.instance = new TileWMS(this); this.host.instance.setSource(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts index 4093cffa..a59f437c 100644 --- a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts @@ -8,10 +8,14 @@ import { SimpleChanges, OnChanges, } from '@angular/core'; -import { TileLoadFunctionType, tilegrid, ProjectionLike, source, ImageTile, TileCoord, Tile } from 'openlayers'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; import { TileGridWMTSComponent } from '../tilegridwmts.component'; +import { WMTS } from 'ol/source'; +import { WMTS as TileGridWMTS } from 'ol/tilegrid'; +import { WMTSRequestEncoding } from 'ol/source'; +import { ProjectionLike } from 'ol/proj'; +import { LoadFunction } from 'ol/Tile'; @Component({ selector: 'aol-source-tilewmts', @@ -21,34 +25,25 @@ import { TileGridWMTSComponent } from '../tilegridwmts.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }], }) export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges { - instance: source.WMTS; + instance: WMTS; @Input() cacheSize?: number; @Input() crossOrigin?: string; @Input() - logo?: string | olx.LogoOptions; - @Input() - tileGrid: tilegrid.WMTS; + tileGrid: TileGridWMTS; @Input() projection: ProjectionLike; @Input() reprojectionErrorThreshold?: number; @Input() - requestEncoding?: source.WMTSRequestEncoding | string; + requestEncoding?: WMTSRequestEncoding | string; @Input() layer: string; @Input() style: string; @Input() - tileClass?: ( - n: ImageTile, - coords: TileCoord, - state: Tile.State, - s1: string, - s2: string, - type: TileLoadFunctionType - ) => any; + tileClass?: any; @Input() tilePixelRatio?: number; @Input() @@ -58,11 +53,11 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon @Input() matrixSet: string; @Input() - dimensions?: GlobalObject; + dimensions?: Object; @Input() url?: string; @Input() - tileLoadFunction?: TileLoadFunctionType; + tileLoadFunction?: LoadFunction; @Input() urls?: string[]; @Input() @@ -97,7 +92,7 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon } setLayerSource(): void { - this.instance = new source.WMTS(this); + this.instance = new WMTS(this); this.host.instance.setSource(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/sources/vector.component.ts b/projects/ngx-openlayers/src/lib/sources/vector.component.ts index 370c9abb..493f1837 100644 --- a/projects/ngx-openlayers/src/lib/sources/vector.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/vector.component.ts @@ -1,7 +1,9 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core'; -import { source } from 'openlayers'; +import { Vector } from 'ol/source'; +import Feature from 'ol/format/Feature'; import { LayerVectorComponent } from '../layers/layervector.component'; import { SourceComponent } from './source.component'; +import { LoadingStrategy } from 'ol/source/Vector'; @Component({ selector: 'aol-source-vector', @@ -11,7 +13,7 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }], }) export class SourceVectorComponent extends SourceComponent implements OnInit { - instance: source.Vector; + instance: Vector; @Input() overlaps: boolean; @Input() @@ -21,16 +23,16 @@ export class SourceVectorComponent extends SourceComponent implements OnInit { @Input() url: string; @Input() - format: ol.format.Feature; + format: Feature; @Input() - strategy: ol.LoadingStrategy; + strategy: LoadingStrategy; constructor(@Host() layer: LayerVectorComponent) { super(layer); } ngOnInit() { - this.instance = new source.Vector(this); + this.instance = new Vector(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts b/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts index 0a535ab7..fb426dc2 100644 --- a/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts @@ -1,9 +1,13 @@ import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core'; -import { source, ProjectionLike, TileUrlFunctionType, format, tilegrid } from 'openlayers'; +import { VectorTile } from 'ol'; +import Feature from 'ol/format/Feature'; +import TileGrid from 'ol/tilegrid/TileGrid'; import { LayerVectorTileComponent } from '../layers/layervectortile.component'; import { FormatComponent } from '../formats/format.component'; import { TileGridComponent } from '../tilegrid.component'; import { SourceComponent } from './source.component'; +import { ProjectionLike } from 'ol/proj'; +import { UrlFunction } from 'ol/Tile'; @Component({ selector: 'aol-source-vectortile', @@ -13,7 +17,7 @@ import { SourceComponent } from './source.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }], }) export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit { - public instance: source.VectorTile; + public instance: VectorTile; @Input() cacheSize: number; @Input() @@ -23,7 +27,7 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC @Input() tilePixelRatio: number; @Input() - tileUrlFunction: TileUrlFunctionType; + tileUrlFunction: UrlFunction; @Input() url: string; @Input() @@ -33,10 +37,10 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC @ContentChild(FormatComponent) formatComponent: FormatComponent; - format: format.Feature; + format: Feature; @ContentChild(TileGridComponent) tileGridComponent: TileGridComponent; - tileGrid: tilegrid.TileGrid; + tileGrid: TileGrid; constructor(@Host() layer: LayerVectorTileComponent) { super(layer); @@ -47,7 +51,7 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC this.format = this.formatComponent.instance; this.tileGrid = this.tileGridComponent.instance; // console.log('creating ol.source.VectorTile instance with:', this); - this.instance = new source.VectorTile(this); + this.instance = new VectorTile(this); this.host.instance.setSource(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts index d3209e40..a3fff055 100644 --- a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts +++ b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts @@ -11,11 +11,15 @@ import { Output, EventEmitter, } from '@angular/core'; -import { source, Size, TileUrlFunctionType, TileLoadFunctionType, tilegrid } from 'openlayers'; +import { XYZ } from 'ol/source'; import { LayerTileComponent } from '../layers/layertile.component'; import { SourceComponent } from './source.component'; import { TileGridComponent } from '../tilegrid.component'; import { SourceRasterComponent } from './raster.component'; +import { Size } from 'ol/size'; +import { TileSourceEvent } from 'ol/source/Tile'; +import TileGrid from 'ol/tilegrid/TileGrid'; +import { LoadFunction, UrlFunction } from 'ol/Tile'; @Component({ selector: 'aol-source-xyz', @@ -25,7 +29,7 @@ import { SourceRasterComponent } from './raster.component'; providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }], }) export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges { - instance: source.XYZ; + instance: XYZ; @Input() cacheSize: number; @Input() @@ -41,15 +45,15 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI @Input() maxZoom: number; @Input() - tileGrid: tilegrid.TileGrid; + tileGrid: TileGrid; @Input() - tileLoadFunction?: TileLoadFunctionType; + tileLoadFunction?: LoadFunction; @Input() tilePixelRatio: number; @Input() tileSize: number | Size; @Input() - tileUrlFunction: TileUrlFunctionType; + tileUrlFunction?: UrlFunction; @Input() url: string; @Input() @@ -61,11 +65,11 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI tileGridXYZ: TileGridComponent; @Output() - tileLoadStart: EventEmitter = new EventEmitter(); + tileLoadStart: EventEmitter = new EventEmitter(); @Output() - tileLoadEnd: EventEmitter = new EventEmitter(); + tileLoadEnd: EventEmitter = new EventEmitter(); @Output() - tileLoadError: EventEmitter = new EventEmitter(); + tileLoadError: EventEmitter = new EventEmitter(); constructor( @Optional() @@ -104,11 +108,11 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI } init() { - this.instance = new source.XYZ(this); + this.instance = new XYZ(this); - this.instance.on('tileloadstart', (event: source.TileEvent) => this.tileLoadStart.emit(event)); - this.instance.on('tileloadend', (event: source.TileEvent) => this.tileLoadEnd.emit(event)); - this.instance.on('tileloaderror', (event: source.TileEvent) => this.tileLoadError.emit(event)); + 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); } diff --git a/projects/ngx-openlayers/src/lib/styles/circle.component.ts b/projects/ngx-openlayers/src/lib/styles/circle.component.ts index 7efc7088..908362f1 100644 --- a/projects/ngx-openlayers/src/lib/styles/circle.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/circle.component.ts @@ -1,5 +1,5 @@ import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; -import { style } from 'openlayers'; +import { AtlasManager, Circle, Fill, Stroke } from 'ol/style'; import { StyleComponent } from './style.component'; @Component({ @@ -10,18 +10,18 @@ import { StyleComponent } from './style.component'; }) export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy { public componentType = 'style-circle'; - public instance: style.Circle; + public instance: Circle; @Input() - fill: style.Fill; + fill: Fill; @Input() radius: number; @Input() snapToPixel: boolean; @Input() - stroke: style.Stroke; + stroke: Stroke; @Input() - atlasManager: style.AtlasManager; + atlasManager: AtlasManager; constructor(@Host() private host: StyleComponent) {} @@ -40,7 +40,7 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest ngAfterContentInit() { // console.log('creating ol.style.Circle instance with: ', this); - this.instance = new style.Circle(this); + this.instance = new Circle(this); this.host.instance.setImage(this.instance); this.host.update(); } diff --git a/projects/ngx-openlayers/src/lib/styles/fill.component.ts b/projects/ngx-openlayers/src/lib/styles/fill.component.ts index 1059bd00..60664b23 100644 --- a/projects/ngx-openlayers/src/lib/styles/fill.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/fill.component.ts @@ -1,8 +1,10 @@ import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { style, Color, ColorLike } from 'openlayers'; +import { Fill } from 'ol/style'; import { StyleComponent } from './style.component'; import { StyleCircleComponent } from './circle.component'; import { StyleTextComponent } from './text.component'; +import { Color } from 'ol/color'; +import { ColorLike } from 'ol/colorlike'; @Component({ selector: 'aol-style-fill', @@ -13,7 +15,7 @@ import { StyleTextComponent } from './text.component'; export class StyleFillComponent implements OnInit, OnChanges { /* the typings do not have the setters */ private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any; - public instance: style.Fill; + public instance: Fill; @Input() color: Color | ColorLike; @@ -38,7 +40,7 @@ export class StyleFillComponent implements OnInit, OnChanges { ngOnInit() { // console.log('creating ol.style.Fill instance with: ', this); - this.instance = new style.Fill(this); + this.instance = new Fill(this); switch (this.host.componentType) { case 'style': this.host.instance.setFill(this.instance); diff --git a/projects/ngx-openlayers/src/lib/styles/icon.component.ts b/projects/ngx-openlayers/src/lib/styles/icon.component.ts index a2126af7..a86f78b8 100644 --- a/projects/ngx-openlayers/src/lib/styles/icon.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/icon.component.ts @@ -1,5 +1,7 @@ import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { style } from 'openlayers'; +import { Icon } from 'ol/style'; +import IconAnchorUnits from 'ol/style/IconAnchorUnits'; +import IconOrigin from 'ol/style/IconOrigin'; import { StyleComponent } from './style.component'; @Component({ @@ -9,26 +11,26 @@ import { StyleComponent } from './style.component'; `, }) export class StyleIconComponent implements OnInit, OnChanges { - public instance: style.Icon; + public instance: Icon; @Input() anchor: [number, number]; @Input() - anchorXUnits: style.IconAnchorUnits; + anchorXUnits: IconAnchorUnits; @Input() - anchorYUnits: style.IconAnchorUnits; + anchorYUnits: IconAnchorUnits; @Input() - anchorOrigin: style.IconOrigin; + anchorOrigin: IconOrigin; @Input() color: [number, number, number, number]; @Input() - crossOrigin: style.IconOrigin; + crossOrigin: IconOrigin; @Input() img: string; @Input() offset: [number, number]; @Input() - offsetOrigin: style.IconOrigin; + offsetOrigin: IconOrigin; @Input() opacity: number; @Input() @@ -50,7 +52,7 @@ export class StyleIconComponent implements OnInit, OnChanges { ngOnInit() { // console.log('creating ol.style.Icon instance with: ', this); - this.instance = new style.Icon(this); + this.instance = new Icon(this); this.host.instance.setImage(this.instance); } @@ -68,7 +70,7 @@ export class StyleIconComponent implements OnInit, OnChanges { this.instance.setScale(changes['scale'].currentValue); } if (changes['src']) { - this.instance = new style.Icon(this); + this.instance = new Icon(this); this.host.instance.setImage(this.instance); } this.host.update(); diff --git a/projects/ngx-openlayers/src/lib/styles/stroke.component.ts b/projects/ngx-openlayers/src/lib/styles/stroke.component.ts index 89e8eeae..340ca879 100644 --- a/projects/ngx-openlayers/src/lib/styles/stroke.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/stroke.component.ts @@ -1,8 +1,9 @@ import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { style, Color } from 'openlayers'; +import { Stroke } from 'ol/style'; import { StyleComponent } from './style.component'; import { StyleCircleComponent } from './circle.component'; import { StyleTextComponent } from './text.component'; +import { Color } from 'ol/color'; @Component({ selector: 'aol-style-stroke', @@ -11,7 +12,7 @@ import { StyleTextComponent } from './text.component'; `, }) export class StyleStrokeComponent implements OnInit, OnChanges { - public instance: style.Stroke; + public instance: Stroke; /* the typings do not have the setters */ private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any; @@ -48,7 +49,7 @@ export class StyleStrokeComponent implements OnInit, OnChanges { ngOnInit() { // console.log('creating ol.style.Stroke instance with: ', this); - this.instance = new style.Stroke(this); + this.instance = new Stroke(this); switch (this.host.componentType) { case 'style': this.host.instance.setStroke(this.instance); diff --git a/projects/ngx-openlayers/src/lib/styles/style.component.ts b/projects/ngx-openlayers/src/lib/styles/style.component.ts index 02b9d30a..f1ab6b64 100644 --- a/projects/ngx-openlayers/src/lib/styles/style.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/style.component.ts @@ -1,7 +1,9 @@ import { Component, Input, Optional, OnInit } from '@angular/core'; -import { style, StyleGeometryFunction, geom } from 'openlayers'; +import { Fill, Image, Stroke, Style, Text } from 'ol/style'; +import { Geometry } from 'ol/geom'; import { FeatureComponent } from '../feature.component'; import { LayerVectorComponent } from '../layers/layervector.component'; +import { GeometryFunction } from 'ol/style/Style'; @Component({ selector: 'aol-style', @@ -11,19 +13,19 @@ import { LayerVectorComponent } from '../layers/layervector.component'; }) export class StyleComponent implements OnInit { private host: FeatureComponent | LayerVectorComponent; - public instance: style.Style; + public instance: Style; public componentType = 'style'; @Input() - geometry: string | geom.Geometry | StyleGeometryFunction; + geometry: string | Geometry | GeometryFunction; @Input() - fill: style.Fill; + fill: Fill; @Input() - image: style.Image; + image: Image; @Input() - stroke: style.Stroke; + stroke: Stroke; @Input() - text: style.Text; + text: Text; @Input() zIndex: number; @@ -42,7 +44,7 @@ export class StyleComponent implements OnInit { ngOnInit() { // console.log('creating aol-style instance with: ', this); - this.instance = new style.Style(this); + this.instance = new Style(this); this.host.instance.setStyle(this.instance); } } diff --git a/projects/ngx-openlayers/src/lib/styles/text.component.ts b/projects/ngx-openlayers/src/lib/styles/text.component.ts index 83c8990e..e502cc5b 100644 --- a/projects/ngx-openlayers/src/lib/styles/text.component.ts +++ b/projects/ngx-openlayers/src/lib/styles/text.component.ts @@ -1,5 +1,5 @@ import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { style } from 'openlayers'; +import { Text } from 'ol/style'; import { StyleComponent } from './style.component'; @Component({ @@ -9,7 +9,7 @@ import { StyleComponent } from './style.component'; `, }) export class StyleTextComponent implements OnInit, OnChanges { - public instance: style.Text; + public instance: Text; public componentType = 'style-text'; @Input() @@ -40,7 +40,7 @@ export class StyleTextComponent implements OnInit, OnChanges { ngOnInit() { // console.log('creating ol.style.Text instance with: ', this); - this.instance = new style.Text(this); + this.instance = new Text(this); this.host.instance.setText(this.instance); } diff --git a/projects/ngx-openlayers/src/lib/tilegrid.component.ts b/projects/ngx-openlayers/src/lib/tilegrid.component.ts index b87b6dd8..c596201b 100644 --- a/projects/ngx-openlayers/src/lib/tilegrid.component.ts +++ b/projects/ngx-openlayers/src/lib/tilegrid.component.ts @@ -1,12 +1,16 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; -import { tilegrid, Extent, Size, Coordinate } from 'openlayers'; +import { createXYZ } from 'ol/tilegrid'; +import TileGrid from 'ol/tilegrid/TileGrid'; +import { Extent } from 'ol/extent'; +import { Coordinate } from 'ol/coordinate'; +import { Size } from 'ol/size'; @Component({ selector: 'aol-tilegrid', template: '', }) export class TileGridComponent implements OnInit, OnChanges { - instance: tilegrid.TileGrid; + instance: TileGrid; @Input() extent: Extent; @@ -23,17 +27,17 @@ export class TileGridComponent implements OnInit, OnChanges { ngOnInit() { if (!this.resolutions) { - this.instance = tilegrid.createXYZ(this); + this.instance = createXYZ(this); } else { - this.instance = new tilegrid.TileGrid(this); + this.instance = new TileGrid(this); } } ngOnChanges(changes: SimpleChanges) { if (!this.resolutions) { - this.instance = tilegrid.createXYZ(this); + this.instance = createXYZ(this); } else { - this.instance = new tilegrid.TileGrid(this); + this.instance = new TileGrid(this); } } } diff --git a/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts b/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts index 150eebd5..5ef6584a 100644 --- a/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts +++ b/projects/ngx-openlayers/src/lib/tilegridwmts.component.ts @@ -1,13 +1,15 @@ import { Component, Input, OnInit } from '@angular/core'; -import { tilegrid, Size, Coordinate } from 'openlayers'; +import WMTS from 'ol/tilegrid/WMTS'; import { TileGridComponent } from './tilegrid.component'; +import { Coordinate } from 'ol/coordinate'; +import { Size } from 'ol/size'; @Component({ selector: 'aol-tilegrid-wmts', template: '', }) export class TileGridWMTSComponent extends TileGridComponent implements OnInit { - instance: tilegrid.WMTS; + instance: WMTS; @Input() origin?: Coordinate; @@ -25,6 +27,6 @@ export class TileGridWMTSComponent extends TileGridComponent implements OnInit { widths?: number[]; ngOnInit() { - this.instance = new tilegrid.WMTS(this); + this.instance = new WMTS(this); } } diff --git a/projects/ngx-openlayers/src/lib/view.component.ts b/projects/ngx-openlayers/src/lib/view.component.ts index 2de3d304..a0c4a1ed 100644 --- a/projects/ngx-openlayers/src/lib/view.component.ts +++ b/projects/ngx-openlayers/src/lib/view.component.ts @@ -1,6 +1,9 @@ import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core'; -import { View, Extent, ObjectEvent, Coordinate } from 'openlayers'; +import View from 'ol/View'; import { MapComponent } from './map.component'; +import { ObjectEvent } from 'ol'; +import { Extent } from 'ol/extent'; +import { Coordinate } from 'ol/coordinate'; @Component({ selector: 'aol-view', diff --git a/projects/ngx-openlayers/src/public_api.ts b/projects/ngx-openlayers/src/public_api.ts index a1caee86..6201429a 100644 --- a/projects/ngx-openlayers/src/public_api.ts +++ b/projects/ngx-openlayers/src/public_api.ts @@ -69,8 +69,8 @@ import { ModifyInteractionComponent } from './lib/interactions/modify.component' import { TranslateInteractionComponent } from './lib/interactions/translate.component'; import { OverlayComponent } from './lib/overlay.component'; import { ContentComponent } from './lib/content.component'; -import { AttributionComponent } from './lib/attribution.component'; import { AttributionsComponent } from './lib/attributions.component'; +import { AttributionComponent } from './lib/attribution.component'; export { MapComponent, @@ -138,8 +138,8 @@ export { TranslateInteractionComponent, OverlayComponent, ContentComponent, - AttributionComponent, AttributionsComponent, + AttributionComponent, }; const COMPONENTS = [ @@ -216,8 +216,8 @@ const COMPONENTS = [ OverlayComponent, ContentComponent, - AttributionComponent, AttributionsComponent, + AttributionComponent, ]; @NgModule({ diff --git a/projects/ngx-openlayers/tsconfig.lib.json b/projects/ngx-openlayers/tsconfig.lib.json index 8d28abc2..3a2b0b98 100644 --- a/projects/ngx-openlayers/tsconfig.lib.json +++ b/projects/ngx-openlayers/tsconfig.lib.json @@ -11,7 +11,7 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, - "types": ["openlayers"], + "types": [], "lib": [ "dom", "es2015" diff --git a/src/app/color-select-hover/color-select-hover.component.ts b/src/app/color-select-hover/color-select-hover.component.ts index d2660f0c..f7ee858b 100644 --- a/src/app/color-select-hover/color-select-hover.component.ts +++ b/src/app/color-select-hover/color-select-hover.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core'; -import { Feature as OlFeature, layer as OlLayer, style } from 'openlayers'; import { MapComponent, LayerVectorComponent } from 'ngx-openlayers'; +import { Fill, Stroke, Style } from 'ol/style'; +import { Layer } from 'ol/layer'; +import { Feature } from 'ol'; @Component({ selector: 'app-color-select-hover', @@ -125,11 +127,11 @@ export class ColorSelectHoverComponent implements OnInit { ], }; - styleInterationSelected = new style.Style({ - fill: new style.Fill({ + styleInterationSelected = new Style({ + fill: new Fill({ color: 'rgba(0, 153, 255, 0.1)', }), - stroke: new style.Stroke({ + stroke: new Stroke({ color: 'rgba(0, 153, 255)', width: 3, }), @@ -140,10 +142,10 @@ export class ColorSelectHoverComponent implements OnInit { ngOnInit() {} changeFeatureHovered(event) { - const hit: OlFeature = this.map.instance.forEachFeatureAtPixel(event.pixel, f => f, { + const hit: Feature = this.map.instance.forEachFeatureAtPixel(event.pixel, f => f, { layerFilter: inLayer(...this.aoiLayerVector.toArray()), hitTolerance: 10, - }) as OlFeature; + }) as Feature; if (!hit && this.hoveredFeatureId) { this.hoveredFeatureId = null; @@ -154,6 +156,6 @@ export class ColorSelectHoverComponent implements OnInit { } } -function inLayer(...layers: LayerVectorComponent[]): (l: OlLayer.Layer) => boolean { - return (l: OlLayer.Layer) => layers.some(layer => layer.instance === l); +function inLayer(...layers: LayerVectorComponent[]): (l: Layer) => boolean { + return (l: Layer) => layers.some(layer => layer.instance === l); } diff --git a/src/app/cursor-position/cursor-position.component.ts b/src/app/cursor-position/cursor-position.component.ts index f2f6deee..e8e355cb 100644 --- a/src/app/cursor-position/cursor-position.component.ts +++ b/src/app/cursor-position/cursor-position.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { proj } from 'openlayers'; +import { transform } from 'ol/proj'; @Component({ selector: 'app-cursor-position', @@ -54,8 +54,8 @@ export class CursorPositionComponent implements OnInit { dispatchCursor(event): void { const coordinates = event.coordinate; - this.lon = proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326')[0]; - this.lat = proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326')[1]; + this.lon = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[0]; + this.lat = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[1]; } latToString(lat: number) { diff --git a/src/app/draw-polygon/draw-polygon.component.ts b/src/app/draw-polygon/draw-polygon.component.ts index bd4d3e65..386c1a2f 100644 --- a/src/app/draw-polygon/draw-polygon.component.ts +++ b/src/app/draw-polygon/draw-polygon.component.ts @@ -1,87 +1,90 @@ -import { Component, OnInit } from '@angular/core'; -import { interaction, Feature, geom, proj } from 'openlayers'; - -@Component({ - selector: 'app-draw-polygon', - template: ` - - - - - - - - - - - - - - - - - - - - - - - -
-
- -

Result

- - 
{{ feature | json }}
- -
-
- `, - styles: [ - ` - :host { - display: flex; - } - - aol-map { - width: 70%; - } - - .info { - width: 28%; - padding: 1rem; - } - `, - ], -}) -export class DrawPolygonComponent implements OnInit { - constructor() {} - - isDrawing = false; - drawBoxGeometryFunction = interaction.Draw.createBox(); - feature; - - ngOnInit() {} - - drawMode() { - this.isDrawing = !this.isDrawing; - } - - endDraw(feature: Feature) { - const olGeomPolygon = geom.Polygon.fromExtent(feature.getGeometry().getExtent()); - olGeomPolygon.transform(new proj.Projection({ code: 'EPSG:3857' }), new proj.Projection({ code: 'EPSG:4326' })); - this.feature = { - type: 'Feature', - properties: {}, - geometry: { - type: 'Polygon', - coordinates: [olGeomPolygon.getCoordinates()[0]], - }, - }; - } -} +import { Component, OnInit } from '@angular/core'; +import { createBox } from 'ol/interaction/Draw'; +import { Feature } from 'ol'; +import Projection from 'ol/proj/Projection'; +import { fromExtent } from 'ol/geom/Polygon'; + +@Component({ + selector: 'app-draw-polygon', + template: ` + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +

Result

+ + 
{{ feature | json }}
+ +
+
+ `, + styles: [ + ` + :host { + display: flex; + } + + aol-map { + width: 70%; + } + + .info { + width: 28%; + padding: 1rem; + } + `, + ], +}) +export class DrawPolygonComponent implements OnInit { + constructor() {} + + isDrawing = false; + drawBoxGeometryFunction = createBox(); + feature; + + ngOnInit() {} + + drawMode() { + this.isDrawing = !this.isDrawing; + } + + endDraw(feature: Feature) { + const olGeomPolygon = fromExtent(feature.getGeometry().getExtent()); + olGeomPolygon.transform(new Projection({ code: 'EPSG:3857' }), new Projection({ code: 'EPSG:4326' })); + this.feature = { + type: 'Feature', + properties: {}, + geometry: { + type: 'Polygon', + coordinates: [olGeomPolygon.getCoordinates()[0]], + }, + }; + } +} diff --git a/src/app/map-position/map-position.component.ts b/src/app/map-position/map-position.component.ts index 4a3f4c5f..4895fb91 100644 --- a/src/app/map-position/map-position.component.ts +++ b/src/app/map-position/map-position.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { proj } from 'openlayers'; import { MapComponent, ViewComponent } from 'ngx-openlayers'; import { FormBuilder, FormGroup } from '@angular/forms'; +import { transform } from 'ol/proj'; +import Projection from 'ol/proj/Projection'; @Component({ selector: 'app-map-position', @@ -84,8 +85,8 @@ export class MapPositionComponent implements OnInit { @ViewChild('view') view: ViewComponent; - displayProj = new proj.Projection({ code: 'EPSG:3857' }); - inputProj = new proj.Projection({ code: 'EPSG:4326' }); + displayProj = new Projection({ code: 'EPSG:3857' }); + inputProj = new Projection({ code: 'EPSG:4326' }); currentZoom = 0; currentLon = 0; @@ -103,10 +104,6 @@ export class MapPositionComponent implements OnInit { displayCoordinates(): void { this.currentZoom = this.view.instance.getZoom(); - [this.currentLon, this.currentLat] = proj.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 index 4b145ac8..a40e5119 100644 --- a/src/app/modify-polygon/modify-polygon.component.ts +++ b/src/app/modify-polygon/modify-polygon.component.ts @@ -1,92 +1,93 @@ -import { Component, OnInit } from '@angular/core'; -import { Feature as OlFeature, format, proj } from 'openlayers'; -import { Feature } from 'geojson'; - -@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: format.GeoJSON = new format.GeoJSON(); - displayProj = new proj.Projection({ code: 'EPSG:3857' }); - inputProj = new proj.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: OlFeature) { - this.feature = this.format.writeFeatureObject(feature, { - dataProjection: this.inputProj, - featureProjection: this.displayProj, - }); - } -} +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 d9cab5c6..9a80df9c 100644 --- a/src/app/overlay/overlay.component.ts +++ b/src/app/overlay/overlay.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { Feature as OlFeature, format, geom } from 'openlayers'; +import { GeoJSON } from 'ol/format'; +import { Feature as OlFeature } from 'ol'; +import { fromExtent } from 'ol/geom/Polygon'; @Component({ selector: 'app-display-overlay', @@ -58,7 +60,7 @@ import { Feature as OlFeature, format, geom } from 'openlayers'; export class OverlayComponent implements OnInit { constructor() {} - geoJsonFormat = new format.GeoJSON(); + geoJsonFormat = new GeoJSON(); feature = { type: 'Feature', @@ -85,7 +87,7 @@ export class OverlayComponent implements OnInit { ngOnInit() { const olFeature: OlFeature = this.geoJsonFormat.readFeature(this.feature); - const olGeomPolygon = geom.Polygon.fromExtent(olFeature.getGeometry().getExtent()); + const olGeomPolygon = fromExtent(olFeature.getGeometry().getExtent()); [, this.tooltip.lat, this.tooltip.lon] = olGeomPolygon.getExtent(); } } diff --git a/tsconfig.json b/tsconfig.json index 8ce094dd..d764083e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,8 +10,7 @@ "experimentalDecorators": true, "target": "es5", "typeRoots": [ - "node_modules/@types", - "projects/ngx-openlayers/node_modules/@types" + "node_modules/@types" ], "lib": [ "es2017", @@ -20,9 +19,6 @@ "paths": { "ngx-openlayers": [ "dist/ngx-openlayers" - ], - "openlayers": [ - "projects/ngx-openlayers/node_modules/openlayers" ] } }