Openlayers3 通过选择特定特征来显示图层

Question

我有一张地图，可以选择要显示的一些图层。图层包含在变量“图层”中，如下所示

    var layers = [

        new ol.layer.Tile({
            source: new ol.source.OSM(),
            name: 'OpenStreetMap',
            visible: true,

        }),

        new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON({
                        defaultDataProjection: 'EPSG:4326'
                    }),
                    url: 'repository/prova5.geojson',
                    attributions: [
                        new ol.Attribution({
                            html: 'Prova 5'
                        })
                    ]
                }),
                name: 'Prova 5',
                visible: false,

            }),

    new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON({
                        defaultDataProjection: 'EPSG:4326'
                    }),
                    url: 'repository/prova7.geojson',
                    attributions: [
                        new ol.Attribution({
                            html: 'Prova 7'
                        })
                    ]
                }),
                name: 'Prova 7',
                visible: false,
            })
];

通过单击旁边菜单上的复选框，我可以显示每个独特的层，将可见性从 false 设置为 true。所以到目前为止一切正常。

这就是问题所在。 我还需要在菜单中选择一个选项，让我可以根据 geojson 文件中存在的单个功能显示图层。假设这个特性是“物种”（它包含在我的 geojson 文件中）。

我尝试用简单的 HTML 编写选择作为试验，并通过 jQuery 获得与我想要的物种相对应的选择值。这个事件应该触发函数 forEachFeature 来获取geojson文件中的特征（它不是像获取数组一样工作吗？）；一旦获取了我想要的功能，将其与我选择的值进行比较。然后它应该获取包含所选物种的所有图层源，并将它们放在一个可见的临时图层中。

代码如下，但不起作用：

$(document).ready(function(){
        var selectedSpecies = '';
        $("select.species").change(function(){

        var selectedSpecies = $(".species option:selected").val();
        console.log(selectedSpecies);
    });

    if (selectedSpecies) {
        layers.getSource().forEachFeature(function(feature){
            var geojsonAnimal = feature.get("Species");
            console.log('Species ' + geojsonAnimal); //serve per il debug

            if(geojsonAnimal == selectedSpecies){
                console.log('Trovato animale'); 
                tmpLayer.getSource().addFeature(feature);
            } else {
                console.log('Non trovato!'); 
            }
        });

    }
    // Create a blank tmp layer
    var tmpLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    map.addLayer(tmpLayer);


    if(tmpLayer.getSource().length > 0){
         tmpLayer.setVisible(true);
    }

});

实际上我可以在控制台中看到所选变量，但例如，即使使用命令也看不到任何内容

console.log('Species ' + geojsonAnimal);

这个事实让我觉得即使我应用 forEachfeature() 命令的方式也是错误的。

有人可以帮我吗？ 完整源码可下载here

Answer 1

我认为您的代码中有多个错误：

• 首先，在选择更改事件时，您不会完成所有功能，因此您永远不会遇到这种结果是正常的

console.log('Species ' + geojsonAnimal);

• 第二，你不能做layers.getSource()层是一个数组，而不是一个 ol.layer.Layer

解决这两个问题，你的代码应该是这样的：

$(document).ready(function() {

  $("select.species").change(function() {

    var selectedSpecies = $(".species option:selected").val();
    console.log(selectedSpecies);

    if (selectedSpecies) {

      layers.forEach(function(layer) {

        if (!(layer instanceof ol.layer.Vector)) {
          return
        }        

        layer.getSource().forEachFeature(function(feature){
          var geojsonAnimal = feature.get("Species");
          console.log('Species ' + geojsonAnimal); //serve per il debug

          if(geojsonAnimal == selectedSpecies){
            console.log('Trovato animale'); 
            tmpLayer.getSource().addFeature(feature);
          } else {
            console.log('Non trovato!'); 
          }
        });
      });
    }
  });

  // Create a blank tmp layer
  var tmpLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
  });
  map.addLayer(tmpLayer);

  if(tmpLayer.getSource().length > 0){
    tmpLayer.setVisible(true);
  }
});