OpenLayers Feature Style zIndex inside geometry 函数

Question

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

这些在矢量图层中呈现。

在这些盾牌下方是一个线串，我按原样渲染一次（即作为一条线），在它上面我还使用定义了 geometry 函数的样式渲染它。在该函数中，我 return 一个 ol.geom.MultiPoint 包含我希望在该行旁边添加盾牌的坐标。

我知道我上面的演示很愚蠢（即在我的实际用例中，防护罩之间的间隙更大，所以我知道我不会发生任何碰撞）。

问题是，我知道 ol.style.Style 的 zIndex 属性通常有一种方法可以避免这种行为，即如果每个功能都有其自己的样式定义不同的 zIndex，那么每个盾牌+文本都将正确呈现重叠盾牌下方的文本。但是，这不适用于 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;
}

OpenLayers Feature Style zIndex inside geometry 函数

OpenLayers Feature Style zIndex inside geometry function

openlayers

openlayers-3