如何 select 在 OpenLayers 中重叠或相同几何图形的情况下具有覆盖功能

Question

我创建了一个 map，其中单击功能打开了一个覆盖。 但是，如果多个要素重叠，或者更糟糕的是，当要素具有相同的几何形状时，我会遇到问题。

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

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 我想打开什么叠加层。

Answer 1

您可以使用map.forEachFeatureAtPixel方法收集所有被点击的特征，然后使用Array of features ，而不是更新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;
        */

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

高温高压