Openlayers 从多个层获取信息

我想在div中显示每个层的信息，而不是弹出窗口，每个层都有一个基于其字段的响应。首先，我做这件事没有问题。我正在使用map.on方法，就好像我要在弹出窗口中显示信息一样。我怎么能这样做

var ICES = new ol.layer.Image({
    title:'ICES Areas',
    baseLayer:false,
    source: new ol.source.ImageWMS({
        url: 'https://server.com/ows',
        params: {'LAYERS': 'ICES'},
        //serverType: 'geoserver',
    }),
    visible:true,
    active:false,
    opacity: 0.4,
    displayInLayerSwitcher:false
});
//Observations
var vectorObservations = new ol.source.Vector({
    url: 'data/observations.json',
    projection: 'EPSG:4326',
    format: new ol.format.GeoJSON(),
});
var observations = new ol.layer.Vector({    
    name: 'Fish',
    //preview: "images/fish.jpg",
    source: vectorObservations,
    visible:false,
    displayInLayerSwitcher: false,
    style: observa,
});
var vectorDistribution = new ol.source.Vector({
    url: 'data/distribution.json',
    projection: 'EPSG:4326',
    format: new ol.format.GeoJSON(),
});
var distribution = new ol.layer.Vector({    
    name: 'Distribution',
    source: vectorDistribution,
    visible:false,
    displayInLayerSwitcher: false,
    style: distICES,
    maxZoom:9,
    //minResolution: 200,
    //maxResolution: 2000,
});
map.on('singleclick', function (evt) {
    //var coordinate = evt.coordinate;
    //var hdms = toStringHDMS(toLonLat(coordinate));
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
    if (feature) {
        var field1 = document.getElementById('autorOb');
        field1.innerHTML = feature.get('autor');
        var field2 = document.getElementById('dateOb');
        field2.innerHTML = feature.get('obs_date');
        var field3 = document.getElementById('ImgOb');
        field3.innerHTML = '<img src="'+feature.get('imagen')+'"/>';
        var field4 = document.getElementById('PezOb');
        field4.innerHTML = feature.get('scientific_name');
        var field5 = document.getElementById('LocaOb');
        field5.innerHTML = feature.get('location');
    }
      //overlay.setPosition(coordinate);
});

var ICES=new ol.layer.Image({
标题：“ICES区域”，
基层：假，
来源：新ol.source.ImageWMS({
网址：'https://server.com/ows',
参数：{'LAYERS'：'ICES'}，
//服务器类型：“地理服务器”，
}),
可见：对，
活动：错误，
不透明度：0.4，
displayInLayerSwitcher:错误
});
//观察
var vectorObservations=新ol.source.Vector({
url:'data/observations.json'，
投影：‘EPSG:4326’，
格式：新建ol.format.GeoJSON（），
});
var观测值=新的ol.layer.Vector（{
名字：‘鱼’，
//预览：“images/fish.jpg”，
资料来源：矢量观测，
可见：假，
displayInLayerSwitcher:错误，
风格：observa，
});
var vectorDistribution=新ol.source.Vector({
url:'data/distribution.json'，
投影：‘EPSG:4326’，
格式：新建ol.format.GeoJSON（），
});
变量分布=新的ol.layer.Vector（{
名称：'分发'，
资料来源：矢量分布，
可见：假，
displayInLayerSwitcher:错误，
风格：distICES，
最大缩放：9，
//决议：200，
//决议草案：2000年，
});
map.on（'singleclick'，函数（evt）{
//var坐标=evt坐标；
//var hdms=toStringHDMS（toLonLat（坐标））；
var feature=map.forEachFeatureAtPixel（evt.pixel，
功能（特征、图层）{
返回特性；
});
如果（功能）{
var field1=document.getElementById（'autorOb'）；
field1.innerHTML=feature.get（'autor'）；
var field2=document.getElementById（'dateOb'）；
field2.innerHTML=feature.get（'obs_date'）；
var field3=document.getElementById（'ImgOb'）；
field3.innerHTML=''；
var field4=document.getElementById（'PezOb'）；
field4.innerHTML=feature.get（'scientific_name'）；
var field5=document.getElementById（'LocaOb'）；
field5.innerHTML=feature.get（'location'）；
}
//叠加。设置位置（坐标）；
});

您不应该只返回找到的第一个功能，而应该遍历所有功能并建立输出

map.on('singleclick', function (evt) {
    var features = map.getFeaturesAtPixel(evt.pixel);
    if (feature.length > 0) {
      var field1 = document.getElementById('autorOb');
      field1.innerHTML = '';
      var field2 = document.getElementById('dateOb');
      field2.innerHTML = '';
      var field3 = document.getElementById('ImgOb');
      field3.innerHTML = '';
      var field4 = document.getElementById('PezOb');
      field4.innerHTML = '';
      var field5 = document.getElementById('LocaOb');
      field5.innerHTML = '';
      features.forEach(function(feature){
        field1.innerHTML += feature.get('autor');
        field2.innerHTML += feature.get('obs_date');
        field3.innerHTML += '<img src="'+feature.get('imagen')+'"/>';
        field4.innerHTML += feature.get('scientific_name');
        field5.innerHTML += feature.get('location');
      });
    }
});

map.on（'singleclick'，函数（evt）{
var features=map.getFeaturesAtPixel（evt.pixel）；
如果（feature.length>0）{
var field1=document.getElementById（'autorOb'）；
field1.innerHTML=''；
var field2=document.getElementById（'dateOb'）；
field2.innerHTML=''；
var field3=document.getElementById（'ImgOb'）；
field3.innerHTML=''；
var field4=document.getElementById（'PezOb'）；
field4.innerHTML=''；
var field5=document.getElementById（'LocaOb'）；
field5.innerHTML=''；
features.forEach（函数（feature）{
field1.innerHTML+=feature.get（'autor'）；
field2.innerHTML+=feature.get（'obs_date'）；
field3.innerHTML+=''；
field4.innerHTML+=feature.get（'scientific_name'）；
field5.innerHTML+=feature.get（'location'）；
});
}
});

通过将结果添加到HTML表中的新行，可以获得更整洁的输出