在OpenLayers中的选定元素之前设置功能

时间:2018-10-04 14:27:08

标签: javascript openlayers

我有一些功能必须始终位于其他任何功能的前面,问题是当我绘制新功能或选择当前功能时,它会与所有其他功能重叠。 有什么方法可以将某些要素或图层设置为始终位于所有内容之上?

1 个答案:

答案 0 :(得分:2)

我怀疑您没有以交互的选定样式指定zIndex。在此代码示例中,将鼠标悬停在某些图层上的特征中,我将选定的样式设置为与该图层的普通未选定样式相同,只更改了光标

var interStyle;

function interFilter(feature, layer) {
    for (var i = 0; i < layerTypes.length; i++) {
        if (layer && layer.get("jsonName") && layer.get("jsonName").slice(-7) == layerTypes[i] + ".json") {
            interStyle = layer.getStyle();
            return true;
        }
    }
    return false;
}

var interHover = new ol.interaction.Select({ condition: ol.events.condition.pointerMove,
                                             style: function(feature) { return interStyle; },
                                             filter: interFilter });

interHover.on( "select",
               function(event) { rowMap.getViewport().style.cursor = event.selected.length > 0 ? "pointer" : "";
                                 // optional callback to inform the calling page the mouse is over/off a feature
                                 if (options.setMouseOver) { options.setMouseOver(event.selected.length > 0); } }
);

紫色线始终保持在绿色线下方

enter image description here

但是,如果我注释掉样式设置

var interHover = new ol.interaction.Select({ condition: ol.events.condition.pointerMove,
                                             // style: function(feature) { return interStyle; },
                                             filter: interFilter });

当鼠标悬停在紫色线上时,OpenLayers将采用默认的蓝色选定样式并显示在绿色线上方

enter image description here