OpenLayers 应用旧的特征样式答案

【问题标题】：OpenLayers apply old feature styleOpenLayers 应用旧的特征样式
【发布时间】：2020-07-09 12:46:37
【问题描述】：

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

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

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

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

地图加载时点的图片

我隐藏时点的图片

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

这是代码sn-p：

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

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

【问题讨论】：

您需要先克隆样式，然后再更改它feature.setStyle(feature.getStyle().clone());（您只需执行一次，更改回来时它已经克隆了）
@Mike 感谢您的回复，遗憾的是它正在克隆隐藏功能样式而不是旧样式
我想建议删除和添加层会给你结果。
感谢@BasilMohammed 的建议我使用了 selectedLayer.redraw();但我得到的结果就像在 OP 中一样。
隐藏前必须调用，恢复前无需调用

标签： javascript openlayers

【解决方案1】：

我必须在函数外部声明变量，将旧样式存储在列表中，然后循环遍历列表并为每个功能应用旧样式。

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

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

【讨论】：