![](/img/trans.png)
[英]How to select which feature overlay in case of overlapping or same geometry in OpenLayers
[英]Openlayers: How to select which style of popover should be used depending on the feature?
我對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');
});
我沒有包含其余的代碼,因為我認為沒有必要理解我的問題,但是如果需要,請提出要求! 任何幫助將不勝感激。
謝謝!
我找到了一種解決方法:)我只是向每個功能添加了一個“屬性”(我稱之為類型)以區別它們:
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');
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.