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文件中的一个单一特征显示图层。假设这个特性是“Species”（它包含在我的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);
  }
});

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

1 个答案: