OpenLayers 3图片和文字样式zindex [英] OpenLayers 3 Image and Text style zindex

问题描述

我注意到，文本和图像样式在渲染时似乎并不遵循其图层顺序.例如，当许多具有这些样式的要素靠近在一起时，所有文本将呈现在其他重叠的矢量要素之上.有没有办法禁用或覆盖此行为?谢谢.

I've noticed that text and image styles don't seem to respect their layer order when being rendered. For example, when many features with these styles are close together, all the text is rendered on top of other overlapping vector features. Is there a way to disable or override this behavior? Thanks.

myFeature.setStyle(new ol.style.Style({
  image: new ol.style.Icon({
    src: '/images/myImage.png',
    anchor: [0.5, 1],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction'
  })
}));

myOtherFeature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    fill: new ol.style.Fill({
      color: 'rgb(255,200,77)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(0,0,0,.2)',
      width: 1
    }),
    radius: 14
  }),
  text: new ol.style.Text({
    font: 'light 10px Arial',
    text: '1',
    fill: new ol.style.Fill({color: 'black'}),
    stroke: new ol.style.Stroke({color: 'black', width: 0.5})
  })
}));

推荐答案

在将点符号与文本堆叠时，如果希望文本粘贴在符号上，则需要给每个点自己的zIndex(递增).请参见 http://jsfiddle.net/8g1vayvc/.您也可以通过样式功能来做到这一点:

When stacking point symbols with text, you need to give every point its own (increasing) zIndex if you want the text to stick to the symbol. See http://jsfiddle.net/8g1vayvc/. You can also do that in a style function:

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

这篇关于OpenLayers 3图片和文字样式zindex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！