feat(feature): Manage drag box on feature select (#157)

* Adding dragbox selection * Adding displayField logic for clicked Features. * Validation for wrong fieldname.
infra-geo-ouverte · May 18, 2018 · e22e006 · e22e006
1 parent f6c412a
commit e22e006
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/src/lib/datasource/shared/datasources/datasource.interface.ts b/src/lib/datasource/shared/datasources/datasource.interface.ts
@@ -14,6 +14,7 @@ export interface DataSourceOptions {
   metadata?: MetadataOptions;
   download?: DownloadOptions;
   view?: ol.olx.layer.ImageOptions;
+  displayField?: string;
 }
 
 export interface DataSourceContext extends DataSourceOptions {

diff --git a/src/lib/query/shared/query.directive.ts b/src/lib/query/shared/query.directive.ts
@@ -30,6 +30,10 @@ export class QueryDirective implements AfterViewInit, OnDestroy {
   private queryLayers$$: Subscription;
   private queries$$: Subscription[] = [];
 
+  public dragBox = new ol.interaction.DragBox({
+    condition: ol.events.condition.platformModifierKeyOnly
+  });
+
   get map(): IgoMap {
     return this.component.map;
   }
@@ -61,6 +65,11 @@ export class QueryDirective implements AfterViewInit, OnDestroy {
     );
 
     this.map.ol.on('singleclick', this.handleMapClick, this);
+    this.dragBox = new ol.interaction.DragBox({
+      condition: ol.events.condition.platformModifierKeyOnly
+    });
+    this.map.ol.addInteraction(this.dragBox);
+    this.dragBox.on('boxend', this.handleMapClick, this);
   }
 
   ngOnDestroy() {
@@ -80,29 +89,51 @@ export class QueryDirective implements AfterViewInit, OnDestroy {
     this.queryLayers = queryLayers;
   }
 
+  private manageFeatureByClick(feature: ol.Feature, layer: ol.layer.Layer): ol.Feature {
+    if (layer.getZIndex() !== 999) {
+      let title;
+      if (layer.get('title') !== undefined) {
+        title = layer.get('title');
+      } else {
+        title = this.map.layers.filter(
+          f => f['zIndex'] === layer.getZIndex()
+        )[0].dataSource['options']['title'];
+      }
+      let displayFieldValue = ''
+      if (
+        layer.get('displayField') &&
+        feature.getProperties().hasOwnProperty(layer.get('displayField'))) {
+          displayFieldValue = ' (' + feature.getProperties()[layer.get('displayField')] + ')'
+      }
+      feature.set('clickedTitle', title + displayFieldValue);
+      return feature;
+    }
+
+  }
+
   private handleMapClick(event: ol.MapBrowserEvent) {
     this.unsubscribeQueries();
-
     const clickedFeatures: ol.Feature[] = [];
     const format = new ol.format.GeoJSON();
     const mapProjection = this.map.projection;
-    this.map.ol.forEachFeatureAtPixel(
-      event.pixel,
-      (feature: ol.Feature, layer: ol.layer.Layer) => {
-        if (layer.getZIndex() !== 999) {
-          let title;
-          if (layer.get('title') !== undefined) {
-            title = layer.get('title');
-          } else {
-            title = this.map.layers.filter(
-              f => f['zIndex'] === layer.getZIndex()
-            )[0].dataSource['options']['title'];
-          }
-          feature.set('clickedTitle', title);
-          clickedFeatures.push(feature);
+    if (event.type === 'singleclick') {
+      this.map.ol.forEachFeatureAtPixel(
+        event.pixel,
+        (feature: ol.Feature, layer: ol.layer.Layer) => {
+            clickedFeatures.push(this.manageFeatureByClick(feature, layer));
+        }, { hitTolerance: 5 }
+      );
+    } else if (event.type === 'boxend') {
+      const dragExtent = this.dragBox.getGeometry().getExtent();
+      this.map.layers.forEach(layer => {
+        if (layer.ol['type'] === 'VECTOR' && layer.visible && layer.zIndex !== 999) {
+          const featuresOL = layer.dataSource.ol as any
+          featuresOL.forEachFeatureIntersectingExtent(dragExtent, (feature) => {
+            clickedFeatures.push(this.manageFeatureByClick(feature, layer.ol));
+          });
         }
-      }, { hitTolerance: 5 }
-    );
+      });
+    }
     const featuresGeoJSON = JSON.parse(
       format.writeFeatures(clickedFeatures, {
         dataProjection: 'EPSG:4326',