From 3bc344350ac45a0f5d80a65811cd4b1e6aac2a02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre-=C3=89tienne=20Lord?= Date: Fri, 18 May 2018 14:44:04 -0400 Subject: [PATCH 1/3] Adding dragbox selection --- src/lib/query/shared/query.directive.ts | 59 ++++++++++++++++++------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/src/lib/query/shared/query.directive.ts b/src/lib/query/shared/query.directive.ts index 33e8e22223..7a3b51258d 100644 --- 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,45 @@ 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']; + } + feature.set('clickedTitle', title); + 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', From e436094b9b6e77e58f3cc7d148823432891b1887 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre-=C3=89tienne=20Lord?= Date: Fri, 18 May 2018 14:44:47 -0400 Subject: [PATCH 2/3] Adding displayField logic for clicked Features. --- .../datasource/shared/datasources/datasource.interface.ts | 1 + src/lib/query/shared/query.directive.ts | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/datasource/shared/datasources/datasource.interface.ts b/src/lib/datasource/shared/datasources/datasource.interface.ts index 958f612da2..a79cd4c233 100644 --- 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 index 7a3b51258d..bca7de9719 100644 --- a/src/lib/query/shared/query.directive.ts +++ b/src/lib/query/shared/query.directive.ts @@ -99,7 +99,11 @@ export class QueryDirective implements AfterViewInit, OnDestroy { f => f['zIndex'] === layer.getZIndex() )[0].dataSource['options']['title']; } - feature.set('clickedTitle', title); + let displayFieldValue = '' + if (layer.get('displayField')) { + displayFieldValue = ' (' + feature.getProperties()[layer.get('displayField')] + ')' + } + feature.set('clickedTitle', title + displayFieldValue); return feature; } From f5f3be4aba9f43ecd669812eed75f462e5d08713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pierre-=C3=89tienne=20Lord?= Date: Fri, 18 May 2018 14:55:53 -0400 Subject: [PATCH 3/3] Validation for wrong fieldname. --- src/lib/query/shared/query.directive.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/query/shared/query.directive.ts b/src/lib/query/shared/query.directive.ts index bca7de9719..cebdc65366 100644 --- a/src/lib/query/shared/query.directive.ts +++ b/src/lib/query/shared/query.directive.ts @@ -100,8 +100,10 @@ export class QueryDirective implements AfterViewInit, OnDestroy { )[0].dataSource['options']['title']; } let displayFieldValue = '' - if (layer.get('displayField')) { - displayFieldValue = ' (' + feature.getProperties()[layer.get('displayField')] + ')' + if ( + layer.get('displayField') && + feature.getProperties().hasOwnProperty(layer.get('displayField'))) { + displayFieldValue = ' (' + feature.getProperties()[layer.get('displayField')] + ')' } feature.set('clickedTitle', title + displayFieldValue); return feature;