Openlayers：如何根据功能选择使用哪种样式的popover？

Question

我是OpenLayers的新手，所以请原谅我，如果这个问题看起来很基本。

我想要的：一张地图，显示许多代表建筑物的标记。根据建筑物的类型可以有两种不同的标记。 用户可以点击它们。单击时，标记顶部会出现弹出窗口，并在该建筑物上显示信息。诀窍是弹出窗口的样式和显示的信息取决于标记的类型。

我在哪里：为了达到这个目的，我创建了两个不同的ol.layer.Vector，它们分别包含几个ol.Feature。 然后我创建了两个对应于两种不同类型建筑物的ol.Overlay，以及一个ol.interaction.Select。 标记在地图上正确显示。

我面临的问题：我不知道如何根据点击的功能选择使用哪种弹出式样式。我试图创建两个ol.interaction.Select而不是一个，但只有最后一个被实际使用。

代码：

var elementFiche = document.getElementById('popup_fiche'); 
var elementMap = document.getElementById('popup_map'); 

//Overlay for the first kind of building 
var overlay = new ol.Overlay({ 
    element: elementFiche, 
    positioning: 'bottom-center', 
    stopEvent: false, 
    offset: [0, -50] 
}); 
map.addOverlay(overlay); 

//Overlay for the second kind of building 
var overlayMap = new ol.Overlay({ 
    element: elementMap, 
    positioning: 'bottom-center', 
    stopEvent: false, 
    offset: [-2, -10] 
}); 
map.addOverlay(overlayMap); 

var selectInteraction = new ol.interaction.Select({ 
    layers: [vectorLayer,vectorLayerMap], 
}); 
map.addInteraction(selectInteraction); 

selectInteraction.getFeatures().on('add',function(e) 
{ 
//re-position the overlay 
    var feature = e.element; 
    var point = feature.getGeometry(); 
    var coords = point.getCoordinates(); 

    //THIS IS WHERE I SHOULD SELECT THE OVERLAY 
    //The following is an example for the first overlay. 
    overlay.setPosition(coords); 

    //recreate the popover for the overlay 
    var element = overlay.getElement(); 
    $(element).popover('destroy'); 
    $(element).popover({ 
     placement: 'top', 
     animation: false, 
     template: '<div class="popover" style="height: 150px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>', 
     html: true, 
     content: '<h4> <strong>'+feature.get('name')+'</strong><br> </h4>'+'<strong> Adresse : </strong>'+feature.get('adresse') + '<br>' +'<strong> Surface : </strong>'+feature.get('surface')+ '<br>' + '<strong> Année de construction : </strong>'+feature.get('dateConstruction') 
    }); 
    $(element).popover('show'); 
    }); 

selectInteraction.getFeatures().on('remove', function(e){ 
    //destroy the popover 
    $(overlay.getElement()).popover('destroy'); 
}); 

我不包括代码的休息，因为我不认为这是必要了解我的问题，但请向它，如果你需要它！ 任何帮助将不胜感激。

谢谢！

Answer 1

我找到了一个解决办法:) 我只是增加了一个“财产”（即我叫类型），每个特征进行区分：

var iconFeature = new ol.Feature({ 
     geometry: new 
     ol.geom.Point(ol.proj.transform({{map.adresseGps}}, 'EPSG:4326', 'EPSG:3857')), 
     libelle: "{{map.libelle}}", 
     type: "mapping", 
}); 

我当时只是有比较特色的类型：

selectInteraction.getFeatures().on('add',function(e) 
{ 
//re-position the overlay 
var feature = e.element; 
var point = feature.getGeometry(); 
var coords = point.getCoordinates(); 

var type = feature.get('type'); 

if(type == "ficheSite") 
{ 
    overlayFiche.setPosition(coords); 

    //recreate the popover for the overlay 
    var element = overlayFiche.getElement(); 
    $(element).popover('destroy'); 
    $(element).popover({ 
    placement: 'top', 
    animation: false, 
    template: '<div class="popover" style="height: 150px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>', 
    html: true, 
    content: '<h4> <strong>'+feature.get('name')+'</strong><br> </h4>'+'<strong> Adresse : </strong>'+feature.get('adresse') + '<br>' +'<strong> Surface : </strong>'+feature.get('surface')+ '<br>' + '<strong> Année de construction : </strong>'+feature.get('dateConstruction') 
    }); 

    $(element).popover('show'); 

} 

else 
{ 
    var size = feature.get('features').length; 
    if(size == 1) 
    { 
    var feature = feature.get('features')[0]; 
    overlayMap.setPosition(coords); 

     //recreate the popover for the overlay 
    var element = overlayMap.getElement(); 
    $(element).popover('destroy'); 
    $(element).popover({ 
     placement: 'top', 
     animation: false, 
     template: '<div class="popover" style="height: 100px; width: 500px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><a href="#" id="popup-closer" class="ol-popup-closer"></a><div class="popover-content"><p></p></div></div></div>', 
     html: true, 
     'content': '<h4> <strong> Instrument de Mesure </strong><br> </h4>'+'<strong> Libelle : </strong>'+feature.get('libelle') 
    }); 
    $(element).popover('show'); 
    } 

} 
});