我在OpenLayers 4（4.4.1）中有一个矢量图层 . 该图层具有多个 LineString 几何特征 . 一些功能重叠 .
如果单击要素重叠的点，我只希望将其中一个要素绘制为选中 . 其他应该仍可供以后选择（通过单独的UI选择列表中的功能ID） .
如果我单击另一个要素ID（在单独的UI选择列表中），该要素应绘制为选中，并且先前选择的不应绘制为选中，但仍可在选择列表中使用 .
这是有效的，但它只是第一个（默认）选定的功能，似乎在顶部绘制 .
下图显示了功能ID 10049被标记为已选中的情况 .
下图显示了功能ID 10048被标记为已选中的情况 .
如果我单击最南端特征上不重叠的某个位置，则会在顶部选中正确绘制 .
要跟踪需要在视觉上选择的功能，有一个变量：
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/ . 选择还有一些其他小问题，但希望您能够看到我上面描述的行为 .
1 回答
我认为您需要将LineString几何图形放在单独的图层中才能使用'zIndex' - 您可以通过在相关图层上调用'setZIndex'来执行此操作 . 这很容易让你set the draw order at runtime .
除此之外，矢量将以其初始绘制顺序显示，并且缺少重绘以改变其绘制顺序是不可能的 .