如何在openlayers中隐藏矢量特征

Question

我已经编写了一些代码来根据地图本身之外的复选框隐藏地图中的特定标记。但是，这些标记也具有矢量特征（实际上在单独的图层上），但我只想隐藏这些特征而不是破坏它们。我尝试使用 display(false) 但出现错误。有隐藏向量的功能吗？

Answer 1

解决方案

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

根据OpenLayers中的cmets代码：

display - {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，然后重绘图层。如果我需要再次显示该功能，请将显示属性设置为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 函数时，您从图层的 styleMap 中预配置的样式会被重绘：

// 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() 参考在矢量部分中缺失，但在图层文档中。