無法在 openlayer3 中兩次選擇相同的線層

Question

我已經為它繪制了一個線串特征和設置樣式，並為它顯示的那個線串添加了 id。 當涉及到選擇時，它現在按預期工作。

第 1 步：當我第一次使用地圖交互進行選擇時，我能夠選擇並獲取數據並將樣式應用於線串。

第 2 步：我再次選擇相同的行字符串，如果我選擇一些它可以選擇的行字符串，則它不允許選擇並且根本不響應。

下面是我的地圖交互代碼

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
            }   
        });

我的預期輸出是我需要選擇相同的行字符串兩次。 如果它已經被選中，則不需要應用樣式，如果它已經被選中，我將編寫一些自定義邏輯。

Answer 1

您不能選擇已選擇的功能。 如果您希望在每次點擊時更改樣式，您可以使用地圖的點擊事件

 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>