From 8d813c86782b10c3fb2276a6bb863c9693b5ad9f Mon Sep 17 00:00:00 2001 From: Samuel Girard Date: Thu, 29 Nov 2018 22:30:50 +0100 Subject: [PATCH] feat(geom): implements MultiPoint, MultiLinestring and MultiPolygon --- documentation/README.md | 68 ++++++++++- .../lib/collectioncoordinates.component.ts | 97 ++++++++++++++++ .../src/lib/coordinate.component.ts | 109 +++++------------- .../src/lib/geom/geometrycircle.component.ts | 30 +++++ .../lib/geom/geometrylinestring.component.ts | 25 ++++ .../geom/geometrymultilinestring.component.ts | 25 ++++ .../lib/geom/geometrymultipoint.component.ts | 25 ++++ .../geom/geometrymultipolygon.component.ts | 25 ++++ .../src/lib/geom/geometrypoint.component.ts | 25 ++++ .../src/lib/geom/geometrypolygon.component.ts | 25 ++++ .../src/lib/geom/simplegeometry.component.ts | 17 +++ .../src/lib/geometry.components.ts | 103 ----------------- projects/ngx-openlayers/src/public_api.ts | 22 ++-- src/app/cluster/cluster.component.ts | 2 +- .../color-select-hover.component.ts | 2 +- .../display-geometry.component.ts | 71 +++++++++++- .../draw-polygon/draw-polygon.component.ts | 2 +- src/app/example-list.ts | 3 +- .../modify-polygon.component.ts | 2 +- src/app/overlay/overlay.component.ts | 2 +- 20 files changed, 482 insertions(+), 198 deletions(-) create mode 100644 projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts create mode 100644 projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts delete mode 100644 projects/ngx-openlayers/src/lib/geometry.components.ts diff --git a/documentation/README.md b/documentation/README.md index 7226e5b5..a03db96d 100644 --- a/documentation/README.md +++ b/documentation/README.md @@ -211,7 +211,7 @@ The `GeometryPolygonComponent` (`aol-geometry-polygon`) defines a polygon. @@ -223,6 +223,72 @@ The `GeometryPolygonComponent` (`aol-geometry-polygon`) defines a polygon. ``` +### MultiPoint component + +The `GeometryMultiPointComponent` (`aol-geometry-multipoint`) defines a collection of points. + +#### MultiPoint component example + +```html + + + + + + + + + + + + +``` + +### MultiLinestring component + +The `GeometryMultiLinestringComponent` (`aol-geometry-multilinestring`) defines a collection of multilines. + +#### MultiLinestring component example + +```html + + + + + + + + + +``` + +### MultiPolygon component + +The `GeometryMultiPolygonComponent` (`aol-geometry-multipolygon`) defines a collection polygons. + +#### MultiPolygon component example + +```html + + + + + + + + + + +``` + ## Style components `StyleComponents` (``) provide ways to altering the look of vector features. diff --git a/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts b/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts new file mode 100644 index 00000000..466c4ef8 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts @@ -0,0 +1,97 @@ +import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core'; +import { MapComponent } from './map.component'; +import { GeometryLinestringComponent } from './geom/geometrylinestring.component'; +import { GeometryPolygonComponent } from './geom/geometrypolygon.component'; +import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component'; +import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component'; +import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component'; +import { Coordinate } from 'ol/coordinate'; +import { transform } from 'ol/proj'; + +@Component({ + selector: 'aol-collection-coordinates', + template: ` +
+ `, +}) +export class CollectionCoordinatesComponent implements OnChanges, OnInit { + private host: any; + private mapSrid = 'EPSG:3857'; + + @Input() + coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][]; + @Input() + srid = 'EPSG:3857'; + + constructor( + private map: MapComponent, + @Optional() geometryLinestring: GeometryLinestringComponent, + @Optional() geometryPolygon: GeometryPolygonComponent, + @Optional() geometryMultipoint: GeometryMultiPointComponent, + @Optional() geometryMultilinestring: GeometryMultiLinestringComponent, + @Optional() geometryMultipolygon: GeometryMultiPolygonComponent + ) { + if (!!geometryLinestring) { + this.host = geometryLinestring; + } else if (!!geometryPolygon) { + this.host = geometryPolygon; + } else if (!!geometryMultipoint) { + this.host = geometryMultipoint; + } else if (!!geometryMultilinestring) { + this.host = geometryMultilinestring; + } else if (!!geometryMultipolygon) { + this.host = geometryMultipolygon; + } else { + throw new Error('aol-collection-coordinates must be a child of a geometry component'); + } + } + + ngOnInit() { + this.map.instance.on('change:view', e => this.onMapViewChanged(e)); + this.mapSrid = this.map.instance + .getView() + .getProjection() + .getCode(); + this.transformCoordinates(); + } + + ngOnChanges(changes: SimpleChanges) { + this.transformCoordinates(); + } + + private onMapViewChanged(event) { + this.mapSrid = event.target + .get(event.key) + .getProjection() + .getCode(); + this.transformCoordinates(); + } + + private transformCoordinates() { + let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][]; + + if (this.srid === this.mapSrid) { + transformedCoordinates = this.coordinates; + } else { + switch (this.host.componentType) { + case 'geometry-linestring': + case 'geometry-multipoint': + transformedCoordinates = (this.coordinates).map(c => transform(c, this.srid, this.mapSrid)); + break; + case 'geometry-polygon': + case 'geometry-multilinestring': + transformedCoordinates = (this.coordinates).map(cc => + cc.map(c => transform(c, this.srid, this.mapSrid)) + ); + break; + case 'geometry-multipolygon': + transformedCoordinates = (this.coordinates).map(ccc => + ccc.map(cc => cc.map(c => transform(c, this.srid, this.mapSrid))) + ); + break; + } + } + + this.host.instance.setCoordinates(transformedCoordinates); + } +} diff --git a/projects/ngx-openlayers/src/lib/coordinate.component.ts b/projects/ngx-openlayers/src/lib/coordinate.component.ts index 5a79ce32..112baa21 100644 --- a/projects/ngx-openlayers/src/lib/coordinate.component.ts +++ b/projects/ngx-openlayers/src/lib/coordinate.component.ts @@ -1,15 +1,10 @@ -import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core'; -import { Projection, transform } from 'ol/proj'; +import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core'; +import { transform } from 'ol/proj'; import { MapComponent } from './map.component'; -import { - GeometryPointComponent, - GeometryLinestringComponent, - GeometryPolygonComponent, - GeometryCircleComponent, -} from './geometry.components'; +import { GeometryPointComponent } from './geom/geometrypoint.component'; +import { GeometryCircleComponent } from './geom/geometrycircle.component'; import { ViewComponent } from './view.component'; import { OverlayComponent } from './overlay.component'; -import { Coordinate } from 'ol/coordinate'; @Component({ selector: 'aol-coordinate', @@ -17,8 +12,9 @@ import { Coordinate } from 'ol/coordinate';
`, }) -export class CoordinateComponent implements OnChanges { +export class CoordinateComponent implements OnChanges, OnInit { private host: any; + private mapSrid = 'EPSG:3857'; @Input() x: number; @@ -46,18 +42,34 @@ export class CoordinateComponent implements OnChanges { } } + ngOnInit() { + this.map.instance.on('change:view', e => this.onMapViewChanged(e)); + this.mapSrid = this.map.instance + .getView() + .getProjection() + .getCode(); + this.transformCoordinates(); + } + ngOnChanges(changes: SimpleChanges) { - let referenceProjection: Projection; - let referenceProjectionCode: string; - let transformedCoordinates: number[]; + this.transformCoordinates(); + } + + private onMapViewChanged(event) { + this.mapSrid = event.target + .get(event.key) + .getProjection() + .getCode(); + this.transformCoordinates(); + } - referenceProjection = this.map.instance.getView().getProjection(); - referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857'; + private transformCoordinates() { + let transformedCoordinates: number[]; - if (this.srid === referenceProjectionCode) { + if (this.srid === this.mapSrid) { transformedCoordinates = [this.x, this.y]; } else { - transformedCoordinates = transform([this.x, this.y], this.srid, referenceProjectionCode); + transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid); } switch (this.host.componentType) { @@ -74,66 +86,3 @@ export class CoordinateComponent implements OnChanges { } } } - -@Component({ - selector: 'aol-collection-coordinates', - template: ` -
- `, -}) -export class CollectionCoordinatesComponent implements OnChanges { - private host: any; - - @Input() - coordinates: [number, number][]; - @Input() - srid = 'EPSG:3857'; - - constructor( - private map: MapComponent, - @Optional() geometryLinestring: GeometryLinestringComponent, - @Optional() geometryPolygon: GeometryPolygonComponent - ) { - // console.log('creating aol-collection-coordinates'); - if (!!geometryLinestring) { - this.host = geometryLinestring; - } else if (!!geometryPolygon) { - this.host = geometryPolygon; - } else { - throw new Error('aol-collection-coordinates must be a child of a geometry component'); - } - } - - ngOnChanges(changes: SimpleChanges) { - let referenceProjection: Projection; - let referenceProjectionCode: string; - let transformedCoordinates: Array; - - // console.log('coordinates change: ', this.coordinates); - - referenceProjection = this.map.instance.getView().getProjection(); - referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857'; - - if (this.srid === referenceProjectionCode) { - transformedCoordinates = this.coordinates; - } else { - transformedCoordinates = []; - this.coordinates.forEach( - function(coordinate: Coordinate) { - transformedCoordinates.push(transform(coordinate, this.srid, referenceProjectionCode)); - }.bind(this) - ); - } - switch (this.host.componentType) { - case 'geometry-linestring': - this.host.instance.setCoordinates(transformedCoordinates); - break; - case 'geometry-polygon': - this.host.instance.setCoordinates([transformedCoordinates]); - break; - default: - throw new Error('aol-collection-coordinates host is of unknown type: ' + this.host.componentType); - // break; - } - } -} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts new file mode 100644 index 00000000..cc5031cb --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { Circle } from 'ol/geom'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; + +@Component({ + selector: 'aol-geometry-circle', + template: ` + + `, +}) +export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-circle'; + public instance: Circle; + + @Input() + get radius(): number { + return this.instance.getRadius(); + } + set radius(radius: number) { + this.instance.setRadius(radius); + } + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + // defaulting coordinates to [0,0]. To be overridden in child component. + this.instance = new Circle([0, 0]); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts new file mode 100644 index 00000000..f3de08e8 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { LineString } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-linestring', + template: ` + + `, +}) +export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-linestring'; + public instance: LineString; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new LineString([[0, 0], [1, 1]]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts new file mode 100644 index 00000000..49df1618 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiLineString } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multilinestring', + template: ` + + `, +}) +export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multilinestring'; + public instance: MultiLineString; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiLineString([[[0, 0], [1, 1]]]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts new file mode 100644 index 00000000..2431429c --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiPoint } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multipoint', + template: ` + + `, +}) +export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multipoint'; + public instance: MultiPoint; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiPoint([[0, 0], [1, 1]]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts new file mode 100644 index 00000000..230bc6da --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { MultiPolygon } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-multipolygon', + template: ` + + `, +}) +export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-multipolygon'; + public instance: MultiPolygon; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new MultiPolygon([[[[0, 0], [1, 1], [0, 1]]]]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts new file mode 100644 index 00000000..cb8279c7 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { Point } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-point', + template: ` + + `, +}) +export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-point'; + public instance: Point; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new Point([0, 0]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts b/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts new file mode 100644 index 00000000..5de404c8 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { SimpleGeometryComponent } from './simplegeometry.component'; +import { MapComponent } from '../map.component'; +import { Polygon } from 'ol/geom'; + +@Component({ + selector: 'aol-geometry-polygon', + template: ` + + `, +}) +export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit { + public componentType = 'geometry-polygon'; + public instance: Polygon; + + constructor(map: MapComponent, host: FeatureComponent) { + super(map, host); + } + + ngOnInit() { + this.instance = new Polygon([[[0, 0], [1, 1], [0, 1]]]); + super.ngOnInit(); + } +} diff --git a/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts b/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts new file mode 100644 index 00000000..66d80c49 --- /dev/null +++ b/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts @@ -0,0 +1,17 @@ +import { Input, OnInit } from '@angular/core'; +import { FeatureComponent } from '../feature.component'; +import { MapComponent } from '../map.component'; +import SimpleGeometry from 'ol/geom/SimpleGeometry'; + +export abstract class SimpleGeometryComponent implements OnInit { + public instance: SimpleGeometry; + public componentType = 'simple-geometry'; + + @Input() srid: string; + + constructor(protected map: MapComponent, protected host: FeatureComponent) {} + + ngOnInit() { + this.host.instance.setGeometry(this.instance); + } +} diff --git a/projects/ngx-openlayers/src/lib/geometry.components.ts b/projects/ngx-openlayers/src/lib/geometry.components.ts deleted file mode 100644 index dc877271..00000000 --- a/projects/ngx-openlayers/src/lib/geometry.components.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { Component, OnInit, OnDestroy, Input } from '@angular/core'; -import { Circle, LineString, Point, Polygon } from 'ol/geom'; -import { FeatureComponent } from './feature.component'; - -@Component({ - selector: 'aol-geometry-linestring', - template: ` - - `, -}) -export class GeometryLinestringComponent implements OnInit, OnDestroy { - public componentType = 'geometry-linestring'; - public instance: LineString; - - constructor(private host: FeatureComponent) { - // console.log('instancing aol-geometry-linestring'); - } - - ngOnInit() { - this.instance = new LineString([]); - this.host.instance.setGeometry(this.instance); - } - ngOnDestroy() { - // this.host.setGeometry(null); - } -} - -@Component({ - selector: 'aol-geometry-point', - template: ` - - `, -}) -export class GeometryPointComponent implements OnInit, OnDestroy { - public componentType = 'geometry-point'; - public instance: Point; - - constructor(private host: FeatureComponent) { - // console.log('creating aol-geometry-point'); - } - - ngOnInit() { - this.instance = new Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component. - this.host.instance.setGeometry(this.instance); - } - - ngOnDestroy() { - // this.host.setGeometry(null); - } -} - -@Component({ - selector: 'aol-geometry-polygon', - template: ` - - `, -}) -export class GeometryPolygonComponent implements OnInit, OnDestroy { - public componentType = 'geometry-polygon'; - public instance: Polygon; - - constructor(private host: FeatureComponent) { - // console.log('creating aol-geometry-polygon'); - } - - ngOnInit() { - // defaulting coordinates to [0,0]. To be overridden in child component. - this.instance = new Polygon([[[0, 0], [1, 0], [1, 1]]]); - this.host.instance.setGeometry(this.instance); - } - - ngOnDestroy() { - // this.host.setGeometry(null); - } -} - -@Component({ - selector: 'aol-geometry-circle', - template: ` - - `, -}) -export class GeometryCircleComponent implements OnInit { - public componentType = 'geometry-circle'; - public instance: Circle; - - @Input() - get radius(): number { - return this.instance.getRadius(); - } - set radius(radius: number) { - this.instance.setRadius(radius); - } - - constructor(private host: FeatureComponent) { - // defaulting coordinates to [0,0]. To be overridden in child component. - this.instance = new Circle([0, 0]); - } - - ngOnInit() { - this.host.instance.setGeometry(this.instance); - } -} diff --git a/projects/ngx-openlayers/src/public_api.ts b/projects/ngx-openlayers/src/public_api.ts index 6201429a..8c44a82d 100644 --- a/projects/ngx-openlayers/src/public_api.ts +++ b/projects/ngx-openlayers/src/public_api.ts @@ -26,13 +26,15 @@ import { SourceImageWMSComponent } from './lib/sources/imagewms.component'; import { SourceImageArcGISRestComponent } from './lib/sources/imagearcgisrest.component'; import { SourceRasterComponent } from './lib/sources/raster.component'; import { FeatureComponent } from './lib/feature.component'; -import { - GeometryLinestringComponent, - GeometryPointComponent, - GeometryPolygonComponent, - GeometryCircleComponent, -} from './lib/geometry.components'; -import { CollectionCoordinatesComponent, CoordinateComponent } from './lib/coordinate.component'; +import { GeometryCircleComponent } from './lib/geom/geometrycircle.component'; +import { GeometryLinestringComponent } from './lib/geom/geometrylinestring.component'; +import { GeometryMultiLinestringComponent } from './lib/geom/geometrymultilinestring.component'; +import { GeometryMultiPointComponent } from './lib/geom/geometrymultipoint.component'; +import { GeometryMultiPolygonComponent } from './lib/geom/geometrymultipolygon.component'; +import { GeometryPointComponent } from './lib/geom/geometrypoint.component'; +import { GeometryPolygonComponent } from './lib/geom/geometrypolygon.component'; +import { CoordinateComponent } from './lib/coordinate.component'; +import { CollectionCoordinatesComponent } from './lib/collectioncoordinates.component'; import { StyleComponent } from './lib/styles/style.component'; import { StyleCircleComponent } from './lib/styles/circle.component'; import { StyleStrokeComponent } from './lib/styles/stroke.component'; @@ -97,6 +99,9 @@ export { SourceImageArcGISRestComponent, FeatureComponent, GeometryLinestringComponent, + GeometryMultiLinestringComponent, + GeometryMultiPointComponent, + GeometryMultiPolygonComponent, GeometryPointComponent, GeometryPolygonComponent, GeometryCircleComponent, @@ -170,6 +175,9 @@ const COMPONENTS = [ SourceRasterComponent, FeatureComponent, GeometryLinestringComponent, + GeometryMultiLinestringComponent, + GeometryMultiPointComponent, + GeometryMultiPolygonComponent, GeometryPointComponent, GeometryPolygonComponent, GeometryCircleComponent, diff --git a/src/app/cluster/cluster.component.ts b/src/app/cluster/cluster.component.ts index 2a5882b4..6f318902 100644 --- a/src/app/cluster/cluster.component.ts +++ b/src/app/cluster/cluster.component.ts @@ -39,7 +39,7 @@ import { Component, OnInit } from '@angular/core'; 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 f7ee858b..fde2bf43 100644 --- a/src/app/color-select-hover/color-select-hover.component.ts +++ b/src/app/color-select-hover/color-select-hover.component.ts @@ -34,7 +34,7 @@ import { Feature } from 'ol'; diff --git a/src/app/display-geometry/display-geometry.component.ts b/src/app/display-geometry/display-geometry.component.ts index 6a92db39..1a2a8e69 100644 --- a/src/app/display-geometry/display-geometry.component.ts +++ b/src/app/display-geometry/display-geometry.component.ts @@ -20,7 +20,7 @@ import { Component, OnInit } from '@angular/core'; - + @@ -70,6 +70,43 @@ import { Component, OnInit } from '@angular/core'; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -126,6 +163,38 @@ export class DisplayGeometryComponent implements OnInit { radius: 50000, }, }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'MultiPoint', + coordinates: [[0, 45], [0.5, 45], [1, 45]], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'MultiLineString', + coordinates: [ + [[0, 44], [1, 44], [2, 44.5]], + [[0.5, 43.8], [1.5, 43.8], [2.5, 44.3]], + [[1, 43.6], [2, 43.6], [3, 44.1]], + ], + }, + }, + { + type: 'Feature', + properties: {}, + geometry: { + type: 'MultiPolygon', + coordinates: [ + [[[4, 45], [4.5, 44.5], [4, 44], [4, 45]]], + [[[5, 45], [5.5, 44.5], [5, 44], [5, 45]]], + [[[6, 45], [6.5, 44.5], [6, 44], [6, 45]]], + ], + }, + }, ]; ngOnInit() {} diff --git a/src/app/draw-polygon/draw-polygon.component.ts b/src/app/draw-polygon/draw-polygon.component.ts index 386c1a2f..3cef34e5 100644 --- a/src/app/draw-polygon/draw-polygon.component.ts +++ b/src/app/draw-polygon/draw-polygon.component.ts @@ -27,7 +27,7 @@ import { fromExtent } from 'ol/geom/Polygon'; - + diff --git a/src/app/example-list.ts b/src/app/example-list.ts index 144ffefd..3dabf350 100644 --- a/src/app/example-list.ts +++ b/src/app/example-list.ts @@ -17,7 +17,8 @@ export const examplesList = [ }, { title: 'Display geometry', - description: 'Example of geojson features : point, polygon, linestring.', + description: + 'Example of geojson features : point, polygon, linestring, circle, multi-point, multi-linestring, multi-polygon.', routerLink: 'display-geometry', openLayersLink: 'https://openlayers.org/en/latest/examples/geojson.html', }, diff --git a/src/app/modify-polygon/modify-polygon.component.ts b/src/app/modify-polygon/modify-polygon.component.ts index a40e5119..ea95be49 100644 --- a/src/app/modify-polygon/modify-polygon.component.ts +++ b/src/app/modify-polygon/modify-polygon.component.ts @@ -26,7 +26,7 @@ import { GeoJSON } from 'ol/format'; - + diff --git a/src/app/overlay/overlay.component.ts b/src/app/overlay/overlay.component.ts index 9a80df9c..5b265d32 100644 --- a/src/app/overlay/overlay.component.ts +++ b/src/app/overlay/overlay.component.ts @@ -21,7 +21,7 @@ import { fromExtent } from 'ol/geom/Polygon';