OpenLayers 应用旧的功能样式 [英] OpenLayers apply old feature style

问题描述

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

I am trying to show or hide features on click.

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

I have many points with different colors, I am trying to change opacity to 0/1.

我设法做的是设置 2 种不同的特征样式并在点击时使用 setStyle.

What I managed to do is set 2 different feature styles and use setStyle on click.

我可以隐藏某个功能，但是当我尝试取消隐藏它时，它的样式将设置为默认的 OpenLayers 功能.在此处查看示例:

I can hide a feature but when I try to unhide it is styled as default OpenLayers feature. See examples here:

地图加载时点的图片

隐藏点的图片

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

Picture of point when I try to unhide it (I want it to be back to orange but its default style)

这是代码片段:

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 个特征及其一个灰色圆圈，它将在范围内隐藏所有灰色圆圈.

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.

推荐答案

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

I had to declare variable outside function, store the old styles in a list, then loop through the list and apply old styles for each feature.

希望代码对其他人有帮助.

Hope the code helps someone else.

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

这篇关于OpenLayers 应用旧的功能样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！