From 42fec9bbd3c5886a772f26779fcd757015d0a54a Mon Sep 17 00:00:00 2001 From: matrottier Date: Wed, 25 Sep 2019 07:49:34 -0400 Subject: [PATCH] :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 --- packages/geo/src/lib/layer/index.ts | 1 + packages/geo/src/lib/layer/layer.module.ts | 7 ++- .../shared/layers/vector-layer.interface.ts | 1 + .../lib/layer/shared/layers/vector-layer.ts | 36 +++++++++++++++- .../geo/src/lib/layer/shared/style.service.ts | 10 ++++- .../lib/layer/track-feature-button/index.ts | 1 + .../track-feature-button.component.html | 10 +++++ .../track-feature-button.component.scss | 0 .../track-feature-button.component.ts | 43 +++++++++++++++++++ packages/geo/src/locale/en.geo.json | 3 +- packages/geo/src/locale/fr.geo.json | 3 +- 11 files changed, 107 insertions(+), 8 deletions(-) create mode 100644 packages/geo/src/lib/layer/track-feature-button/index.ts create mode 100644 packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.html create mode 100644 packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.scss create mode 100644 packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.ts diff --git a/packages/geo/src/lib/layer/index.ts b/packages/geo/src/lib/layer/index.ts index 290b914baf..cbf15ce85f 100644 --- 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 index d7d8f2e426..5f7a3bd343 100644 --- 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 index 8b111147da..0b248a3f36 100644 --- 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 index 8495fa2261..7a3a3ad414 100644 --- 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 index 2d732f99da..605b9f1c96 100644 --- 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 new file mode 100644 index 0000000000..f58bd289b3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..068731aaad --- /dev/null +++ b/packages/geo/src/lib/layer/track-feature-button/track-feature-button.component.html @@ -0,0 +1,10 @@ + 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 new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..9c4132b68d --- /dev/null +++ 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 index 386e30e8e9..b954754bae 100644 --- 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 index 2900f8cf56..06d20f1b79 100644 --- 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",