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++;
              }
            }
          });
      };
    });