无法在 openlayer3 中两次选择相同的线层

Question

I have drawn a line String feature and setting style for that and adding id for that line string it was showing. when it comes to the select it is now working as expected.

step-1: when i select for first time using map interaction i am able to select and get the data and apply the style to the line string.

step-2: i am selecting again same line string which is not allowing to select and not responding at all if i select some that line string it is able select same selected is not selecting.

below is my map interaction code

var selectionStyle=styleForSelection();
        var ifCondition="";         
        $.each(ispGeomResponse,function(key,value){
            ifCondition+="(layer.get('name')==\""+value.name+"\") || ";         
        });
        if(ifCondition)
            ifCondition=ifCondition.substring(0,ifCondition.lastIndexOf(" || "));
        selectInteraction= new ol.interaction.Select({
            hitTolerance:10,
            layers: function (layer) {
                if(eval(ifCondition)){
                    return layer;
                }
            },

        });

  map.addInteraction(selectInteraction);

selectInteraction.on('select', function(event){
            var selectFeature=event.selected[0];
            if(selectFeature!=undefined){
                   //some logic i am processing
            }   
        });

my expected output is i need to select the same line string twice. if it is already selected no need apply style i will write some custom logic if it is already selected.

Answer 1

You cannot select a feature which is already selected. If you wish to change the style on each click you could use the map's click event

 var styles = [ new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.5)' }), stroke: new ol.style.Stroke({ color: '#319FD3', width: 1 }) }), new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.5)' }), stroke: new ol.style.Stroke({ color: '#319FD3', width: 1 }) }), new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 255, 0, 0.5)' }), stroke: new ol.style.Stroke({ color: '#319FD3', width: 1 }) }), new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.5)' }), stroke: new ol.style.Stroke({ color: '#319FD3', width: 1 }) }) ]; var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON() }), style: styles[0] }); var map = new ol.Map({ layers: [vectorLayer], target: 'map', view: new ol.View({ center: [0, 0], zoom: 1 }) }); var updateStyle = function(pixel) { var feature = map.forEachFeatureAtPixel(pixel, function(feature) { return feature; }); if (feature) { var styleIndex = 1; if (feature.getStyle() === styles[1]) { styleIndex = 2; } else if (feature.getStyle() === styles[2]) { styleIndex = 3; } feature.setStyle(styles[styleIndex]) } } map.on('click', function(evt) { updateStyle(evt.pixel); });

 html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; }

 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <div id="map" class="map"></div>