Change style for selected feature in OpenLayers

Question

I need to change the style of the selected feature and allow the user to also change all features if they do not have any selected.

My problem is when the user set the new style, all the features have their style changed. I want the code to recognize what feature is being selected and the user can change just that feature style, not all of them.

    var button_draw_select = new ol.control.Toggle({
    html: '<i class="fa fa-hand-pointer-o"></i>',
    className: "select",
    title: "Seleciona desenho(s) \nPara selecionar mais de um desenho, pressione a tecla 'SHIFT'",
    bar: sbar,
    interaction: new ol.interaction.Select({
        layers: [vector_layer],
        //style: selectedStyle,
        hitTolerance: 2,
    }),
    onToggle: function (active) {
        //  alert("Select is "+(active?"activated":"deactivated"));

    }
});
nested_bar_draw.addControl(button_draw_select)

button_draw_select.on('change:active', function (evt) {
    if (evt.active === false) button_draw_select.getInteraction().getFeatures().clear()
});
    var button_draw_style = new ol.control.Toggle({
    html: '<i class="fa fa-paint-brush"></i>',
    className: "select",
    title: "Configura o estilo para a camada de desenho",
    //bar: sbar,
    interaction: new ol.interaction.Select({
        layers: [vector_layer],
        hitTolerance: 2,
    }),
    onToggle: function (active) {
        if (active === false) {
            document.getElementById('draw_style').style.display = 'none';
            button_draw_select.setActive(true)

        }
        else {
            document.getElementById('draw_style').style.display = 'block';
            document.getElementById('draw_attributes').style.display = 'none';
        }
    }
});
nested_bar_draw.addControl(button_draw_style)
button_draw_style.getInteraction().on('select', setStyleDraw);

/* custom style draw */
var style_draw;
document.getElementById('draw_style').style.display = 'none';

function setStyleDraw() {
    var before;
    var selection = button_draw_style.getInteraction().getFeatures();
    if (selection.getLength() === 1){
        alert("Selected")
    }
    else{
        if (style_draw) before = style_draw.clone();
        style_draw = new ol.style.Style({
            stroke: new ol.style.Stroke({ width: Number($("#width").val()), color: $("#color_stroke").val() }),
            fill: new ol.style.Fill({ color: $("#color_fill").val() }),
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: $("#color_fill").val(),
                }),
                stroke: new ol.style.Stroke({
                    color: $("#color_stroke").val(),
                    width: Number($("#width").val())
                })
            }),



        });

        //vector_layer.getSource().refresh();   estava assim na versão anterior
        vector_layer.getSource().changed();
    }
    
    

    document.getElementById('draw_style').style.display = 'none';
    button_draw_select.setActive(true)
}
setStyleDraw();

ol.control.Toggle is from OpenLayers plugin ol-ext.

Answer 1

Solution below follows the following logic:

• initially Select button is not active, Paint button is disabled and enabled only when a feature is selected;
• click on Select button activates feature selection; if button is already selected, it deactivates it;
• when feature is selected, Paint button is enabled and activated;
• click on Paint button sets style of selected feature to desired style, feature selection is cleared and Pint button disabled.

Code below is simplified version of code from question, but the main logic can be derived from it:

var bar = new ol.control.Bar();
bar.setPosition('top');
map.addControl(bar);

var button_draw_select = new ol.control.Toggle({
  html: '<i class="fa fa-hand-pointer-o"></i>',
  className: "select",
  title: "Seleciona desenho(s) \nPara selecionar mais de um desenho, pressione a tecla 'SHIFT'",
  interaction: new ol.interaction.Select({
    layers: [vector_layer],
    hitTolerance: 2,
  }),
});
bar.addControl(button_draw_select);
button_draw_select.getInteraction().on('select', function(evt) {
  button_draw_style.setActive(true);
  button_draw_style.setDisable(false);
});    
button_draw_select.on('change:active', function (evt) {
  if (evt.active === false) {
    button_draw_select.getInteraction().getFeatures().clear();
    button_draw_style.setActive(false);
    button_draw_style.setDisable(true);
  }
});

