【发布时间】:2017-10-12 12:33:23
【问题描述】:
我在 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/。选择还有其他一些小问题,但希望您能够看到我在上面描述的行为。
【问题讨论】:
-
你能搞定当前的状态吗?
-
通过选择交互,您不需要手动更新特征样式。您应该能够通过使用
var features = selectInteraction.getFeatures()抓取特征集合,清除features集合,然后将新的选定特征添加到features来更新交互的选定特征集。 -
@artgb:我会尽快让小提琴运行起来。现在它使用非公开数据,所以我需要做一些改变。
-
@Wyatt:也许我以错误的方式使用了选择交互。但我想要的是在点击时获得所有功能,但只显示其中一个为选中状态。在后面的步骤中,我希望能够一次一个地循环选择其他功能。另一种解决方案(也许是正确的解决方案?)是绘制一个单独的层并自己跟踪这一点,但如果选择交互可以提供帮助,那就太好了。
标签: javascript vector openlayers