Avoid fill artifacts on multi-polygons

[reyemtm]

Not sure if this is related to #86 but I am getting fill artifacts on complex or multi-polygons. Artifacts also show up with tiles generated with t_rex, so I thought it was related to this issue - mapbox/mapbox-gl-js#7748. However, I am not seeing these artifacts on tiles generated from tegola, though those are being pulled from postgis, not sure if that matters as it is the same original data. Tegola produces other artifacts. Likely a mapbox gl js issue but strange how different tiles perform. geojson-vt is magnitudes faster at tile generation so I would like to keep using this if possible. See the screenshot below. First is tegola, next is t_rex, then a node based server cutting tiles with geojson-vt. The result should look like the image on the left.

geojson-vt options are as follows, though I have tried various simplification and maxzoom settings - if there are any other settings I can try and adjust to help with this let me know.

geojsonvt(geoJSON, {
    maxZoom: 20,            // max zoom to preserve detail on default is 14
    indexMaxZoom: 0,        // max zoom in the tile index
    indexMaxPoints: 100000, // max number of points per tile in the tile index
    tolerance: 0,           // simplification tolerance (higher means simpler)
    extent: 4096,           // tile extent
    buffer: 64,             // tile buffer on each side
    lineMetrics: false,     // whether to calculate line metrics
    promoteId: null,        // name of a feature property to be promoted to feature.id
    generateId: true,      // whether to generate feature ids. Cannot be used with promoteId
    debug: 0                // logging level (0, 1 or 2)
  })

A workaround is to only generate the tiles to I think 16 or 17, but that is not ideal as these are parcel-based polygons which need detail at a high zoom level.

If you need the raw geojson to test you can find it temporarily here. I can extract the one multi-polygon that is causing the issue if that would help.

[reyemtm]

Just reviewed mapbox/mapbox-gl-js#7023 so I'll close this as I'm sure this is the same issue.

[reyemtm]

I just realized mapbox gl js is using a buffer of 2048 if my math is correct, not the default value of 64. Changing this buffer to 1024 has reduced my artifacts considerably. Perhaps more information can be given somewhere on how to find the appropriate buffer size, or maybe this can be linked to if it exists. I have found I can reduce this down further to 512 with acceptable results.

[mourner]

The issue with artifacts on bad / self-intersecting polygons is tracked here: mapbox/mapbox-gl-js#7023

[reyemtm]

Here's the thing - I thought it was a gl js issue but then i noticed that vector tiles produced using ST_AsMVT directly from postgis have very few (none that I found so far) artifacts. Also, the artifacts from various vector tile generators (geojson source using geojson-vt, tegola, trex) are all different, which makes me think that, although there may be underlying issues in gl js, there is also something happening in the generation pipeline as well.

[mourner]

@reyemtm please read the issue I linked above.