Question

我试图隐藏jason的一个图层的特征，我按类别定义了该特征。我尝试了 Jonatas Walker 方法，但我的代码不同，没有工作http://jsfiddle.net/jonataswalker/z10de36z/，但我的代码不同，所以无法正常工作

以下是我的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
              });

隐藏我正在尝试像

这样的东西

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

您可以使用 removeFeature 方法

从VectorSource中删除

Answer 2

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

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

2 个答案: