文本似乎不尊重图像的zIndex。如果同一坐标(堆叠点)中有多个点,则每个点的文本将相互叠加渲染并破坏设计。
有没有办法让图像和文本尊重它们相同的 zIndex 位置?
我找到了这个 OpenLayers 3 图像和文本样式 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
})
用文本堆叠点符号时,如果您希望文本粘附在符号上,则需要为每个点赋予自己的(递增)zIndex
。请参阅 http://jsfiddle.net/8g1vayvc/。您也可以在样式函数中执行此操作:
var myStyle = new ol.style.Style({/*...*/});
var zIndex = 0;
function styleFunction(feature, resolution) {
myStyle.setZIndex(zIndex++);
return myStyle;
}