diff --git a/examples/select-features.html b/examples/select-features.html index 3b84401fcc..353183ecef 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -35,6 +35,7 @@

Select features example

Example of using the Select interaction. Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

+

In this example, a listener is registered for the Select interaction's select event in order to update the selection status below.

+  0 selected features

See the select-features.js source to see how this is done.

diff --git a/examples/select-features.js b/examples/select-features.js index 0c8cea6882..7adbdff529 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -61,6 +61,11 @@ var changeInteraction = function() { } if (select !== null) { map.addInteraction(select); + select.on('select', function(e) { + $('#status').html(' ' + e.target.getFeatures().getLength() + + ' selected features (last operation selected ' + e.selected.length + + ' and deselected ' + e.deselected.length + ' features)'); + }); } }; diff --git a/src/ol/interaction/selectinteraction.js b/src/ol/interaction/selectinteraction.js index 0391cce51d..9406c9df65 100644 --- a/src/ol/interaction/selectinteraction.js +++ b/src/ol/interaction/selectinteraction.js @@ -3,6 +3,7 @@ goog.provide('ol.interaction.Select'); goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.events'); +goog.require('goog.events.Event'); goog.require('goog.functions'); goog.require('ol.CollectionEventType'); goog.require('ol.Feature'); @@ -13,6 +14,51 @@ goog.require('ol.interaction.Interaction'); goog.require('ol.style.Style'); +/** + * @enum {string} + */ +ol.SelectEventType = { + /** + * Triggered when feature(s) has been (de)selected. + * @event ol.SelectEvent#select + * @api + */ + SELECT: 'select' +}; + + + +/** + * @classdesc + * Events emitted by {@link ol.interaction.Select} instances are instances of + * this type. + * + * @param {string} type The event type. + * @param {Array.} selected Selected features. + * @param {Array.} deselected Deselected features. + * @extends {goog.events.Event} + * @constructor + */ +ol.SelectEvent = function(type, selected, deselected) { + goog.base(this, type); + + /** + * Selected features array. + * @type {Array.} + * @api + */ + this.selected = selected; + + /** + * Deselected features array. + * @type {Array.} + * @api + */ + this.deselected = deselected; +}; +goog.inherits(ol.SelectEvent, goog.events.Event); + + /** * @classdesc @@ -140,6 +186,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) { var features = this.featureOverlay_.getFeatures(); var /** @type {Array.} */ deselected = []; var /** @type {Array.} */ selected = []; + var change = false; if (set) { // Replace the currently selected feature(s) with the feature(s) at the // pixel, or clear the selected feature(s) if there is no feature at @@ -156,7 +203,9 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) { features.item(0) == selected[0]) { // No change } else { + change = true; if (features.getLength() !== 0) { + deselected = Array.prototype.concat(features.getArray()); features.clear(); } if (this.multi_) { @@ -189,6 +238,13 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) { features.remove(deselected[i]); } features.extend(selected); + if (selected.length > 0 || deselected.length > 0) { + change = true; + } + } + if (change) { + this.dispatchEvent( + new ol.SelectEvent(ol.SelectEventType.SELECT, selected, deselected)); } return ol.events.condition.pointerMove(mapBrowserEvent); };