:feat(track feature): add possibility to track a feature (#422)

* feat(geo.layer.vector) add possibility to track a feature * fix(geo.layer.styleByAttribute) fix 0 value * feat(geo.layer.vector) possibility to track a feature on map * feat(geo.filter.trackfeature.button) add a good tooltip * feat(geo.layer) relocate button "trackFeature" * Update filter.module.ts * Update layer-item.component.html * Update vector-layer.interface.ts
infra-geo-ouverte · Sep 25, 2019 · 42fec9b · 42fec9b
1 parent 9c9fe31
commit 42fec9b
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 8 deletions.
diff --git a/packages/geo/src/lib/layer/index.ts b/packages/geo/src/lib/layer/index.ts
@@ -2,4 +2,5 @@ export * from './shared';
 export * from './layer-item';
 export * from './layer-legend';
 export * from './layer-list';
+export * from './track-feature-button';
 export * from './utils';
diff --git a/packages/geo/src/lib/layer/layer.module.ts b/packages/geo/src/lib/layer/layer.module.ts
@@ -27,6 +27,7 @@ import { LayerItemComponent } from './layer-item/layer-item.component';
 import { LayerLegendComponent } from './layer-legend/layer-legend.component';
 import { LayerListComponent } from './layer-list/layer-list.component';
 import { LayerListBindingDirective } from './layer-list/layer-list-binding.directive';
+import { TrackFeatureButtonComponent } from './track-feature-button/track-feature-button.component';
 
 @NgModule({
   imports: [
@@ -50,13 +51,15 @@ import { LayerListBindingDirective } from './layer-list/layer-list-binding.direc
     LayerItemComponent,
     LayerLegendComponent,
     LayerListComponent,
-    LayerListBindingDirective
+    LayerListBindingDirective,
+    TrackFeatureButtonComponent
   ],
   declarations: [
     LayerItemComponent,
     LayerLegendComponent,
     LayerListComponent,
-    LayerListBindingDirective
+    LayerListBindingDirective,
+    TrackFeatureButtonComponent
   ]
 })
 export class IgoLayerModule {

diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
@@ -40,6 +40,7 @@ export interface VectorLayerOptions extends LayerOptions {
   animation?: VectorAnimation;
   styleByAttribute?: StyleByAttribute;
   clusterParam?: ClusterParam;
+  trackFeature?: string | number;
 }
 
 export interface VectorAnimation {

diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.ts
@@ -16,10 +16,16 @@ import { Layer } from './layer';
 import { VectorLayerOptions } from './vector-layer.interface';
 
 export class VectorLayer extends Layer {
-  public dataSource: FeatureDataSource | WFSDataSource | ArcGISRestDataSource | WebSocketDataSource | ClusterDataSource;
+  public dataSource:
+    | FeatureDataSource
+    | WFSDataSource
+    | ArcGISRestDataSource
+    | WebSocketDataSource
+    | ClusterDataSource;
   public options: VectorLayerOptions;
   public ol: olLayerVector;
   private watcher: VectorWatcher;
+  private trackFeatureListenerId;
 
   get browsable(): boolean {
     return this.options.browsable !== false;
@@ -49,6 +55,10 @@ export class VectorLayer extends Layer {
       );
     }
 
+    if (this.options.trackFeature) {
+      this.enableTrackFeature(this.options.trackFeature);
+    }
+
     return new olLayerVector(olOptions);
   }
 
@@ -154,8 +164,30 @@ export class VectorLayer extends Layer {
         if (this.visible) {
           this.flash(e.feature);
         }
-
       }.bind(this)
     );
   }
+
+  public enableTrackFeature(id: string | number) {
+    this.trackFeatureListenerId = this.dataSource.ol.on(
+      'addfeature',
+      this.trackFeature.bind(this, id)
+    );
+  }
+  public centerMapOnFeature(id: string | number) {
+    const feat = this.dataSource.ol.getFeatureById(id);
+    if (feat) {
+      this.map.ol.getView().setCenter(feat.getGeometry().getCoordinates());
+    }
+  }
+
+  public trackFeature(id, feat) {
+    if (feat.feature.getId() === id && this.visible) {
+      this.centerMapOnFeature(id);
+    }
+  }
+
+  public disableTrackFeature(id?: string | number) {
+    unByKey(this.trackFeatureListenerId);
+  }
 }
