Skip to content

Commit

Permalink
feat(feature): Manage drag box on feature select (#157)
Browse files Browse the repository at this point in the history
* Adding dragbox selection

* Adding displayField logic for clicked Features.

* Validation for wrong fieldname.
  • Loading branch information
pelord authored and mbarbeau committed May 18, 2018
1 parent f6c412a commit e22e006
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface DataSourceOptions {
metadata?: MetadataOptions;
download?: DownloadOptions;
view?: ol.olx.layer.ImageOptions;
displayField?: string;
}

export interface DataSourceContext extends DataSourceOptions {
Expand Down
65 changes: 48 additions & 17 deletions src/lib/query/shared/query.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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() {
Expand All @@ -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',
Expand Down

0 comments on commit e22e006

Please sign in to comment.