幾何函數內部的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;
}