从多层获取信息

Question

我想在 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);
});

Answer 1

与其只返回找到的第一个特征，不如循环遍历所有特征并构建输出。

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');
      });
    }
});

您可以通过将结果添加到 HTML table.

中的新行来获得更整洁的输出

从多层获取信息

Get information from multiple layers

openlayers

openlayers-6