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

При нажатии на флажок в меню в стороне, я могу показать каждый отличительный слой, установив видимость от ложного к истине. Таким образом, здесь все работает нормально.

В этом проблема. Мне также нужно в меню в сторону одного выбора, который дает мне возможность показывать слои в соответствии с одной единственной функцией, присутствующей в файлах 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

Фиксация эти 2 вопроса, ваш код должен быть таким:

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