diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 6baa826..3d8068c 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -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)', + }) + }) + } + }