无法单击多边形顶部的矢量平铺点

如何解决无法单击多边形顶部的矢量平铺点

我制作了自己的矢量切片 .pbf 数据，由多边形、线和点组成。

.pbf 数据的来源来自 Geoserver 中的一组 shapefile，其中每个 shapefile 都已排序，因此点位于顶部：

使用 OpenLayers，我对矢量切片进行了样式设置，并遵循了“Vector Tile Info”的示例。不同的是我的是通过单击切换。

问题是我无法点击任何点，即使是精灵图像，如果它完全在多边形内。 可以单击完全位于多边形内的线。 尝试选择一个点时，下面的多边形被选为特征 [0]。

这个渲染顺序的原因可能是什么？一个点只有一个像素？ 可能的补救措施是什么？ 我对 JavaScript 和 OpenLayers 很陌生，所以我希望它是天真的东西。 当点被多边形包围时，我需要能够对其进行优先级排序。

解决方法

map.getFeaturesAtPixel() 返回的特征顺序似乎是随机的，与渲染顺序无关。要么检查返回的所有特征，而不仅仅是条目 [0]，或者对数组进行排序，使点/多点在排序顺序中低于带有多边形的 LineStrings/MultiLineStrings 最后

function rank(feature) {
  var type = feature.getType();
  if (type.indexOf('Point') > -1) {
    return 1;
  } else if (type.indexOf('LineString') > -1) {
    return 2;
  } else {
    return 3;
  }
}

map.getFeaturesAtPixel(event.pixel).sort(function(a,b) {
  return rank(a) - rank(b);
});