fabian/GANE-AreaManager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add feature selection

Browse Source
This commit is contained in:
Fabian Jeglinski
2019-05-03 17:48:12 +02:00
parent d0892f4c57
commit eb9477c110
1 changed files with 68 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/map/map.component.ts
+68 -15
View File
@@ -87,6 +87,7 @@ export class MapComponent implements OnInit {
}
ngOnInit() {
this.initCache();
this.initBaseLayer();
this.initLayerGroup();
this.initMap();
@@ -146,7 +147,7 @@ export class MapComponent implements OnInit {
// add event to get feature infos
this.map.on('pointermove', (evt) => {
if (evt.dragging) {
if (evt.dragging || this.featureCache['selectedFeature']) {
return;
}
const pixel = this.map.getEventPixel(evt.originalEvent);
@@ -165,6 +166,46 @@ export class MapComponent implements OnInit {
this.currentFeatureInfo = null;
}
});
// handle feature selection
this.map.on('click', (evt) => {
const pixel = this.map.getEventPixel(evt.originalEvent);
const features = this.map.getFeaturesAtPixel(pixel);
// TODO
// check which of these are better?
// Both seems to remove style after click was undo
if (features && features.length > 0) {
// deselect feature that was selected before
if (this.featureCache['selectedFeature']) {
this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
this.styleCache['lastHighlightedStyle'] = null;
this.featureCache['selectedFeature'] = null;
} else {
this.displayFeatureInfo(features[0]);
this.featureCache['selectedFeature'] = features[0];
features[0].setStyle(this.styleCache['defaultSelected']);
}
} else if (this.featureCache['selectedFeature']) {
// use lastHighlightedStyle because the original style is saved there
this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
this.styleCache['lastHighlightedStyle'] = null;
this.featureCache['selectedFeature'] = null;
}
// if (this.featureCache['selectedFeature']) {
// // use lastHighlightedStyle because the original style is saved there
// this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
// this.styleCache['lastHighlightedStyle'] = null;
// this.featureCache['selectedFeature'] = null;
// } else if (features && features.length > 0) {
// this.displayFeatureInfo(features[0]);
// this.featureCache['selectedFeature'] = features[0];
// features[0].setStyle(this.styleCache['defaultSelected']);
// }
// });
});
}
/**
@@ -182,19 +223,6 @@ export class MapComponent implements OnInit {
* @param feature
*/
private highlightFeature(feature: Feature) {
// init case
if (!this.styleCache['defaultHighlight']) {
this.styleCache['defaultHighlight'] = new Style({
stroke: new Stroke({
color: 'rgb(245, 64, 41)',
width: 2
}),
fill: new Fill({
color: 'rgba(245, 64, 41, 0.1)',
})
})
}
// reapply saved feature and style
if (this.featureCache['lastHighlighted']) {
this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
@@ -208,7 +236,6 @@ export class MapComponent implements OnInit {
}
/**
* Opens a dialog to create a new custom layer
*/
@@ -284,4 +311,30 @@ export class MapComponent implements OnInit {
}
this.map.getView().fit(customLayer.getSource().getExtent(), options);
}
/**
* Support function that inits cache values
*/
private initCache() {
this.styleCache['defaultSelected'] = new Style({
stroke: new Stroke({
color: 'rgb(245, 64, 41)',
width: 3
}),
fill: new Fill({
color: 'rgba(245, 64, 41, 0.3)',
})
})
this.styleCache['defaultHighlight'] = new Style({
stroke: new Stroke({
color: 'rgb(245, 64, 41)',
width: 2
}),
fill: new Fill({
color: 'rgba(245, 64, 41, 0.1)',
})
})
}
}