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

Question

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

9

我在OpenLayers 4（4.4.1）中有一个单一的矢量图层。该图层具有多个带有LineString几何类型的要素。其中一些要素重叠。如果我点击一个特征重叠的点，我只想绘制一个被选中的要素。其他要素应仍可供以后选择(通过单独的UI选择列表中的要素ID)。如果我点击另一个特征ID（在单独的UI选择列表中），该要素应被绘制为已选择，先前选择的要素不应被绘制为已选择，但仍然在选择列表中可用。这个功能可以实现，但似乎只有第一个（默认）选择的要素能够被正确地绘制在最上层。下面的图片显示了当要素ID 10049被标记为已选择时的情况。

The first element in the selection is drawn correctly

下面的图片显示了当要素ID 10048被标记为已选择时的情况。

The second element in the selection is drawn below the first

如果我在最南端的某个特征上点击，它会正确地绘制在顶部作为所选。

为了跟踪需要视觉选择的功能，有一个变量：

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的选项显示在顶部？我尝试给selectedStyle添加zIndex，但似乎没有任何效果。

这是一个JsFiddle链接：https://jsfiddle.net/5j6c6mgo/7/。还有一些其他小问题与选择相关，但希望您能看到我上面描述的行为。

- Tommy

你能否制作当前状态的fiddle？ - artgb

通过选择交互，您不应该需要手动更新要素样式。您应该能够通过使用 var features = selectInteraction.getFeatures() 获取要素集合，清除 features 集合，然后将新选择的要素添加到 features 中来更新交互的选定要素集合。 - user8651755

@artgb：我会尽快尝试让 Fiddle 运行起来。现在它使用了不公开的数据，所以我需要做一些更改。 - Tommy

@Wyatt：也许我在错误地使用选择交互。但是我想要的是在单击时获取所有功能，但只显示其中一个作为选定项。在稍后的步骤中，我希望能够逐个循环浏览其他已选择的功能。另一种解决方案（也许是正确的解决方案？）是绘制一个单独的图层并自己跟踪它，但如果选择交互可以帮助的话，那就太好了。 - Tommy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fraser · Accepted Answer

我有一个单一的矢量图层...该图层具有多个具有LineString几何特征的要素。其中一些要素重叠。

我认为你需要将LineString几何特征放在不同的图层中，才能使用'zIndex' - 你可以通过调用所涉及的图层上的'setZIndex'来实现这一点。这将轻松地允许您在运行时设置绘制顺序。

除此之外，向量将以它们的初始绘制顺序显示，除了重新绘制，改变它们的绘制顺序是不可能的。