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;
    }