Show and Hide Features of layers openlayers 3 - openlayers-3

Question

I am trying to hide Feature of a layer from jason where I define the feature by category. I tried Jonatas Walker method but my code is different not working http://jsfiddle.net/jonataswalker/z10de36z/ but my code is different so not working
Below is my json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Missing Person",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.45755, 51.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 1",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-1.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 3",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-2.12755, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 7",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.1287, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 9",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 50.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 8",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 51.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 18",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-4.12755, 51.907222]
}
}
]
}
Openlayer code
var styleFunction1 = function(feature) {
var styles = {
'Point': [
new ol.style.Style({
image: new ol.style.Icon({
src: feature.get('src'),
anchor: [0.5, 1]
})
})],
'LineString': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 5
})
})]
};
return styles[feature.getGeometry().getType()];
};
vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection : 'EPSG:4326',
format: new ol.format.GeoJSON(),
url: 'resources/multipoint.geojson'
}),
style: styleFunction1
});
map = new ol.Map({
target: target,
layers: [bingMapsRoad,myPetrolPlan,vector],
view: new ol.View({
center: ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857'),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
zoom: 6
}),
controls: ol.control.defaults({ attribution: false }),
loadTilesWhileInteracting: true
});
To Hide I am trying something like
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
console.log('a');
}
}
});
}

Answer 1

You can remove from the VectorSource using removeFeature method

Answer 2

you can make another layer ( a temporary one ) where you copy the features from the desired category and display it while setting the visibility of your main layer to false:
var tmp=new ol.layer.vector({ source : new ol.source.Vector()});
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
tmp.getSource().getFeatures().push(feature);
}
}
});
tmp.setStyle(vector.getStyle()); // set the same style to the tmp layer
map.addLayer(tmp);// add it to the map
vector.setVisible(false); // set the vector layer visibility to false
}