Question

基于本教程：https://openlayers.org/en/latest/examples/image-filter.html，我想将过滤器应用于我的不同图层。为了实现这一目标，我有一组小组。 var groupsMap = [];我的群组是：

OSM
此处WeGo地图
雄蕊地图
必应地图

例如，对于Bing Map我有：

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()不起作用，方法之前已定义。为什么呢有人可以帮助我了解为什么它不起作用吗？我的第一个解决方案可行，但确实很糟糕。

OpenLayers-不同图层的图像过滤器

0 个答案: