OpenLayers 应用旧的特征样式

Question

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

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

我设法做的是设置 2 个不同的功能 styles 并在点击时使用 setStyle。

我可以隐藏一个功能，但是当我尝试取消隐藏时，它被设置为默认的 OpenLayers 功能。 请参阅此处的示例：

map加载时的点图

隐藏时的要点的图片

当我尝试取消隐藏它时的图片（我希望它恢复为橙色，但它的默认样式）

这是代码片段：

selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector") {
                feature.setStyle(style); // Apply OLD STYLE (style before hiding the feature)
              }

              if (e.target.className === "menu-selector2") {
                var style = feature.getStyle(); // Get current style (so I can reapply it later)
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                ); // hide the feature
              }
            }
          });

我也发现了这个：

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

但是 function 显示/隐藏具有相同样式的所有点，而不仅仅是选定的点。 例如，如果我想隐藏 1 个要素及其一个灰色圆圈，它将在范围内隐藏所有灰色圆圈。

Answer 1

我必须在 function 之外声明变量，将旧的 styles 存储在一个列表中，然后遍历该列表并为每个功能应用旧的 styles。

希望代码对其他人有所帮助。

      var clone = [];
      var brojTocaka = 0;
      var i = 0;
      window.onclick = (e) => {
        if (
          e.target.className === "menu-selector2" ||
          e.target.className === "menu-selector"
        )
          $("#" + e.target.id).toggleClass("menu-selector menu-selector2");

        var t = e.target.innerText || e.target.textContent;

        selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector2") {
                clone.push(feature.getStyle());
                console.log(clone[brojTocaka]);
                brojTocaka++;
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                );
              }
              if (e.target.className === "menu-selector") {
                console.log(clone[i]);
                feature.setStyle(clone[i]);
                i++;
              }
            }
          });
      };
    });