OpenLayers - фильтр изображений для разных слоев

Question

на основе этого урока: https://openlayers.org/en/latest/examples/image-filter.html Я хочу применить фильтр к моим различным слоям.Для достижения этой цели у меня есть массив группы.var groupsMap = []; Мои группы:

• OSM
• Here WeGo Map
• Stamen Map
• Bing Map

Например, для карты Bing у меня есть:

function bingMaps() {
  var layers = [];
  var i;
  for (i = 0; i < bingStyles.length; ++i) {
    layers.push(new ol.layer.Tile({
      visible: false,
      preload: Infinity,
      source: new ol.source.BingMaps({
        key: KEY_BING, //'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
        imagerySet: bingStyles[i]
        // use maxZoom 19 to see stretched tiles instead of the BingMaps
        // "no photos at this zoom level" tiles
        // maxZoom: 19
      })
    }));
  }

  var bingLayers = new ol.layer.Group({
    title: "Bing",
    layers: layers
  });

  // return bingLayers;
  groupsMap.push(bingLayers);
}

Каждый слой доступен на боковой панели следующим образом:

for (var i = 0; i < layers.length; ++i) {
      if (groupSelected.values_.title === "Bing") {
        layers[i].setVisible(bingStyles[i] === layerSelected);
      }
...
}

В конце я установил свои фильтры:

var selectedKernel = normalize(kernels["sharpen"]);
$('.selected-filter').on("click",function () {
    var filterSelected = $(this).attr("value");
    console.log(filterSelected);
    selectedKernel = normalize(kernels[filterSelected]);
    map.render();
 });

Для настройки фильтров для ВСЕХ моих слоев единственное решение, которое, кажется, работает, это:

var layers = groupsMap[0].values_.layers.array_;
  // var layers = groupsMap.getLayers().array_;
  for (var i = 0; i < layers.length; i++) {
    layers[i].on('postcompose', function (event) {
      convolve(event.context, selectedKernel);
    });
  }

  var layers = groupsMap[1].values_.layers.array_;
  // var layers = groupsMap.getLayers().array_;
  for (var i = 0; i < layers.length; i++) {
    layers[i].on('postcompose', function (event) {
      convolve(event.context, selectedKernel);
    });
  }

  var layers = groupsMap[2].values_.layers.array_;
  // var layers = groupsMap.getLayers().array_;
  for (var i = 0; i < layers.length; i++) {
    layers[i].on('postcompose', function (event) {
      convolve(event.context, selectedKernel);
    });
  }

  var layers = groupsMap[3].values_.layers.array_;
  // var layers = groupsMap.getLayers().array_;
  for (var i = 0; i < layers.length; i++) {
    layers[i].on('postcompose', function (event) {
      convolve(event.context, selectedKernel);
    });
  }

Фактически, если я пытаюсь использовать цикл:

for(var i = 0; i < groupsMap.length; i++){ 
    var layers = groupsMap[i].values_.layers.array_;
    // var layers = groupsMap.getLayers().array_;
    for (var i = 0; i < layers.length; i++) {
        layers[i].on('postcompose', function (event) {
          convolve(event.context, selectedKernel);
        });
    }
  }

или:

for(var i = 0; i < groupsMap.length; i++){ 
    var layers = groupsMap[i].values_.layers.array_;
    applyFilter(map.getLayers().array_,selectedKernel);
  }

не работает .в частности не работает map.render(), метод, определенный до.Зачем ?Может кто-нибудь помочь мне понять, почему это не работает?Мое первое решение работает, но оно действительно плохое ..