如何 select 在 OpenLayers 中重叠或相同几何图形的情况下哪个要素重叠

How to select which feature overlay in case of overlapping or same geometry in OpenLayers

我创建了一个地图,在其中单击要素会打开叠加层。但是如果多个特征重叠,或者更糟的是,当特征具有相同的几何形状时,我会遇到问题。

我使用此代码来显示叠加层。但是,当两个要素具有相同的几何形状时,只会显示一个叠加层。

const overlayContainerElement = document.querySelector('.overlay-container');

    const overlayLayer = new ol.Overlay ({
        element: overlayContainerElement
    });
    map.addOverlay(overlayLayer);
    const overlayFeatureName = document.getElementById('feature-name');
    const overlayFeatureAdditionalinfo = document.getElementById('feature-additionalinfo');


    map.on('click', function(e){
        overlayLayer.setPosition(undefined);
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
            let clickedCoordinate = e.coordinate;
            let clickedFeatureName = feature.get('Number')
            let clickedFeatureInfo = feature.get('Text');
            overlayLayer.setPosition(clickedCoordinate);
            overlayFeatureName.innerHTML = clickedFeatureName;
            overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
        },
        {
            layerFilter: function(layerCandidate){
                if (layerCandidate.get('title') === "Title") {
                    return 1;
                }
            }
        })
    });

知道如何配置方法以便 select 我想查看哪个功能详细信息吗?因此,单击后,如果鼠标下有两个功能,则会显示一个列表 select 我想打开的叠加层。

您可以使用 map.forEachFeatureAtPixel 方法收集所有被点击的特征,然后使用 特征数组,而不是在 map.forEachFeatureAtPixel 方法中更新叠加层.

像这样的东西(未测试/未完成):

        var features = [];
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer){
          features.push(feature);
        },
        {
            layerFilter: function(layerCandidate){
                if (layerCandidate.get('title') === "Title") {
                    return 1;
                }
            }
        });

        // And then, you could iterate on your features and show information as a list in your overlay.

        // todo - loop here
        /*
            let clickedCoordinate = e.coordinate;
            let clickedFeatureName = feature.get('Number')
            let clickedFeatureInfo = feature.get('Text');
            overlayLayer.setPosition(clickedCoordinate);
            overlayFeatureName.innerHTML = clickedFeatureName;
            overlayFeatureAdditionalinfo.innerHTML = clickedFeatureInfo;
        */

您可以让叠加层以“摘要”方式显示结果列表,然后单击其中一个功能名称(例如)可以在叠加层中显示其完整详细信息。

HTH