几何函数内部的OpenLayers要素样式zIndex

Question

此（愚蠢的）图片总结了我遇到的问题：

它们在矢量层中渲染。

在这些盾牌下面是一个线形字符串，我按原样（即，作为一条线）渲染一次，并且在其上方，我还使用定义了geometry函数的样式来渲染它。 在该函数中，我返回一个ol.geom.MultiPoint其中包含要在该行旁边添加屏蔽的坐标。

我知道我的上述演示很愚蠢（即，在我的实际用例中，屏蔽之间的间隙要大得多，所以我知道不会有任何碰撞）。

问题是，我知道通常可以通过ol.style.Style的zIndex属性来避免这种行为，即，如果每个功能都有定义不同zIndex的自己的样式，则每个shield + text都会用重叠的盾牌下方的文字正确呈现。 但是，这不适用于geometry方法，因为同一特征多次使用同一样式多次渲染。

就像我说的那样，因为我将定义一个足够大的间隙来避免冲突，所以我真的不需要想办法解决这个问题，但是我很好奇是否存在一个，对于我的未来自我和其他人想知道。

Answer 1

多点上的每个点都可以指定自己的样式。 以这个OpenLayers为例http://openlayers.org/en/v4.6.5/examples/polygon-styles.html如果用此函数替换样式数组，则可以为多点上的每个点赋予不同的半径和不同的黄色阴影。 它也适用于zIndex，可以看到多边形的第一个和最后一个坐标重合。

function styles(feature) {

  var multipoint = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);

  var styles = [

    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })

  ];

  multipoint.getCoordinates().forEach(function(coordinates, index) {

    var shade = (index+1)*50;
    var radius = (index+1)*5;
    var zIndex = 10-index;
    styles.push(new ol.style.Style({
      zIndex: zIndex,
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'rgba(' + shade + ',' + shade + ', 0, 1)'
        })
      }),
      geometry: new ol.geom.Point(coordinates)

    }));

  });

  return styles;
}