如何使用forEachFeatureAtPixel在叠加中显示2个不同图层的要素数据

问题描述

我有一个点矢量层和一个多边形矢量层。 我为每个数据源创建了一个叠加层：

    <div class="map" id="map">
        <div id="popup" class="ol-popup">
            <p class="popup-text">Amenity: </p><span class="popup-data" id="feature-amenity"></span><br>
            <p class="popup-text">Brand: </p><span class="popup-data" id="feature-brand"></span><br>
            <p class="popup-text">Name: </p><span class="popup-data" id="feature-name"></span><br>
            <p class="popup-text">Shop: </p><span class="popup-data" id="feature-shop"></span><br>
        </div>
        <div id="popup-zonas" class="ol-popup">
            <p class="popup-text">Hab: </p><span class="popup-data" id="feature-hab"></span><br>
            <p class="popup-text">Nº comercios: </p><span class="popup-data" id="feature-comercios"></span><br>
            <p class="popup-text">Ratio: </p><span class="popup-data" id="feature-ratio"></span><br>
        </div>
    </div>

单击任何图层的要素时，它始终会弹出相同的要素信息（与多边形层有关）。单击多边形要素，即可获取多边形数据。单击一个点，即可得到面的基础数据。 为什么会这样呢？为什么我在叠加层中没有得到点数据？

我为每个图层的事件单击编写了一个函数。 请注意区分layerFilter函数。 每个回调函数还具有不同的交互扩展。

应该不会显示什么信息？

map.on('click',function(e) {
    map.addOverlay(popupComercios);
    popupComercios.setPosition(undefined);
    map.forEachFeatureAtPixel(e.pixel,function(feature){
        let clickedCoord = e.coordinate;
        let clickedFeatureAmenity = feature.get('amenity');
        let clickedFeatureBrand = feature.get('brand');
        let clickedFeatureName = feature.get('name');
        let clickedFeatureShop = feature.get('shop');
        popupZonas.setPosition(clickedCoord);
        overlayFeatureAmenity.innerHTML = clickedFeatureAmenity;
        overlayFeatureBrand.innerHTML = clickedFeatureBrand;
        overlayFeatureName.innerHTML = clickedFeatureName;
        overlayFeatureShop.innerHTML = clickedFeatureShop;
        map.setView(new View({
            center: clickedCoord,zoom: 15
        }))
        map.getInteractions().extend([selectInteractionComercios]);
    },{
        layerFilter: function (layer) {
            return layer === comerciosVector;
        }
    })
})

map.on('click',function(e) {
    map.addOverlay(popupZonas);
    popupZonas.setPosition(undefined);
    map.forEachFeatureAtPixel(e.pixel,function(feature){
        let clickedCoord = e.coordinate;
        let clickedFeatureHab = feature.get('habitantes');
        let clickedFeatureComercios = feature.get('num_comercios');
        let clickedFeatureRatio = feature.get('ratio');
        popupZonas.setPosition(clickedCoord);
        overlayFeatureHab.innerHTML = clickedFeatureHab;
        overlayFeatureComercios.innerHTML = clickedFeatureComercios;
        overlayFeatureRatio.innerHTML = clickedFeatureRatio;
        map.setView(new View({
            center: clickedCoord,zoom: 15
        }))
        map.getInteractions().extend([selectInteractionZonas]);         
    },{
        layerFilter: function (layer) {
            return layer === zonasVector;
        }
    })
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）