OpenLayers4 隐藏(hide)Feature

需求:

需要将同一图层的要素进行分类显示和隐藏(类似于图层控制)

方法：

使用setStyle方法将Feature的样式设置为null。

环境：

win10、google chrome、OL 4.3

 

核心代码：

//创建矢量图层  
var vecLayer = new ol.layer.Vector({
            style:null,//这里需要将style属性设置为空才能控制要素的样式
            name:'layer ',
            visible:true,
            source:new ol.source.Vector()
          });

//添加feature到图层的时候设置样式
//polygonStyle 为样式函数
//feature包含分类信息，用于设置样式

feature.setStyle(polygonStyle(feature));
vecLayer.getSource().addFeature(feature);

//判断要素分类是否选中(isCheck)，选中就显示要素
  veclayer.getSource().getFeatures().forEach(function(item){
       if(isCheck)
            item.setStyle(polygonStyle(item));
     else
           item.setStyle(null);
});

 

    function polygonStyle(feature){
        var style = new ol.style.Style({
          fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
            color:red
          }),
          stroke: new ol.style.Stroke({ //边界样式
              lineDash:[6],//注意:该属性为虚线效果，在IE10以上版本才有效果
            color:red,
            width: 2
          }),
          text: new ol.style.Text({ //文本样式
            font: '20px Verdana,sans-serif',
            text:feature.attr.dmaName,
            fill: new ol.style.Fill({
              color: red
            })
          })
        });
        return style;
    }