diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 3a73d65..c8d912b 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -55,14 +55,35 @@ export class MapComponent implements OnInit { public currentFeatureInfo: any; /** - * A simple cache to save styles + * A simple cache that holds different Features and styles */ - private styleCache: { [key: string]: Style } = {}; + private cache : { [key: string]: Feature | Style } = { + /** + * Contains the feature that is currently selected + */ + selectedFeature: null, + + /** + * The feature that was highlighted at least + */ + lastHighlightedFeature: null, + + /** + * The style of the last highlighted feature before it was highlighted + */ + lastHighlightedStyle: null, + + /** + * Default style for selected feature + */ + defaultSelectedStyle : null, + + /** + * Default style for a highlighted feauture + */ + defaultHighlightStyle:null + }; - /** - * A simple feature cache - */ - private featureCache: { [key: string]: Feature } = {}; constructor(public dialog: MatDialog) { } @@ -129,7 +150,7 @@ export class MapComponent implements OnInit { // add event to get feature infos this.map.on('pointermove', (evt) => { - if (evt.dragging || this.featureCache['selectedFeature']) { + if (evt.dragging || this.cache.selectedFeature) { return; } const pixel = this.map.getEventPixel(evt.originalEvent); @@ -141,12 +162,12 @@ export class MapComponent implements OnInit { } else { this.map.getTargetElement().style.cursor = ''; // reapply original style to last highlighted feature - if (this.featureCache['lastHighlighted']) { - this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']); + if (this.cache.lastHighlightedFeature) { + this.cache.lastHighlightedFeature.setStyle(this.cache.lastHighlightedStyle); } // reset cache for feature and style - this.featureCache['lastHighlighted'] = null; - this.styleCache['lastHighlightedStyle'] = null; + this.cache.lastHighlightedFeature = null; + this.cache.lastHighlightedStyle = null; this.currentFeatureInfo = null; } }); @@ -156,17 +177,17 @@ export class MapComponent implements OnInit { const pixel = this.map.getEventPixel(evt.originalEvent); const features = this.map.getFeaturesAtPixel(pixel); - if (this.featureCache['selectedFeature']) { + if (this.cache.selectedFeature) { // use lastHighlightedStyle because the original style is saved there - this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']); + this.cache.selectedFeature.setStyle(this.cache.lastHighlightedStyle); // this.styleCache['lastHighlightedStyle'] = null; - this.featureCache['selectedFeature'] = null; + this.cache.selectedFeature = null; } else if (features && features.length > 0) { this.map.getTargetElement().style.cursor = ''; this.displayFeatureInfo(features[0]); - this.featureCache['selectedFeature'] = features[0]; - this.featureCache['lastHighlighted'] = null; - features[0].setStyle(this.styleCache['defaultSelected']); + this.cache.selectedFeature = features[0]; + this.cache.lastHighlightedFeature = null; + features[0].setStyle(this.cache.defaultSelectedStyle); } }); } @@ -187,15 +208,15 @@ export class MapComponent implements OnInit { */ private highlightFeature(feature: Feature) { // reapply saved feature and style - if (this.featureCache['lastHighlighted']) { - this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']); + if (this.cache.lastHighlightedFeature) { + this.cache.lastHighlightedFeature.setStyle(this.cache.lastHighlightedStyle); } // save current feature and style - this.featureCache['lastHighlighted'] = feature; - this.styleCache['lastHighlightedStyle'] = feature.getStyle(); + this.cache.lastHighlightedFeature = feature; + this.cache.lastHighlightedStyle = feature.getStyle(); // set new feature style - feature.setStyle(this.styleCache['defaultHighlight']); + feature.setStyle(this.cache.defaultHighlightStyle); } /** @@ -282,7 +303,7 @@ export class MapComponent implements OnInit { * Support function that inits cache values */ private initCache() { - this.styleCache['defaultSelected'] = new Style({ + this.cache.defaultSelectedStyle = new Style({ stroke: new Stroke({ color: 'rgb(245, 64, 41)', width: 3 @@ -292,7 +313,7 @@ export class MapComponent implements OnInit { }) }) - this.styleCache['defaultHighlight'] = new Style({ + this.cache.defaultHighlightStyle = new Style({ stroke: new Stroke({ color: 'rgb(245, 64, 41)', width: 2