Openlayers 如何在开放层中显示向量的多个特征？

我正在构建一个web地图，其中包含一些从地理服务器导入的图层。我已经将它们转换为矢量JSON。我想在HTML面板中显示地图外部几何图形的所有特征

我只需要使用该方法的一个特性“obra_nro”就可以做到这一点。您可以在下面看到我正在使用的代码

但是，我仍然找不到显示其余功能的方法

提前谢谢你的建议

var selectInteraction = new ol.interaction.Select({
        hitTolerance:1  ///// Precision del puntero del mouse para seleccionar
    });
olMap.getInteractions().extend([selectInteraction]);

    var displayFeatureInfo = function(pixel) {
        var features = [];
        olMap.forEachFeatureAtPixel(pixel, function(feature, layer) {
        features.push(feature);
        });
        var container = document.getElementById('description');
        if (features.length > 0) {
        var info = [];
        for (var i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('obra_nro'));
        }
        container.innerHTML = info.join(', ') || '(unknown)';
        } else {
        container.innerHTML = '&nbsp;';
        }   
    };

    olMap.on('click' , function(evt) {
        var pixel = evt.pixel;
        displayFeatureInfo(pixel);
    });

var selectInteraction=new ol.interaction.Select({
hitTolerance:1/////Precision del puntero del mouse para selecciator
});
olMap.getInteractions（）.extend（[selectInteraction]）；
var displayFeatureInfo=函数（像素）{
var特征=[]；
olMap.forEachFeatureAtPixel（像素，功能（功能，层）{
功能。推送（功能）；
});
var container=document.getElementById（'description'）；
如果（features.length>0）{
var信息=[]；
对于（变量i=0，ii=features.length；i

您可以调用

forEachFeatureIntersectingExtent

，以查看每个矢量源上的范围，例如

var features = [];
olMap.getLayers().forEach(function(layer) {
  var source = layer.getSource();
  if (source && source.forEachFeatureIntersectingExtent) {
    source.forEachFeatureIntersectingExtent(olMap.getView().calculateExtent(), function(feature) {
      features.push(feature);
    });
  }
});

---

例如，您可以使用每个向量源上的视图范围调用forEachFeatureIntersectingExtent

var features = [];
olMap.getLayers().forEach(function(layer) {
  var source = layer.getSource();
  if (source && source.forEachFeatureIntersectingExtent) {
    source.forEachFeatureIntersectingExtent(olMap.getView().calculateExtent(), function(feature) {
      features.push(feature);
    });
  }
});

---

与一位朋友一起，我们找到了解决问题的合理办法。我们保留了原来的函数，但修改了“if”部分

var selectInteraction=new ol.interaction.Select({
hitTolerance:1/////Precision del puntero del mouse para selecciator
});
olMap.addInteraction（selectInteraction）；
olMap.on（'singleclick'，函数（e）{
var feature=olMap.forEachFeatureAtPixel（例如，pixel，函数（feature）{
返回特性；
});
var infoElement=document.getElementById（'description'）；
var html=“”；
如果（功能）{
html+=feature.get（'obra_nro'）+“
”；
html+=feature.get（'contratist'）+“
”；
html+=feature.get（'mes1'）+“
”；
html+=feature.get（'mes2'）+“
”；
html+=feature.get（'mes3'）+“
”；
html+=feature.get（'mes4'）+“
”；
}
infoElement.innerHTML=html；
});

与一位朋友一起，我们找到了这个问题的合理解决方案。我们保留了原来的函数，但修改了“if”部分

var selectInteraction=new ol.interaction.Select({
hitTolerance:1/////Precision del puntero del mouse para selecciator
});
olMap.addInteraction（selectInteraction）；
olMap.on（'singleclick'，函数（e）{
var feature=olMap.forEachFeatureAtPixel（例如，pixel，函数（feature）{
返回特性；
});
var infoElement=document.getElementById（'description'）；
var html=“”；
如果（功能）{
html+=feature.get（'obra_nro'）+“
”；
html+=feature.get（'contratist'）+“
”；
html+=feature.get（'mes1'）+“
”；
html+=feature.get（'mes2'）+“
”；
html+=feature.get（'mes3'）+“
”；
html+=feature.get（'mes4'）+“
”；
}
infoElement.innerHTML=html；
});