OpenLayers 切换功能可见性 (Show/hide)

Question

我试图在点击时显示或隐藏功能。

我有很多不同颜色的点，我正在尝试将不透明度更改为 0/1。

我设法做的是设置 2 种不同的功能样式并在单击时使用 setStyle。

我可以隐藏某个功能，但当我尝试取消隐藏时，所有功能都变成我使用的相同图像，而不是使用隐藏前的颜色。我将尝试用图片示例和一些代码片段来更好地解释。图 1 显示了地图加载时的特征，图 2 显示了切换为隐藏时的特征，图 3 显示了切换为显示时的特征（我不希望特征的样式设置为那样，我希望特征的样式与图 1 中的样式相同） )

这是代码片段：

  //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()]
                );
            }
          });

那么有没有办法将特征的不透明度设置为 0 或 1？

我试过了，但没有成功。

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

我也发现了这个：

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

但是那个函数 shows/hides 所有点都具有相同的样式，而不仅仅是选定的那个。例如，如果我想隐藏 1 个特征及其灰色圆圈，它将隐藏范围内的所有灰色圆圈。

Answer 1

层 setStyle 方法将遍历该层的所有特征。

你应该有一个像这个例子一样的函数，每次你想要基于特定条件的样式特征（它可以是特征id或任何其他属性) 您可以调用此函数并传递图层和 featureId 并相应地设计您的功能。

function setLayerStyle(layer, featureId) {
  layer.setStyle(feature => {
   if (feature.getProperties().id === featureId) {
    return style a
   } else {
    return style b
   }
  })
}

OpenLayers 切换功能可见性 (Show/hide)

OpenLayers toggle feature visibility (Show/hide)

javascript

openlayers