improve color saving; improve property handling

src/app/map/map.component.ts

@@ -13,6 +13,10 @@ import LayerGroup from 'ol/layer/Group';
 import {Collection} from "openlayers";
 import {EPSG} from "../enums/EPSG";
 import {inAndOut} from 'ol/easing';
+import {Feature} from 'ol/Feature';
+import Style from 'ol/style/Style';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
 
 /**
  * TODO: add description
@@ -50,6 +54,35 @@ export class MapComponent implements OnInit {
    */
   public currentFeatureInfo: any;
 
+  public propertyMockData = JSON.parse('{\n' +
+    '\t"FL": "345",\n' +
+    '\t"FLST_LABEL": "93\\/0",\n' +
+    '\t"FLAECHE_HA": 0.19303757998400001,\n' +
+    '\t"FBID": "DEHBEE0433450039",\n' +
+    '\t"FELDBL_NR": "043345-0039",\n' +
+    '\t"BESCHRIFT": "?",\n' +
+    '\t"NUTZER": "?",\n' +
+    '\t"TEILRAUM": "Blockland - Waller Feldmark",\n' +
+    '\t"BAUM17Code": "-",\n' +
+    '\t"B_AUM_2017": "-",\n' +
+    '\t"Parz_Code": "-",\n' +
+    '\t"Nutzung": "Grünland",\n' +
+    '\t"Nat_schutz": "-",\n' +
+    '\t"Gebiet": "Blockland",\n' +
+    '\t"Thema": "Informationen Agrarflächen",\n' +
+    '\t"Flurstck": "Flst. 345: 93\\/0"\n' +
+    '}');
+
+  /**
+   * A simple cache to save styles
+   */
+  private styleCache: { [key: string]: Style } = {};
+
+  /**
+   * A simple feature cache
+   */
+  private featureCache: { [key: string]: Feature } = {};
+
   constructor(public dialog: MatDialog) {
   }
 
@@ -117,62 +150,64 @@ export class MapComponent implements OnInit {
         return;
       }
       const pixel = this.map.getEventPixel(evt.originalEvent);
-      this.displayFeatureInfo(pixel);
+      const features = this.map.getFeaturesAtPixel(pixel);
+      if (features && features.length > 0) {
+        this.displayFeatureInfo(features[0]);
+        this.highlightFeature(features[0]);
+      } else {
+        // reapply original style to last highlighted feature
+        if (this.featureCache['lastHighlighted']) {
+          this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
+        }
+        // reset cache for feature and style
+        this.featureCache['lastHighlighted'] = null;
+        this.styleCache['lastHighlightedStyle'] = null;
+        this.currentFeatureInfo = null;
+      }
     });
   }
 
   /**
-   * Gets all feature infos for each feature at the given pixel.
-   * @param pixel
+   * Prepared feature properties and shows them
+   * @param features
    */
-  private displayFeatureInfo(pixel) {
-    const features = [];
-    this.map.forEachFeatureAtPixel(pixel, (feature) => {
-        features.push(feature)
-      }
-    );
-
-    if (features.length == 0) {
-      this.currentFeatureInfo = 'Too many features. Please zoom in to see feature infos';
-    } else if (features.length == 1) {
-      features.forEach(feature => {
-        const properties = feature.getProperties();
-        delete properties.geometry;
-        this.currentFeatureInfo = properties;
-      })
-    } else {
-      this.currentFeatureInfo = null;
-    }
+  private displayFeatureInfo(feature: Feature) {
+    const properties = feature.getProperties();
+    delete properties.geometry;
+    this.currentFeatureInfo = properties;
   };
 
-  // private colorPolygons(feature: Feature, resolution: any) {
-  //   const styles = {
-  //     black: new Style({
-  //       stroke: new Stroke({
-  //         color: '#86665a',
-  //         width: 1
-  //       }),
-  //       fill: new Fill({
-  //         color: 'rgba(121,85,72, 0.4)',
-  //       })
-  //     }),
-  //     green: new Style({
-  //       stroke: new Stroke({
-  //         color: '#b8c633',
-  //         width: 1
-  //       }),
-  //       fill: new Fill({
-  //         color: 'rgba(205,220,57,0.4)',
-  //       })
-  //     })
-  //   }
-  //   // console.log(feature.getProperties()['Grünland'],feature.getProperties());
-  //   if (feature.getProperties()['Nutzung'] === 'Grünland') {
-  //     return styles.green;
-  //   } else {
-  //     return styles.black;
-  //   }
-  // }
+  /**
+   * Highlights a Features
+   * @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']);
+    }
+    // save current feature and style
+    this.featureCache['lastHighlighted'] = feature;
+    this.styleCache['lastHighlightedStyle'] = feature.getStyle();
+
+    // set new feature style
+    feature.setStyle(this.styleCache['defaultHighlight']);
+  }
+
+
 
   /**
    * Opens a dialog to create a new custom layer