Openlayers 3 显示和隐藏图层的功能openlayers 3

我试图对jason隐藏图层的特征，在jason中我按类别定义了特征。我尝试了Jonatas Walker方法，但我的代码不同，无法工作，但我的代码不同，因此无法工作

下面是我的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]
      }
    }    
  ]
}

开放层代码

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

为了隐藏，我正在尝试类似的东西

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

---

您可以使用removeFeature方法从中删除

您可以创建另一个图层（临时图层），在该图层中，您可以从所需类别复制要素，并在将主图层的可见性设置为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
}

---

在您的答案中添加了我的代码。。现在它从xyz变量中为我提供Cat1值，如何仅删除xyz（获取'Cat1'）。我不知道您想用它做什么，我认为编辑应该放在问题中，而不是答案中