需求:
需要将同一图层的要素进行分类显示和隐藏(类似于图层控制)
方法:
使用setStyle方法将Feature的样式设置为null。
核心代码:
//创建矢量图层
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以上版本才有效果