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

如何检测单击了哪一层？

1 个答案: