Skip to content

Commit 2e7bda4

Browse files
Clara BelairNeonox31
Clara Belair
authored and
Neonox31
committed
feat(demo): example change color on hover or on select
1 parent b7749f9 commit 2e7bda4

File tree

4 files changed

+167
-0
lines changed

4 files changed

+167
-0
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ModifyPolygonComponent } from './modify-polygon/modify-polygon.componen
2121
import { SideBySideComponent } from './side-by-side/side-by-side.component';
2222
import { SwipeComponent } from './swipe/swipe.component';
2323
import { OverlayComponent } from './overlay/overlay.component';
24+
import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
2425

2526
@NgModule({
2627
declarations: [
@@ -39,6 +40,7 @@ import { OverlayComponent } from './overlay/overlay.component';
3940
SideBySideComponent,
4041
SwipeComponent,
4142
OverlayComponent,
43+
ColorSelectHoverComponent,
4244
],
4345
imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
4446
providers: [],

‎src/app/app.routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ModifyPolygonComponent } from './modify-polygon/modify-polygon.componen
1414
import { SideBySideComponent } from './side-by-side/side-by-side.component';
1515
import { SwipeComponent } from './swipe/swipe.component';
1616
import { OverlayComponent } from './overlay/overlay.component';
17+
import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
1718

1819
const routes: Routes = [
1920
{ path: '', component: ExamplesListComponent },
@@ -31,6 +32,7 @@ const routes: Routes = [
3132
{ path: 'side-by-side', component: SideBySideComponent },
3233
{ path: 'swipe', component: SwipeComponent },
3334
{ path: 'overlay', component: OverlayComponent },
35+
{ path: 'color-select-hover', component: ColorSelectHoverComponent },
3436
{ path: 'cluster', component: ClusterComponent },
3537
{ path: 'raster', component: RasterComponent },
3638
],

‎src/app/color-select-hover/color-select-hover.component.ts‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
2+
import { Feature as OlFeature, layer as OlLayer, style } from 'openlayers';
3+
import { MapComponent, LayerVectorComponent } from 'ngx-openlayers';
4+
5+
@Component({
6+
selector: 'app-color-select-hover',
7+
template: `
8+
<aol-map #map (onPointerMove)="changeFeatureHovered($event)" width="100%" height="100%">
9+
<aol-interaction-default></aol-interaction-default>
10+
<aol-control-defaults></aol-control-defaults>
11+
<aol-interaction-select #select [style]="styleInterationSelected"></aol-interaction-select>
12+
13+
14+
<aol-view [zoom]="5">
15+
<aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
16+
</aol-view>
17+
18+
<aol-layer-tile [opacity]="1">
19+
<aol-source-osm></aol-source-osm>
20+
</aol-layer-tile>
21+
22+
<aol-layer-group>
23+
<aol-layer-vector #aoiLayerVector *ngFor="let f of features.features">
24+
<aol-style *ngIf="f.id === hoveredFeatureId; else notHovered">
25+
<aol-style-stroke [color]="'white'" width="3"></aol-style-stroke>
26+
<aol-style-fill [color]="'rgba(90, 17, 26, 0.3)'" ></aol-style-fill>
27+
</aol-style>
28+
<ng-template #notHovered>
29+
<aol-style>
30+
<aol-style-stroke [color]="'rgba(90, 17, 26)'" width="3"></aol-style-stroke>
31+
<aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'" ></aol-style-fill>
32+
</aol-style>
33+
</ng-template>
34+
<aol-source-vector>
35+
<aol-feature [id]="f.id">
36+
<aol-geometry-polygon>
37+
<aol-collection-coordinates [coordinates]="f.geometry.coordinates[0]" [srid]="'EPSG:4326'" ></aol-collection-coordinates>
38+
</aol-geometry-polygon>
39+
</aol-feature>
40+
</aol-source-vector>
41+
</aol-layer-vector>
42+
</aol-layer-group>
43+
</aol-map>
44+
`,
45+
})
46+
export class ColorSelectHoverComponent implements OnInit {
47+
constructor() {}
48+
49+
@ViewChild('map') map: MapComponent;
50+
@ViewChildren('aoiLayerVector') aoiLayerVector: QueryList<LayerVectorComponent>;
51+
52+
features = {
53+
type: 'FeatureCollection',
54+
features: [
55+
{
56+
id: 1,
57+
type: 'Feature',
58+
properties: {},
59+
geometry: {
60+
type: 'Polygon',
61+
coordinates: [
62+
[
63+
[-1.4501953125, 48.40003249610685],
64+
[2.13134765625, 48.40003249610685],
65+
[2.13134765625, 50.13466432216694],
66+
[-1.4501953125, 50.13466432216694],
67+
[-1.4501953125, 48.40003249610685],
68+
],
69+
],
70+
},
71+
},
72+
{
73+
id: 2,
74+
type: 'Feature',
75+
properties: {},
76+
geometry: {
77+
type: 'Polygon',
78+
coordinates: [
79+
[
80+
[5.3173828125, 47.368594345213374],
81+
[9.29443359375, 47.368594345213374],
82+
[9.29443359375, 49.36806633482156],
83+
[5.3173828125, 49.36806633482156],
84+
[5.3173828125, 47.368594345213374],
85+
],
86+
],
87+
},
88+
},
89+
{
90+
id: 3,
91+
type: 'Feature',
92+
properties: {},
93+
geometry: {
94+
type: 'Polygon',
95+
coordinates: [
96+
[
97+
[-3.3837890625, 43.61221676817573],
98+
[1.51611328125, 43.61221676817573],
99+
[1.51611328125, 46.694667307773116],
100+
[-3.3837890625, 46.694667307773116],
101+
[-3.3837890625, 43.61221676817573],
102+
],
103+
],
104+
},
105+
},
106+
{
107+
id: 4,
108+
type: 'Feature',
109+
properties: {},
110+
geometry: {
111+
type: 'Polygon',
112+
coordinates: [
113+
[
114+
[4.50439453125, 42.342305278572816],
115+
[9.16259765625, 42.342305278572816],
116+
[9.16259765625, 45.66012730272194],
117+
[4.50439453125, 45.66012730272194],
118+
[4.50439453125, 42.342305278572816],
119+
],
120+
],
121+
},
122+
},
123+
],
124+
};
125+
126+
styleInterationSelected = new style.Style({
127+
fill: new style.Fill({
128+
color: 'rgba(0, 153, 255, 0.1)',
129+
}),
130+
stroke: new style.Stroke({
131+
color: 'rgba(0, 153, 255)',
132+
width: 3,
133+
}),
134+
});
135+
136+
hoveredFeatureId;
137+
138+
ngOnInit() {}
139+
140+
changeFeatureHovered(event) {
141+
const hit: OlFeature = this.map.instance.forEachFeatureAtPixel(event.pixel, f => f, {
142+
layerFilter: inLayer(...this.aoiLayerVector.toArray()),
143+
hitTolerance: 10,
144+
}) as OlFeature;
145+
146+
if (!hit && this.hoveredFeatureId) {
147+
this.hoveredFeatureId = null;
148+
}
149+
if (hit && hit.getId() !== this.hoveredFeatureId) {
150+
this.hoveredFeatureId = hit.getId();
151+
}
152+
}
153+
}
154+
155+
function inLayer(...layers: LayerVectorComponent[]): (l: OlLayer.Layer) => boolean {
156+
return (l: OlLayer.Layer) => layers.some(layer => layer.instance === l);
157+
}

‎src/app/example-list.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ export const examplesList = [
5656
routerLink: 'overlay',
5757
openLayersLink: 'https://openlayers.org/en/latest/examples/overlay.html',
5858
},
59+
{
60+
title: 'Change color when feature is selected or hovered',
61+
description: 'Change aol-style on hover or on select',
62+
routerLink: 'color-select-hover',
63+
openLayersLink: 'https://openlayers.org/en/latest/examples/vector-layer.html',
64+
},
5965
{
6066
title: 'Cluster',
6167
description: 'Example of using aol-source-cluster. This example shows how to do clustering on point features.',

0 commit comments

Comments
 (0)