Openlayers 6 : How to change PointStyle when selected?

user_4423995 0
Viewed 72

I use Openlayers 6 try to change Point style when click on a point previously created but this code select the Point but no new style is applied. What Am i missing ? I send the function to create the new Style, and the code to insert a Select Interaction

    const styleClick = function(feature, resolution) {
    return [
        new Style({
            image: new Circle({
                fill: Fill({ color: [245, 121, 0, 0.8] }),
                stroke: Stroke({ color: [0,0,0,1] }),
                radius: 7
            }),
            text: new Text({
                font: '24px Verdana',
                text: feature.get('name'),
                offsetY: 20,
                fill: Fill({
                    color: [255, 0, 0, 0.8]
                })
            })
        })
    ];
};


 let selectSingleClick = new Select({style: styleClick});
  
  map.addInteraction(selectSingleClick);
  
  selectSingleClick.on('select', function (e) {
     
        
        if( e.target.getFeatures().getLength() > 0 )
            {
                 document.getElementById('obj-select').innerHTML =
                ' ' +
                e.target.getFeatures().item(0).getGeometry().getType() +
        ' color is ' +
                e.target.getFeatures().item(0).getStyle() +
        ' and deselected ' +
        e.deselected.length +
        ' features)'
        

                if( e.target.getFeatures().item(0).getGeometry().getType() == "LineString" )
                        {
                                //do something
                        };
                            if( e.target.getFeatures().item(0).getGeometry().getType() == "Point" )
                        {
                                //do something

                        };
                        
        //getGeometry().getCoordinates();
        }
        
        map.removeInteraction(selectSingleClick);
        
    }
    
    );

    
  }
}
point openlayers select styles
1 Answers

First, add your custom style like this:

let selectStyle = function (feature) {
    let fill = new ol.style.Fill({
        color: '#326de5',
    });

    let stroke = new ol.style.Stroke({
        color: '#a30f4f',
        width: 1.5
    });

    let styles = [
        new ol.style.Style({
            image: new ol.style.Circle({
                fill: fill,
                stroke: stroke,
                radius: 6
            }),
            fill: fill,
            stroke: stroke
        })
    ];
    return styles;
}

Now add top style to Select like this:

let selectInteraction = new ol.interaction.Select({
    style: selectStyle 
});
map.addInteraction(selectInteraction);

This code works for me!

user_182203270
Related