How to stop select interaction without unselecting all features

Question

I use interaction:

var select = new ol.interaction.Select({
    layers: [my_layer],
    style: new ol.style.Style({
            fill: new ol.style.Fill({
             color: '#A00000'
         }),
             stroke: new ol.style.Stroke({
             color: '#000000'
         })
            })});

for selecting features on my_layer:

 var map = new ol.Map({
        target: 'map',
        interactions: ol.interaction.defaults().extend([select]),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          my_layer,
          vector]});

Now, I want to measure distance between points using sniped code from: http://openlayers.org/en/v3.1.0/examples/measure.html To avoid selecting features during measure process I have to remove select interaction from the map

map.removeInteraction(select);

But this removes selection from the selected features too. How to avoid this problem about unselection after removeInteraction(select)? Or maybe can I add any condition in this interaction to stop selecting features during measuring?

Answer 1

Try this:

this.select = new ol.interaction.Select({
                    filter: function(layer){
                        return enableSelection;
                    },
                    toggleCondition: function(layer){
                        return !enableSelection;
                    }
                });

Set enableSelection=trye; for normal use of Select interaction.
Set enableSelection=trye; to freeze selection.

Answer 2

I'm late to the party but as I saw that this question has 6k views with no accepted answer, I will give it a shot:

Assuming an Angular with Typescript context, I have implemented the solution below. For the sake of brevity I've simplified some code.

Hope you guys will find it useful.

import olMap from "ol/Map";

// init map
private _map: olMap = new olMap({
        target: SomeHTMLElement,
        view: new View({
            projection: SomeProjection,
            center: fromLonLat([0, 0], SomeProjection),
            zoom: 1,
            maxZoom: 4,
            minZoom: 1,
        })

});

// Class member used to lock/unlock the selection. 
// We start by having the selection unlocked but as soon as the user 
// selects something we will set this variable to true
private _selectionIsLocked = false;

// select condition: we will enable selection only on "click" event
// and when the seletion is unlocked;
// the default condition is "click" (on click event)
private _conditionFn(event: MapBrowserEvent<any>): boolean {
   return event.type === 'click' && !this._selectionIsLocked;
}

// here we prevent the user from deselecting the current selection
// if the selection is locked the user won't be able to deselect
// by clicking the selected entity
private _removeConditionFn(event: MapBrowserEvent<any>): boolean{
   return this._selectionIsLocked;
}
                       
// Important: As I understand, having removeCondition set, 
// this will override the toggle condition
private _buildSelect(): Select {
    return new Select({
             condition: this._conditionFn.bind(this),
             multi: false, // single select
             removeCondition: this._removeConditionFn.bind(this),
           });
}


// somewhere else in the code, we create the select, add it to the map
// and react to the user first selection by locking selection
const olSelect = this._buildSelect();
this._map.addInteraction(olSelect);

// you may want to have a named method/function as handler here so that  
// you can unsubscribe the event if needed
olSelect.on('select', (event: SelectEvent) => {
   this._selectionIsLocked = true;

   // ...some more code here to do something useful with the selection 
   // and unlock the selection
})