add feature selection

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)',
+      })
+    })
+  }
+
 }