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

Question

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

这些在矢量层中呈现。

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

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

问题是，我知道通常可以通过zIndex的{​​{1}}属性来避免这种行为，即，如果每个功能都有自己的样式定义不同的zIndex ，则每个盾牌+文本将在重叠的盾牌下正确显示文本。但是，这不适用于ol.style.Style方法，因为同一功能多次使用同一样式才能多次渲染。

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

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;
}