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

user_16229578 0
Viewed 78

I have made my own vector tile .pbf data, consisting of polygons, lines and points.

The source of .pbf data are from a grouplayer of shapefiles in Geoserver, where each shapefile has been ordered so that points are at the top:

geoserver layer order

Using OpenLayers, I've styled the vector tiles and followed the example for "Vector Tile Info". The difference is mine is toggled by single click.

The problem is that I can't click on any point, even as a sprite image, if it is completely within a polygon. It's possible to click on lines that are completely within a polygon. Underlying polygons are selected as feature[0] when attempting to select a point.

Points Rendered Under Polygons

What might be the cause of this render order? That a point is only a single pixel? What might be the remedy? I'm very new to JavaScript and OpenLayers so I'm hoping it's something naive. I need to be able to prioritize the points when they're surrounded by a polygon.

openlayers javascript
1 Answers

The order of feature returned by map.getFeaturesAtPixel() seems to be random and not related to render order. Either check all the features returned, not just entry [0], or sort the array so Points/MultiPoints are lower in the sort order than LineStrings/MultiLineStrings with Polygons last

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);
});
user_101182700
Related