如何解决如何使用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 举报,一经查实,本站将立刻删除。