var button_draw_style = new ol.control.Toggle({
  html: '<i class="fa fa-paint-brush"></i>',
  className: "select",
  title: "Configura o estilo para a camada de desenho",
  disable: true,
  onToggle: function (active) {
    if (active === false) {
      setStyleDraw();
      button_draw_style.setDisable(true);
    }
  }
});
bar.addControl(button_draw_style);

function setStyleDraw() {
  var selection = button_draw_select.getInteraction().getFeatures();
  if (selection.getLength() === 1){
    var style_draw = new ol.style.Style({
      stroke: new ol.style.Stroke({ width: 2, color: 'red' }),
      fill: new ol.style.Fill({ color: 'green' }),
      image: new ol.style.Circle({
        radius: 6,
        fill: new ol.style.Fill({
          color: 'yellow',
        }),
        stroke: new ol.style.Stroke({
          color: 'black',
          width: 1
        })
      }),
    });
    var selectedId = selection.getArray()[0].getId();
    button_draw_select.getInteraction().getFeatures().clear();
    vector_layer.getSource().getFeatureById(selectedId).setStyle(style_draw);
  }      
  button_draw_select.setActive(true);
}

Answer 2

I make de changes but don´t save de style.

var button_draw_style = new ol.control.Toggle({
    html: '<i class="fa fa-paint-brush"></i>',
    className: "select",
    title: "Configura o estilo para a camada de desenho",
    //bar: sbar,
    interaction: new ol.interaction.Select({
        layers: [vector_layer],
        hitTolerance: 2,
    }),
    onToggle: function (active) {
        if (active === false) {
            button_draw_style.getInteraction().getFeatures().clear()
            document.getElementById('draw_style').style.display = 'none';
            button_draw_select.setActive(true)
        } else {
            var len = vector_layer.getSource().getFeatures().length
            if (len === 0) {
                swal("Tabela de Atributos", "NÂO TEM DESENHO. Verifique!", "info");
                button_draw_style.setActive(false)
            } else {
                var features = button_draw_style.getInteraction().getFeatures();
                if (!features.getLength()) swal("Tabela de Atributos", "SEM DESENHO SELECIONADO.", "info");
                else {
                    MostrarCOR();
                }
            }
        }
    }
    
});
nested_bar_draw.addControl(button_draw_style)
button_draw_style.getInteraction().on('select', MostrarCOR);

/* custom style draw */
var style_draw;
var style_geometry;
document.getElementById('draw_style').style.display = 'none';
function MostrarCOR(){
    document.getElementById('draw_style').style.display = 'block';
    document.getElementById('draw_attributes').style.display = 'none';
}
function setStyleDraw() {
    var before;
    var selection = button_draw_style.getInteraction().getFeatures();
    if (selection.getLength() === 1){

        style_geometry = new ol.style.Style({
            stroke: new ol.style.Stroke({ width: Number($("#width").val()), color: $("#color_stroke").val() }),
            fill: new ol.style.Fill({ color: $("#color_fill").val() }),
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: $("#color_fill").val(),
                }),
                stroke: new ol.style.Stroke({
                    color: $("#color_stroke").val(),
                    width: Number($("#width").val())
                })
            }),



        });
        selection.item(0).setStyle(style_geometry);
    }
    else{
        if (style_draw) before = style_draw.clone();
        style_draw = new ol.style.Style({
            stroke: new ol.style.Stroke({ width: Number($("#width").val()), color: $("#color_stroke").val() }),
            fill: new ol.style.Fill({ color: $("#color_fill").val() }),
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: $("#color_fill").val(),
                }),
                stroke: new ol.style.Stroke({
                    color: $("#color_stroke").val(),
                    width: Number($("#width").val())
                })
            }),



        });

        //vector_layer.getSource().refresh();   estava assim na versão anterior
        vector_layer.getSource().changed();
    }
    
    
    

    document.getElementById('draw_style').style.display = 'none';
    button_draw_select.setActive(true)
}
setStyleDraw();