使用 forEachFeatureAtPixel 方法从多个层获取信息

Question

我想从几个层获取信息，我使用的是forEachFeatureAtPixel方法，但是当我得到结果时我只得到第一个结果，当在浏览器响应时，我看到它返回的JSON有更多的结果。当我使用 getFeaturesAtPixel 方法时，我通过 FOR 循环获得了所有结果。但是现在我不知道如何得到所有的结果。

map.on("click", function (evt) {
    var result = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        return { feature, layer };
    });
    if (result) {
        var feature = result.feature;
        var layer = result.layer;
        if (layer === vec01) {
            contINFO.innerHTML = '<b>One name:' + feature.get('one_name') + '<b>'
        }else if (layer === vec02) {
            contINFO.innerHTML = '<b>Other name:' + feature.get('other_name') + '</b><b>Percent: ' + feature.get('percent') + '</b>'
        }
    }
});

Answer 1

在回调中返回任何真实值将在第一个特征处停止检测。获取所有特征不返回值并从每个特征建立结果

const info1 = document.getElementById("info1");
map.on("click", function (evt) {
    var info1Count = 0;
    var contCount = 0;
    map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        var info1HTML = '';
        var contHTML = '';
        if (layer === vec01) {
            info1HTML = JSON.stringify(
                Object.entries(feature.getProperties()).filter(function (entry) {
                return entry[0] !== "geometry";
                })
            );
            contHTML = '<b>One name: ' + feature.get('one_name') + '<b>'
        }else if (layer === vec02) {
            info1HTML = JSON.stringify(
                Object.entries(feature.getProperties()).filter(function (entry) {
                    return entry[0] !== "geometry";
                })
            );
            contHTML = '<b>Other name:' + feature.get('other_name') + '</b><b>Percent: ' + feature.get('percent') + '</b>'
        }
        if (info1HTML != '') {
          if (info1Count == 0) {
            info1.innerHTML = '';
          } else {
            info1.innerHTML += '<br>';
          }
          info1.innerHTML += info1HTML;
          info1Count ++;
        }
        if (contHTML != '') {
          if (contCount == 0) {
            contINFO.innerHTML = '';
          } else {
            contINFO.innerHTML += '<br>';
          }
          contINFO.innerHTML += contHTML ;
          contCount++;
        }
    });
});