0

I am trying to show or hide features on click.

I have many points with different colors, I am trying to change opacity to 0/1.

What I managed to do is set 2 different feature styles and use setStyle on click.

I can hide a feature but when I try to unhide it all features become the same image I use instead of going to colors they were before hiding. I'll try to explain better with picture examples and some code snippets. Image 1 shows features on map load, Image 2 shows features when toggled to Hide, Image 3 shows features when toggled to Show (I don't want features to be styled like that, I want to features be styled as they were in Image 1)

enter image description here

This is the code snippet:

  //visible style
  var visibleStyleIcon = {
    Point: [
      new ol.style.Style({
        image: new ol.style.Icon({
          src: "https://openlayers.org/en/latest/examples/data/dot.png",
          opacity: 1,
        }),
      }),
    ],
  };

  // invisible Style Icon Opacity
  var invisibleStyleIcon = {
    Point: [
      new ol.style.Style({
        image: new ol.style.Icon({
          src: "https://openlayers.org/en/latest/examples/data/dot.png", //still need something even if it's invisible
          opacity: 0,
        }),
      }),
    ],
  };


forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector2")
                feature.setStyle(
                  invisibleStyleIcon[feature.getGeometry().getType()]
                );
              if (e.target.className === "menu-selector")
                feature.setStyle(
                  visibleStyleIcon[feature.getGeometry().getType()]
                );
            }
          });

So is there a way to just set opacity for feature to 0 or 1?

I tried this with no success.

                var style = feature.getStyle();
                var color = style.getFill().getColor();
                var colorArray = ol.color.asArray(color).slice();
                colorArray[3] = 1;
                style.getFill().setColor(colorArray);
                feature.setStyle(style);
                selectedLayer.redraw();

I found this also:

feature.getStyle().getImage().setOpacity(0);

But that function shows/hides all points with same Style, not just the selected one. For example, if I want to hide 1 feature and its a grey circle, it will hide all grey circles in extent.

Dominik
  • 121
  • 9
  • If you have different layers for each color you should use layer.setVisible() method. see this documentation: https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html#setVisible – Met Kiani Jul 09 '20 at 08:43
  • Sadly every feature is on the same layer and it has to stay like that. – Dominik Jul 09 '20 at 10:28
  • So, You want to set visibility for only a specific color? – Met Kiani Jul 09 '20 at 12:26
  • I want to set visibility for specific feature (which is selected in menu) – Dominik Jul 09 '20 at 12:35
  • 1
    I provided an answer here https://stackoverflow.com/a/62815498/3642321 – Met Kiani Jul 09 '20 at 13:04
  • I managed to solve it, please refer to: https://stackoverflow.com/questions/62815165/openlayers-apply-old-feature-style?noredirect=1#comment111084019_62815165 – Dominik Jul 09 '20 at 14:42

1 Answers1

1

Layer setStyle method will iterate through all features of that layer.

you should have a function like this example, and every time that you want style features based on a specific condition (it can be feature id or any other property) you can call this function and pass the layer and featureId and style your features accordingly.

function setLayerStyle(layer, featureId) {
  layer.setStyle(feature => {
   if (feature.getProperties().id === featureId) {
    return style a
   } else {
    return style b
   }
  })
}
Met Kiani
  • 834
  • 1
  • 9
  • 19