OpenLayers功能样式zIndex内部几何体函数

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

这些将在矢量层中渲染

在这些屏蔽下面是一个线字符串，我按原样渲染一次（即作为一条线），在它上面，我还使用定义了

几何体

函数的样式进行渲染。在该函数中，我返回一个

ol.geom.MultiPoint

，其中包含我希望沿直线添加屏蔽的坐标

我知道，我上面的演示很愚蠢（也就是说，在我的实际用例中，护盾之间的间隙要大得多，所以我知道我不会有任何碰撞）

问题是，我知道通常有一种方法可以通过

ol.style.style

的

zIndex

属性避免这种行为，也就是说，如果每个特性都有自己的样式定义不同的zIndex，那么每个shield+文本都会正确地呈现为重叠的shield下面的文本。但是，这不适用于

几何体

方法，因为同一样式多次用于同一特征以多次渲染

---

正如我所说，因为我将定义一个足够大的间隙来避免碰撞，所以我并不需要找到解决这个问题的方法，但我很好奇，对于我未来的自己和其他想知道的人来说，是否有一种方法。

多点上的每个点都可以有自己的风格。以OpenLayers为例，如果使用此函数替换样式数组，则可以为多点上的每个点指定不同的半径和不同的黄色阴影。它也适用于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;
}