我在OpenLayers 4(4.4.1)中有一个矢量图层。该图层具有多个LineString
几何特征。一些功能重叠。
如果单击要素重叠的点,我只希望将其中一个要素绘制为选中。其他应该仍然可供以后选择(通过单独的UI选择列表中的功能ID)。
如果我单击另一个要素ID(在单独的UI选择列表中),该要素应绘制为选中,并且先前选择的不应绘制为选中,但仍可在选择列表中使用。
这样可行,但它只是第一个(默认)选定的功能,似乎在顶部绘制。
如果我点击最南端特征处不重叠的某处,则会在顶部选中正确绘制。
要跟踪需要在视觉上选择的功能,有一个变量:
var multiselectPrimaryId = 0;
我使用以下selectInteraction代码:
selectInteraction.on('select', function (e) {
e.deselected.forEach(function (feature) {
feature.setStyle(null);
});
if (e.selected.length <= 1) {
$("#multipleHitWindow").hide();
multiselectPrimaryId = 0;
if (e.selected.length == 0) {
return;
}
}
var features = e.selected;
if (multiselectPrimaryId == 0) {
multiselectPrimaryId = features[0].getId();
}
if (features.length > 1) {
var text = "Multiple hits: ";
features.forEach(function (elem, index, array) {
text += "<a href='javascript:changeSelectedFeature("
+ elem.getId() + ")'>" + elem.getId() + "</a> ";
if (elem.getId() == multiselectPrimaryId) {
elem.setStyle(selectedStyleFunction);
}
});
$('#multipleHit').html(text);
$("#multipleHitWindow").show();
}
else {
features[0].setStyle(selectedStyleFunction);
}
});
我从动态创建的链接列表中调用此函数:
function changeSelectedFeature(id) {
multiselectPrimaryId = id;
var featuresArray = selectInteraction.getFeatures().getArray().slice(0);
var event = new ol.interaction.Select.Event()
event.deselected = featuresArray;
event.selected = featuresArray;
event.type = 'select';
event.target = selectInteraction;
event.mapBrowserEvent = map.mapBrowserEventHandler_;
selectInteraction.dispatchEvent(event);
}
如何将selectedStyle设置为在顶部绘制?我试图将zIndex添加到selectedStyle。但它似乎没有任何影响。
这是一个JsFiddle:https://jsfiddle.net/5j6c6mgo/7/。选择还有一些其他小问题,但希望您能够看到我上面描述的行为。
答案 0 :(得分:4)
我有一个矢量图层...图层有几个带有LineString几何图形的特征。某些 功能重叠。
我认为您需要将LineString几何图形放在单独的图层中,以便能够使用&#39; zIndex&#39; - 你可以通过调用&quot; setZIndex&#39;来做到这一点。在有问题的层上。这将很容易让您set the draw order at runtime。
除此之外,矢量将以初始绘制顺序显示,并且不能重新绘制,因此无法更改绘制顺序。