OpenLayers 3点文本zIndex

时间:2016-03-16 13:00:05

标签: javascript z-index openlayers-3

文本似乎不尊重图像的zIndex。如果同一坐标中有多个点(堆叠点),则每个点的文本都是渲染器,并且会破坏设计。

图像和文本是否有相同的zIndex位置?

我发现了这个OpenLayers 3 Image and Text style zindex,但它没有提供解决方案

这是我的代码:

new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                scale: 0.5,
                fill: new ol.style.Fill({
                    color: 'green'
                })
            }),
            text: new ol.style.Text({
                font: 'helvetica,sans-serif',
                text: 'here is the text',
                fill: new ol.style.Fill({
                    color: 'white'
                })
            }),
            zIndex: 10
        })

1 个答案:

答案 0 :(得分:1)

当使用文本堆叠点符号时,如果希望文本粘贴到符号上,则需要为每个点提供自己的(增加的)zIndex。见http://jsfiddle.net/8g1vayvc/。您也可以在样式函数中执行此操作:

var myStyle = new ol.style.Style({/*...*/});
var zIndex = 0;
function styleFunction(feature, resolution) {
  myStyle.setZIndex(zIndex++);
  return myStyle;
}