Question

我对OpenLayers很新，所以如果这个问题看起来非常基本，请原谅我。

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

我在哪里：为了达到这个目的，我创建了两个不同的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');

//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

我发现了一个解决方法:) 我刚刚添加了一个＆＃34;属性＆＃34; （我称之为类型）每个功能以区分它们：

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

}
});

Openlayers：如何根据功能选择应该使用哪种类型的popover？

1 个答案: