如何在openlayers中隐藏矢量要素

Question

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

Answer 1

解

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

根据OpenLayers代码中的评论:

display - {String}如果display设置为"none",则Symbolizer无效.所有其他值均无效.

示例代码

对于调用的给定OpenLayers图层变量layer,您可以隐藏所有功能,如下所示:

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关于样式的文档,了解一些可能性.但一般来说,如果我需要再次显示该功能,我将功能的样式属性设置为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.如果您不需要同时与所有功能进行交互,这只是一个不错的选择,因为只有地图顶层的控件才会处于活动状态.(有多种方法可以使用多层控件,但是涉及更多的杂耍,除非绝对必要,否则我不推荐它)

Answer 3

从您的问题中不清楚您是否已经尝试过，但如果还没有，您可以尝试 setVisibility() 方法。

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