diff --git a/packages/geo/src/lib/layer/shared/style.service.ts b/packages/geo/src/lib/layer/shared/style.service.ts
@@ -79,7 +79,10 @@ export class StyleService {
     const baseStyle = styleByAttribute.baseStyle;
     if (type === 'circle') {
       for (let i = 0; i < size; i++) {
-        const val = feature.get(attribute) || '';
+        const val =
+          typeof feature.get(attribute) !== 'undefined'
+            ? feature.get(attribute)
+            : '';
         if (val === data[i] || val.toString().match(data[i])) {
           if (icon) {
             style = [
@@ -127,7 +130,10 @@ export class StyleService {
       }
     } else if (type === 'regular') {
       for (let i = 0; i < size; i++) {
-        const val = feature.get(attribute) || '';
+        const val =
+          typeof feature.get(attribute) !== 'undefined'
+            ? feature.get(attribute)
+            : '';
         if (val === data[i] || val.toString().match(data[i])) {
           style = [
             new olstyle.Style({

diff --git a/packages/geo/src/lib/layer/track-feature-button/index.ts b/packages/geo/src/lib/layer/track-feature-button/index.ts
@@ -0,0 +1 @@
+export * from './track-feature-button.component';
diff --git a/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.html b/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.html
@@ -0,0 +1,10 @@
+<button *ngIf="options.trackFeature"
+  mat-icon-button
+  collapsibleButton
+  tooltip-position="below"
+  matTooltipShowDelay="500"
+  [matTooltip]="'igo.geo.layer.trackFeature' | translate"
+  [color]="color"
+  (click)="toggleTrackFeature()">
+  <mat-icon svgIcon="crosshairs-gps"></mat-icon>
+</button>
diff --git a/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.scss b/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.scss
diff --git a/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.ts b/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
+
+import { Layer, VectorLayer } from '../shared/layers';
+import { VectorLayerOptions } from '../shared/layers/vector-layer.interface';
+
+@Component({
+  selector: 'igo-track-feature-button',
+  templateUrl: './track-feature-button.component.html',
+  styleUrls: ['./track-feature-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TrackFeatureButtonComponent implements OnInit {
+
+  @Input() layer: VectorLayer;
+
+  @Input() trackFeature = false;
+
+  get options(): VectorLayerOptions {
+    if (!this.layer) {
+      return;
+    }
+    return this.layer.options;
+  }
+
+  public color: string = 'primary';
+
+  constructor() {}
+
+  ngOnInit() {
+    this.color = this.trackFeature ? 'primary' : 'basic';
+  }
+
+  toggleTrackFeature() {
+    if (this.trackFeature) {
+      this.layer.disableTrackFeature(this.layer.options.trackFeature);
+      this.color = 'basic';
+    } else {
+      this.layer.enableTrackFeature(this.layer.options.trackFeature);
+      this.color = 'primary';
+    }
+    this.trackFeature = !this.trackFeature;
+  }
+}
diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
@@ -117,7 +117,8 @@
         "subsetLayersListOnlyInRange": "Subset the layers's list by resolution range",
         "sortAlphabetically": "Sort the layers's list alphabetically",
         "sortMapOrder": "Sort the layers's list based on layer's order on the map",
-        "resetLayersList": "Remove the current applied filter to layers's list"
+        "resetLayersList": "Remove the current applied filter to layers's list",
+        "trackFeature": "Track the feature"
       },
       "download": {
         "action": "Download data",

diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json
@@ -117,7 +117,8 @@
         "subsetLayersListOnlyInRange": "Conserver les couches qui sont dans la plage de résolution active",
         "sortAlphabetically": "Trier la liste des couches alphabétiquement",
         "sortMapOrder": "Replacer les couches selon l'ordre cartographique",
-        "resetLayersList": "Supprimer le filtre appliqué à la liste"
+        "resetLayersList": "Supprimer le filtre appliqué à la liste",
+        "trackFeature": "Suivre l'entité"
       },
       "download": {
         "action": "Télécharger les données associées",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './track-feature-button.component';