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

时间:2017-10-12 12:33:24

标签: javascript vector openlayers

我在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

如果我点击最南端特征处不重叠的某处,则会在顶部选中正确绘制。

The southmost feature is drawn correctly if clicked where there is no overlap

要跟踪需要在视觉上选择的功能,有一个变量:

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

1 个答案:

答案 0 :(得分:4)

  

我有一个矢量图层...图层有几个带有LineString几何图形的特征​​。某些   功能重叠。

我认为您需要将LineString几何图形放在单独的图层中,以便能够使用&#39; zIndex&#39; - 你可以通过调用&quot; setZIndex&#39;来做到这一点。在有问题的层上。这将很容易让您set the draw order at runtime

除此之外,矢量将以初始绘制顺序显示,并且不能重新绘制,因此无法更改绘制顺序。