如何在 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;
                }
            }
        })
    });

知道如何配置一种方式来选择我想要查看的功能细节吗？所以点击后，如果鼠标下有两个特征，会显示一个列表来选择我要打开的叠加层。

解决方法

您可以使用 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