1

Is there a way to request information through the map.on method about different veclayers? If I have two JSON veclayers, for example veclayer1 and veclayer2, could I format the information obtained from veclayer1 and another from veclayer2? Something in the way:

map.on('click', function (evt) {
var feature = map.getFeaturesAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
    });

if (layer === veclayer1) {
...
} else if (layer === veclayer2) {
...
}
}

I tried Mike's answer (the first and the second):

var map= new ol.Map({
    target: 'map',
    view:view,
    layers: [osm, vectorLayer, catchs],
    controls: ol.control.defaults({
      zoom: false,
      attribution: false,
      rotate: false,
    }),
});
map.on('click', function (evt) {
    $('#infos').show();
    document.getElementById("contINFO").innerHTML = '<h3>click on layer</h3>';

    /*var feature = map.getFeaturesAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
    });*/
    
    var layer;
    var feature = map.getFeaturesAtPixel(evt.pixel,
      function(feature, featureLayer) {
        layer = featureLayer;
        return feature;
    });
    
    if(layer === catchs){
        let html = "", cod= "", art= "", date= ""; 
        for (i=0; i<feature.length; i++){('')
            if(feature[i].get('cod') != cod){
                art= ""; date= ""; 
                cod= feature[i].get('cod');
                html+="<div class='txt><i class='fas fa-water'></i> " + cod + "</div>";
            }
            if(feature[i].get('art') != art){
                date= "";
                art = feature[i].get('art');
                html+="<div class='txtart'><i class='fas fa-ship'></i> Art&nbsp;" + art + "</div>";
            }
            if(feature[i].get('date') != date){
                
                date = feature[i].get('date');
                html+="<div class='txtdate'><i class='far fa-calendar-alt'></i>&nbsp;" + date + "</div>";
            }
                    
            html+="<div class='tabtxt'><div class='txtrow'><div class='txtcell'><div class='textcod'>" + feature[i].get('cod2') + "</div></div><div class='txtcell'><div class='textcod'>" + feature[i].get('kg') + "&nbsp;kg&nbsp;-</div></div><div class='txtcell'><div class='textcod'>&nbsp;" + feature[i].get('operation') + "</div></div></div></div>";
            
            document.getElementById("contINFO").innerHTML = html;
        }
    }else if(layer === vectorLayer){
            var records = document.getElementById('contINFO');
            records.innerHTML = '';
            var html = '';
            for (i=0; i<features.length; i++){
                $('#infos').show();
                if(features[i].get('name') != null){
                    records.innerHTML += '<div id="aphia" class="aphia">' + features[i].get('name') + '</div>'
                }else{
                    records.innerHTML += '';
                }
            }
        }
    });

But in both it only brings me back:

Click on layer
2
  • 1
    Look at the corrected answer. It should be forEachFeatureAtPixel method, not getFeaturesAtPixel.
    – TomazicM
    Sep 16, 2021 at 17:39
  • oh, that's right !, an error when writing the code. I corrected it with map.forEachFeatureAtPixel, but I`m getting no response. actually if I put an alert in each condition I get the alert, but not the response with the html structure.
    – user68481
    Sep 20, 2021 at 9:55

1 Answer 1

2

You would need to use a variable which has scope outside the callback, or return the layer as well as the feature from the callback, for example

var layer;
var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, featureLayer) {
        layer = featureLayer;
        return feature;
    });
if (layer === veclayer1) {
...
} else if (layer === veclayer2) {
...
}

or

var result = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return {feature, layer};
    });
var feature = result.feature;
var layer = result.layer;
if (layer === veclayer1) {
...
} else if (layer === veclayer2) {
...
}
8
  • 1
    I saw the callback and assumed it was forEachFeatureAtPixel. There is no callback with getFeaturesAtPixel, if one is specified it will be ignored. The only way to access the layer is using forEachFeatureAtPixel.
    – Mike
    Sep 16, 2021 at 17:40
  • Ok thanks Mike, I'll try to find a solution
    – user68481
    Sep 17, 2021 at 8:03
  • 1
    Working example codesandbox.io/s/vector-layers-vlx3p
    – Mike
    Sep 20, 2021 at 14:07
  • 1
    To display all the properties of a feature you could use JSON.stringify(Object.entries(feature.getProperties()).filter(function (entry) {return entry[0] !== "geometry";}))
    – Mike
    Sep 20, 2021 at 18:23
  • 1
    I have updated codesandbox.io/s/vector-layers-vlx3p
    – Mike
    Sep 21, 2021 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.