如何 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;
        */

您可以讓您的疊加層以“摘要”方式顯示結果列表，然后單擊其中一個功能名稱（例如）可以在疊加層中顯示其完整詳細信息。

高溫高壓