Openlayers 5 在同一个 map 上为不同层显示不同的 Popup 信息

Question

im using OpenLayers 5 to display two different layers on the same map. I can see both Markers on the Map with different icons. The code below writes in the popup of one layer. Now my question is: how can i display different Infos on the Popup for each specific layer. For example when the mouse is over the first icon the popup should contain the name of the first layer and when it is over the second different icon it shows the name of the second layer.

I assume i should use map.getFeaturesAtPixel(event.pixel, function (layer1)) or something like this but im facing problems right there

//display the pop with on mouse over event
map.on('pointermove', function (event) {

    const features = map.getFeaturesAtPixel(event.pixel);
    
    if (features.length > 0 ) {  
        var coordinate = event.coordinate;
        
        //get the infos that are going to be displayed in the Pop-up window;
        const layerOneName = features[0].get('vehName');

        // text written inside the popup
        content.innerHTML = '<b>'+layerOneName +'</b>';
        overlay.setPosition(coordinate);
    }
});

Answer 1

If you use forEachFeatureAtPixel use can add a layer filter function and use that to set the layer

map.on('pointermove', function (event) {

    let layer;
    const feature = map.forEachFeatureAtPixel(
      event.pixel,
      function (feature) {
        return feature;
      },
      { 
        layerFilter: function (candidate) {
          layer = candidate;
          return true;
        }
      }
    );
    
    if (feature) {  
        var coordinate = event.coordinate;
        
        //get the infos that are going to be displayed in the Pop-up window;
        const layerOneName = feature.get('vehName');

        // text written inside the popup
        content.innerHTML = '<b>'+layerOneName +'</b>';
        overlay.setPosition(coordinate);
    }

});