隐藏矢量要素

Question

我已根据地图本身以外的复选框编写了一些代码来隐藏地图中的特定标记。但是，这些标记也有矢量特征（实际上在不同的图层上），但我想隐藏特征而不是破坏它们。我尝试使用display（false）但得到错误。是否有隐藏矢量的功能？

Answer 1

解决方案

更改style个实例的OpenLayers.Feature.Vector属性。将display属性设置为none或将visibility属性设置为hidden。之后重新绘制图层。

根据OpenLayers代码中的评论：

显示 - {String}如果display设置为“none”，则符号设置无效。所有其他值都没有效果。

示例代码

对于名为layer的给定OpenLayers图层变量，您可以隐藏所有功能，如下所示：

var features = layer.features;

for( var i = 0; i < features.length; i++ ) {
  features[i].style = { visibility: 'hidden' };
}

layer.redraw();

这会迭代图层中的所有要素，从而可以完全控制要隐藏的特定要素。

Answer 2

我已经与OpenLayers搏斗了几次，试图让我的功能在同一层中完全按照我的意愿显示。 @igorti的解决方案会覆盖所有功能的样式属性，因此我不建议使用此方法，除非您以后没有理由重新显示该功能（在这种情况下，removeFeatures()方法可能是更好的方法无论如何）。

隐藏矢量要素

我这样做的方法是手动将功能的样式显示设置为none，然后重新绘制图层。如果我需要再次显示该功能，请将display属性设置为block。很简单：

function hideFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (!isVisible(feature)) {
            feature.style.display = 'none';
        }
    }
    layer.redraw();
}

重新显示矢量要素

根据您的具体情况，重新显示隐藏的功能有点棘手。看看OpenLayers documentation on styling的一些可能性。但一般来说，如果我需要再次显示该功能，我会将功能的样式属性设置为null。这可确保当OpenLayers渲染器执行drawFeature函数时，将重新绘制图层样式图中的预配置样式：

// from OpenLayers drawFeature()
if (!style) {
    style = this.styleMap.createSymbolizer(feature, renderIntent);
}

所以你的显示功能可能如下所示：

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style = null; //redraw the feature
        }
    }
    layer.redraw();
}

其他方法

还有其他几种方法可以做到这一点。您可以将要素的fillOpacity和strokeOpacity设置为0，如下所示：

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style.fillOpacity = 1;
            feature.style.strokeOpacity = 1;
        }
        else {
            feature.style.fillOpacity = 0;
            feature.style.strokeOpacity = 0;
        }
    }
    layer.redraw();
}

这种方法的缺点是任何活动的地图控件仍然可以与“隐藏”功能进行交互，因此如果用户意外地点击或悬停在功能上，这些事件仍然会触发。

您还可以使用上述两种方法之一在图层的styleMap中创建一个名为hidden的样式。然后，要隐藏某个要素，只需将要素的renderIntent更改为hidden。

最后，您可以将要素的子集添加到单独的图层，并将图层的setVisibility方法调用为false。如果您不需要同时与所有功能进行交互，这只是一个不错的选择，因为只有地图顶层的控件才会处于活动状态。（有很多方法可以使用controls for multiple layers，但是涉及到更多的杂耍，除非绝对必要，否则我不推荐它。

Answer 3

您可以在style属性中设置display：'none'。因此不会显示该功能

Answer 4

隐藏功能

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = { display: 'none' };
    }
    layer.redraw();

显示隐藏的功能

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = null;
    }
    layer.redraw();

Answer 5

隐藏一个功能

var feature = vectorlayer.getFeatureByFid(fid);
feature.style = { display: 'none' };
vectorLayer.removeFeatures(feature);
vectorLayer.addFeatures(feature);

Answer 6

从你的问题中不清楚你是否已经尝试过，但如果你没有尝试过，你可以试试setVisibility（）方法。

参考：http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Layer-js.html#OpenLayers.Layer.setVisibility

Answer 7

以下是我最终为此事所做的事情，因为我有同样的需求，但不想单独隐藏每个功能或使用CSS样式：

我会假设你在某处有类似的东西：

myVector = new OpenLayers.Layer.Vector(...

然后将此代码链接到按钮或您需要的任何事件：

if( myVector.getVisibility() && myVector.features.length > 0 ) {
      myVector.setVisibility(false);
} else {
      myVector.setVisibility(true);
}

向量部分缺少

getVisibility（）/ setVisibility（）引用，但是在图层文档中。

如何在openlayers中隐藏矢量要素

7 个答案:

解决方案

示例代码

隐藏矢量要素

重新显示矢量要素

其他方法