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

Question

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

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

使用 OpenLayers，我设置了矢量图块的样式并遵循“Vector Tile Info”的示例。不同的是我的是单击切换。

问题是我无法点击任何点，即使是精灵图像，如果它完全在一个多边形内。可以单击完全在多边形内的线。尝试 select 一个点时，底层多边形被 select 编辑为要素[0]。

造成此渲染顺序的原因可能是什么？那个点只是一个像素？补救措施可能是什么？我对 JavaScript 和 OpenLayers 很陌生，所以我希望这是天真的事情。当点被多边形包围时，我需要能够确定点的优先级。

Answer 1

map.getFeaturesAtPixel() 返回的功能顺序似乎是随机的，与渲染顺序无关。检查返回的所有特征，而不仅仅是条目 [0]，或者对数组进行排序，使 Points/MultiPoints 的排序顺序低于 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);
});

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

Vector Tile Points on top of Polygons can't be clicked on

javascript

openlayers