レイヤーのオープンレイヤーの表示と非表示3

Question

カテゴリー別にフィーチャーを定義するレイヤーのフィーチャーをjasonから隠そうとしています。 Iを非表示にするので、以下

を働いていないことは、私の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コード

に

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

を私はJonatasウォーカー方法を試みたが、私のコードはhttp://jsfiddle.net/jonataswalker/z10de36z/を動作していない別のですが、私のコードが異なっています何かをしようとしています

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

あなたは、あなたが目的のカテゴリから機能をコピーし、別の層（一時的なもの）を作成し、falseにあなたの主層の可視性を設定しながら、それを表示することができremoveFeature方法

Answer 2

を使用してVectorSourceから削除することができます。

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 
}