Javascript Openlayers：如何根据功能选择应使用哪种风格的popover？

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

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

我所在的位置：为了实现这一点，我创建了两个不同的ol.layer.Vector，每个包含几个ol.Feature。 然后，我创建了两个对应于两种不同类型建筑的ol.Overlay，以及一个ol.interaction.Select。 标记在地图上正确显示

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

守则：

var elementFiche=document.getElementById（'popup_fiche'）；
var elementMap=document.getElementById（'popup_-map'）；
//第一类建筑的覆盖层
var overlay=新ol.overlay({
元素：elementFiche，
定位：'底部中心'，
stopEvent:false，
偏移量：[0，-50]
});
map.addOverlay（覆盖）；
//第二类建筑的覆盖层
var overlayMap=新ol.Overlay({
元素：elementMap，
定位：'底部中心'，
stopEvent:false，
偏移量：[-2，-10]
});
map.addOverlay（overlayMap）；
var selectInteraction=新建ol.interaction.Select({
图层：[矢量图层，矢量图层映射]，
});
map.addInteraction（选择交互）；
在（'add'，函数（e）上选择interaction.getFeatures（）
{
//重新定位覆盖层
var特征=e.element；
var point=feature.getGeometry（）；
var coords=point.getCoordinates（）；
//这是我应该选择覆盖的地方
//以下是第一个覆盖的示例。
覆盖设置位置（坐标）；
//为覆盖重新创建popover
var element=overlay.getElement（）；
$（元素）.popover（'destroy'）；
$（元素）.popover({
位置：'顶部'，
动画：错，
模板：“
”，
是的，
内容：''+feature.get（'name'）+'地址：'+feature.get（'adrese'）+'
'+Surface:'+feature.get（'Surface'）+'
'+anne de construction:'+feature.get（'dateConstruction'））
});
$（元素）.popover（'show'）；
});
在（'remove'，函数（e）上选择interaction.getFeatures（）{
//销毁爆米花
$（overlay.getElement（））.popover（'destroy'）；
});  

我没有包括代码的其余部分，因为我认为没有必要理解我的问题，但是如果需要，请询问！ 任何帮助都将不胜感激

谢谢

我找到了一个解决方法：） 我只是在每个功能中添加了一个“属性”（我称之为类型），以区分它们：

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');
  }

}
});

selectInteraction.getFeatures（）.on（'add'，函数（e）
{
//重新定位覆盖层
var特征=e.element；
var point=feature.getGeometry（）；
var coords=point.getCoordinates（）；
var type=feature.get（'type'）；
如果（类型==“ficheSite”）
{
覆盖层设置位置（坐标）；
//为覆盖重新创建popover
var element=overlayFiche.getElement（）；
$（元素）.popover（'destroy'）；
$（元素）.popover({
位置：'顶部'，
动画：错，
模板：“
”，
是的，
内容：''+feature.get（'name'）+'地址：'+feature.get（'adrese'）+'
'+Surface:'+feature.get（'Surface'）+'
'+anne de construction:'+feature.get（'dateConstruction'））
});
$（元素）.popover（'show'）；
}
其他的
{
var size=feature.get（'features'）.length；
如果（大小==1）
{
var feature=feature.get（'features'）[0]；
覆盖贴图设置位置（坐标）；
//为覆盖重新创建popover
var element=overlayMap.getElement（）；
$（元素）.popover（'destroy'）；
$（元素）.popover({
位置：'顶部'，
动画：错，
模板：“
”，
是的，
“内容”：“仪器测量”
“+”Libelle:“+功能。获取（'Libelle'））
});
$（元素）.popover（'show'）；
}
}
});

  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');
  }

}
});