时间戳

首页 > 解决方案 > OpenLayers 切换功能可见性（显示/隐藏）

javascript - OpenLayers 切换功能可见性（显示/隐藏）

问题描述

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

我有很多不同颜色的点，我正在尝试将不透明度更改为 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);

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

标签： javascriptopenlayers

解决方案

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

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

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

推荐阅读