Search code examples
javascriptopenlayers

OpenLayers toggle feature visibility (Show/hide)

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.

Solution

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