Skip to content

Commit d789ccf

Browse files
kekel87davinkevin
kekel87
authored and
davinkevin
committed
feat(geom): add circle geometry (#210)
1 parent 09ce87c commit d789ccf

File tree

6 files changed

+288
-218
lines changed

6 files changed

+288
-218
lines changed

‎projects/ngx-openlayers/src/lib/coordinate.component.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core';
22
import { proj, Coordinate } from 'openlayers';
33
import { MapComponent } from './map.component';
4-
import { GeometryPointComponent, GeometryLinestringComponent, GeometryPolygonComponent } from './geometry.components';
4+
import {
5+
GeometryPointComponent,
6+
GeometryLinestringComponent,
7+
GeometryPolygonComponent,
8+
GeometryCircleComponent,
9+
} from './geometry.components';
510
import { ViewComponent } from './view.component';
611
import { OverlayComponent } from './overlay.component';
712

@@ -25,11 +30,14 @@ export class CoordinateComponent implements OnChanges {
2530
private map: MapComponent,
2631
@Optional() viewHost: ViewComponent,
2732
@Optional() geometryPointHost: GeometryPointComponent,
33+
@Optional() geometryCircleHost: GeometryCircleComponent,
2834
@Optional() overlayHost: OverlayComponent
2935
) {
3036
// console.log('instancing aol-coordinate');
3137
if (geometryPointHost !== null) {
3238
this.host = geometryPointHost;
39+
} else if (geometryCircleHost !== null) {
40+
this.host = geometryCircleHost;
3341
} else if (viewHost !== null) {
3442
this.host = viewHost;
3543
} else if (overlayHost !== null) {
@@ -55,6 +63,7 @@ export class CoordinateComponent implements OnChanges {
5563
case 'geometry-point':
5664
this.host.instance.setCoordinates(transformedCoordinates);
5765
break;
66+
case 'geometry-circle':
5867
case 'view':
5968
this.host.instance.setCenter(transformedCoordinates);
6069
break;

‎projects/ngx-openlayers/src/lib/geometry.components.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
22
import { geom } from 'openlayers';
33
import { FeatureComponent } from './feature.component';
44

@@ -73,3 +73,31 @@ export class GeometryPolygonComponent implements OnInit, OnDestroy {
7373
// this.host.setGeometry(null);
7474
}
7575
}
76+
77+
@Component({
78+
selector: 'aol-geometry-circle',
79+
template: `
80+
<ng-content></ng-content>
81+
`,
82+
})
83+
export class GeometryCircleComponent implements OnInit {
84+
public componentType = 'geometry-circle';
85+
public instance: geom.Circle;
86+
87+
@Input()
88+
get radius(): number {
89+
return this.instance.getRadius();
90+
}
91+
set radius(radius: number) {
92+
this.instance.setRadius(radius);
93+
}
94+
95+
constructor(private host: FeatureComponent) {
96+
// defaulting coordinates to [0,0]. To be overridden in child component.
97+
this.instance = new geom.Circle([0, 0]);
98+
}
99+
100+
ngOnInit() {
101+
this.host.instance.setGeometry(this.instance);
102+
}
103+
}

‎projects/ngx-openlayers/src/public_api.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
GeometryLinestringComponent,
3030
GeometryPointComponent,
3131
GeometryPolygonComponent,
32+
GeometryCircleComponent,
3233
} from './lib/geometry.components';
3334
import { CollectionCoordinatesComponent, CoordinateComponent } from './lib/coordinate.component';
3435
import { StyleComponent } from './lib/styles/style.component';
@@ -96,6 +97,7 @@ export {
9697
GeometryLinestringComponent,
9798
GeometryPointComponent,
9899
GeometryPolygonComponent,
100+
GeometryCircleComponent,
99101
CoordinateComponent,
100102
CollectionCoordinatesComponent,
101103
StyleComponent,
@@ -167,6 +169,7 @@ const COMPONENTS = [
167169
GeometryLinestringComponent,
168170
GeometryPointComponent,
169171
GeometryPolygonComponent,
172+
GeometryCircleComponent,
170173
CoordinateComponent,
171174
CollectionCoordinatesComponent,
172175

‎src/app/display-geometry/display-geometry.component.ts‎

Lines changed: 67 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,47 +12,64 @@ import { Component, OnInit } from '@angular/core';
1212
<aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
1313
1414
<aol-layer-group>
15-
<aol-layer-vector *ngFor="let feature of features">
16-
<ng-container [ngSwitch]="feature.geometry.type">
17-
<aol-source-vector *ngSwitchCase="'Polygon'">
18-
<aol-style>
19-
<aol-style-stroke [color]="'rgba(90, 17, 26)'" width="3"></aol-style-stroke>
20-
<aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
21-
</aol-style>
22-
<aol-feature>
23-
<aol-geometry-polygon>
24-
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'">
25-
</aol-collection-coordinates>
26-
</aol-geometry-polygon>
27-
</aol-feature>
28-
</aol-source-vector>
29-
<aol-source-vector *ngSwitchCase="'Point'">
30-
<aol-feature>
31-
<aol-geometry-point>
32-
<aol-coordinate
33-
[x]="feature.geometry.coordinates[0]"
34-
[y]="feature.geometry.coordinates[1]"
35-
[srid]="'EPSG:4326'"
36-
>
37-
</aol-coordinate>
38-
<aol-style>
39-
<aol-style-circle [radius]="10">
40-
<aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
41-
<aol-style-fill [color]="'green'"></aol-style-fill>
42-
</aol-style-circle>
43-
</aol-style>
44-
</aol-geometry-point>
45-
</aol-feature>
46-
</aol-source-vector>
47-
<aol-source-vector *ngSwitchCase="'LineString'">
48-
<aol-feature>
49-
<aol-geometry-linestring>
50-
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates" [srid]="'EPSG:4326'">
51-
</aol-collection-coordinates>
52-
</aol-geometry-linestring>
53-
</aol-feature>
54-
</aol-source-vector>
55-
</ng-container>
15+
<aol-layer-vector *ngFor="let feature of features" [ngSwitch]="feature.geometry.type">
16+
<aol-source-vector *ngSwitchCase="'Polygon'">
17+
<aol-style>
18+
<aol-style-stroke [color]="'rgba(90, 17, 26)'" width="3"></aol-style-stroke>
19+
<aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
20+
</aol-style>
21+
<aol-feature>
22+
<aol-geometry-polygon>
23+
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'">
24+
</aol-collection-coordinates>
25+
</aol-geometry-polygon>
26+
</aol-feature>
27+
</aol-source-vector>
28+
29+
<aol-source-vector *ngSwitchCase="'Point'">
30+
<aol-feature>
31+
<aol-geometry-point>
32+
<aol-coordinate
33+
[x]="feature.geometry.coordinates[0]"
34+
[y]="feature.geometry.coordinates[1]"
35+
[srid]="'EPSG:4326'"
36+
>
37+
</aol-coordinate>
38+
<aol-style>
39+
<aol-style-circle [radius]="10">
40+
<aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
41+
<aol-style-fill [color]="'green'"></aol-style-fill>
42+
</aol-style-circle>
43+
</aol-style>
44+
</aol-geometry-point>
45+
</aol-feature>
46+
</aol-source-vector>
47+
48+
<aol-source-vector *ngSwitchCase="'LineString'">
49+
<aol-feature>
50+
<aol-geometry-linestring>
51+
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates" [srid]="'EPSG:4326'">
52+
</aol-collection-coordinates>
53+
</aol-geometry-linestring>
54+
</aol-feature>
55+
</aol-source-vector>
56+
57+
<aol-source-vector *ngSwitchCase="'Circle'">
58+
<aol-feature>
59+
<aol-geometry-circle [radius]="feature.geometry.radius">
60+
<aol-coordinate
61+
[x]="feature.geometry.coordinates[0]"
62+
[y]="feature.geometry.coordinates[1]"
63+
srid="EPSG:4326"
64+
>
65+
</aol-coordinate>
66+
<aol-style>
67+
<aol-style-stroke color="blue" width="2"></aol-style-stroke>
68+
<aol-style-fill color="rgba(255, 255, 0, 0.5)"></aol-style-fill>
69+
</aol-style>
70+
</aol-geometry-circle>
71+
</aol-feature>
72+
</aol-source-vector>
5673
</aol-layer-vector>
5774
</aol-layer-group>
5875
</aol-map>
@@ -100,6 +117,15 @@ export class DisplayGeometryComponent implements OnInit {
100117
],
101118
},
102119
},
120+
{
121+
type: 'Feature',
122+
properties: {},
123+
geometry: {
124+
type: 'Circle',
125+
coordinates: [3.1060516834259033, 45.78940226200967],
126+
radius: 50000,
127+
},
128+
},
103129
];
104130

105131
ngOnInit() {}

‎src/app/draw-polygon/draw-polygon.component.ts‎

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,87 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { interaction, Feature, geom, proj } from 'openlayers';
3-
4-
@Component({
5-
selector: 'app-draw-polygon',
6-
template: `
7-
<aol-map #map width="100%" height="100%">
8-
<aol-interaction-default></aol-interaction-default>
9-
<aol-interaction-draw
10-
*ngIf="isDrawing"
11-
type="Circle"
12-
[geometryFunction]="drawBoxGeometryFunction"
13-
(onDrawEnd)="endDraw($event.feature)"
14-
>
15-
</aol-interaction-draw>
16-
17-
<aol-view [zoom]="5">
18-
<aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
19-
</aol-view>
20-
21-
<aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
22-
23-
<aol-layer-vector *ngIf="feature">
24-
<aol-source-vector>
25-
<aol-feature>
26-
<aol-geometry-polygon>
27-
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'">
28-
</aol-collection-coordinates>
29-
</aol-geometry-polygon>
30-
</aol-feature>
31-
</aol-source-vector>
32-
</aol-layer-vector>
33-
</aol-map>
34-
35-
<div class="info">
36-
<div class="draw-section">
37-
<button (click)="drawMode()">{{ isDrawing ? 'End draw' : 'Start draw' }}</button>
38-
<h3>Result</h3>
39-
<pre><code>{{feature | json }}</code></pre>
40-
</div>
41-
</div>
42-
`,
43-
styles: [
44-
`
45-
:host {
46-
display: flex;
47-
}
48-
49-
aol-map {
50-
width: 70%;
51-
}
52-
53-
.info {
54-
width: 28%;
55-
padding: 1rem;
56-
}
57-
`,
58-
],
59-
})
60-
export class DrawPolygonComponent implements OnInit {
61-
constructor() {}
62-
63-
isDrawing = false;
64-
drawBoxGeometryFunction = interaction.Draw.createBox();
65-
feature;
66-
67-
ngOnInit() {}
68-
69-
drawMode() {
70-
this.isDrawing = !this.isDrawing;
71-
}
72-
73-
endDraw(feature: Feature) {
74-
const olGeomPolygon = geom.Polygon.fromExtent(feature.getGeometry().getExtent());
75-
olGeomPolygon.transform(new proj.Projection({ code: 'EPSG:3857' }), new proj.Projection({ code: 'EPSG:4326' }));
76-
this.feature = {
77-
type: 'Feature',
78-
properties: {},
79-
geometry: {
80-
type: 'Polygon',
81-
coordinates: [olGeomPolygon.getCoordinates()[0]],
82-
},
83-
};
84-
}
85-
}
1+
import { Component, OnInit } from '@angular/core';
2+
import { interaction, Feature, geom, proj } from 'openlayers';
3+
4+
@Component({
5+
selector: 'app-draw-polygon',
6+
template: `
7+
<aol-map #map width="100%" height="100%">
8+
<aol-interaction-default></aol-interaction-default>
9+
<aol-interaction-draw
10+
*ngIf="isDrawing"
11+
type="Circle"
12+
[geometryFunction]="drawBoxGeometryFunction"
13+
(onDrawEnd)="endDraw($event.feature)"
14+
>
15+
</aol-interaction-draw>
16+
17+
<aol-view [zoom]="5">
18+
<aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
19+
</aol-view>
20+
21+
<aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
22+
23+
<aol-layer-vector *ngIf="feature">
24+
<aol-source-vector>
25+
<aol-feature>
26+
<aol-geometry-polygon>
27+
<aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'">
28+
</aol-collection-coordinates>
29+
</aol-geometry-polygon>
30+
</aol-feature>
31+
</aol-source-vector>
32+
</aol-layer-vector>
33+
</aol-map>
34+
35+
<div class="info">
36+
<div class="draw-section">
37+
<button (click)="drawMode()">{{ isDrawing ? 'End draw' : 'Start draw' }}</button>
38+
<h3>Result</h3>
39+
<code>
40+
<pre>{{ feature | json }}</pre>
41+
</code>
42+
</div>
43+
</div>
44+
`,
45+
styles: [
46+
`
47+
:host {
48+
display: flex;
49+
}
50+
51+
aol-map {
52+
width: 70%;
53+
}
54+
55+
.info {
56+
width: 28%;
57+
padding: 1rem;
58+
}
59+
`,
60+
],
61+
})
62+
export class DrawPolygonComponent implements OnInit {
63+
constructor() {}
64+
65+
isDrawing = false;
66+
drawBoxGeometryFunction = interaction.Draw.createBox();
67+
feature;
68+
69+
ngOnInit() {}
70+
71+
drawMode() {
72+
this.isDrawing = !this.isDrawing;
73+
}
74+
75+
endDraw(feature: Feature) {
76+
const olGeomPolygon = geom.Polygon.fromExtent(feature.getGeometry().getExtent());
77+
olGeomPolygon.transform(new proj.Projection({ code: 'EPSG:3857' }), new proj.Projection({ code: 'EPSG:4326' }));
78+
this.feature = {
79+
type: 'Feature',
80+
properties: {},
81+
geometry: {
82+
type: 'Polygon',
83+
coordinates: [olGeomPolygon.getCoordinates()[0]],
84+
},
85+
};
86+
}
87+
}

0 commit comments

Comments
 (0)