javascript - 开放层 4 : Changing the draw order of selected features

Question

我在 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>  &nbsp;";
            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/ .选择还有其他一些小问题，但希望您能够看到我上面描述的行为。

Answer 1

I have a single vector layer ... The layer has several features with LineString geometries. Some of the features overlap.

我认为您需要将 LineString 几何图形放在单独的图层中，以便您能够使用“zIndex”——您可以通过在相关图层上调用“setZIndex”来实现。这将很容易让你 set the draw order at runtime .

除此之外，矢量将按其初始绘制顺序显示，并且不可能重新绘制以更改其绘制顺序。