如何检测点击了哪一层？

Question

基于此示例https://openstreetmap.be/en/projects/howto/openlayers.html我创建了一个显示层的脚本，单击它时应该会显示一个包含额外信息的弹出窗口

下面显示的代码是我到目前为止写的，但我无法找出

的正确语法

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

        if (map.hasFeatureAtPixel(event.pixel) === true) {
            var coordinate = event.coordinate;
            content3.innerHTML = '<b>Location</b>';
            overlay3.setPosition(coordinate);
        } else {
            overlay3.setPosition(undefined);
            closer3.blur();
        }
    });

这是完整代码运行版本在这里 https://www.corobori.com/sos/TestMap3.html

     var attribution = new ol.control.Attribution({
        collapsible: false
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([-70.9751095, -37.9800523]),
            rotation: 55,
            zoom: 6
        })


    });

    var pos = ol.proj.fromLonLat([-70.9751095, -37.9800523]);


    var layer1 = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4155802, -36.9046117])) })] }) });
    map.addLayer(layer1);
    var container1 = document.getElementById('popup1');
    var content1 = document.getElementById('popup-content1');
    var closer1 = document.getElementById('popup-closer1');
    var overlay1 = new ol.Overlay({
        element: container1,
        autoPan: false,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(overlay1);
    closer1.onclick = function () {
        overlay1.setPosition(undefined);
        closer1.blur();
        return false;
    };

    var layer2 = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.3814155, -37.3878045])) })] }) });
    map.addLayer(layer2);
    var container2 = document.getElementById('popup2');
    var content2 = document.getElementById('popup-content2');
    var closer2 = document.getElementById('popup-closer2');
    var overlay2 = new ol.Overlay({
        element: container2,
        autoPan: false,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(overlay2);
    closer2.onclick = function () {
        overlay2.setPosition(undefined);
        closer2.blur();
        return false;
    };

    var layer3 = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4070142, -41.1497232])) })] }) });
    map.addLayer(layer3);
    var container3 = document.getElementById('popup3');
    var content3 = document.getElementById('popup-content3');
    var closer3 = document.getElementById('popup-closer3');
    var overlay3 = new ol.Overlay({
        element: container3,
        autoPan: false,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(overlay3);
    closer3.onclick = function () {
        overlay3.setPosition(undefined);
        closer3.blur();
        return false;
    };


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

        if (map.hasFeatureAtPixel(event.pixel) === true) {
            var coordinate = event.coordinate;
            content3.innerHTML = '<b>Location</b>';
            overlay3.setPosition(coordinate);
        } else {
            overlay3.setPosition(undefined);
            closer3.blur();
        }
    });

我需要更改 map.on('singleclick', function (event) { 所以当点击 layer1 时它会显示相应的内容

   When clicking the 1st
   if (map.hasFeatureAtPixel(event.pixel) === true) {
        var coordinate = event.coordinate;
        content1.innerHTML = '<b>Location</b>';
        overlay1.setPosition(coordinate);
    } 
   When clicking the 2nd
   if (map.hasFeatureAtPixel(event.pixel) === true) {
        var coordinate = event.coordinate;
        content2.innerHTML = '<b>Location</b>';
        overlay2.setPosition(coordinate);
    } 
   When clicking the 3rd
   if (map.hasFeatureAtPixel(event.pixel) === true) {
        var coordinate = event.coordinate;
        content3.innerHTML = '<b>Location</b>';
        overlay3.setPosition(coordinate);
    }

以此类推

Answer 1

您可以使用 forEachFeatureAtPixel 查找特征及其图层

map.on('singleclick', function (event) {
    var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
        var coordinate = event.coordinate;
        if (layer === layer1) {
            content1.innerHTML = '<b>Location</b>';
            overlay1.setPosition(coordinate);
        } else if (layer === layer2) {
            content2.innerHTML = '<b>Location</b>';
            overlay2.setPosition(coordinate);
        } else if (layer === layer3) {
            content3.innerHTML = '<b>Location</b>';
            overlay3.setPosition(coordinate);
        }
        return feature;
    });
    if (!feature) {
        overlay3.setPosition(undefined);
        closer3.blur();
    }
});

如何检测点击了哪一层？

How to detect which layer was clicked?

openlayers

openlayers-5