Openlayers 4:更改所选要素的绘制顺序

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

我有一个矢量图层...该图层具有 LineString 几何图形的多个功能。有些功能是重叠的。

我认为您需要将 LineString 几何图形放在单独的图层中，以便能够使用“zIndex” - 您可以通过在相关图层上调用“setZIndex”来完成此操作。这将允许您轻松地在运行时设置绘制顺序。

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