Polygon overlaps itself doesn't show normally

[huangyingjie]

Problem and code

• Here is my code:

          map.addLayer({
              'id': 'maine',
              'type': 'fill',
              'source': {
                  'type': 'geojson',
                  'data': {
                      'type': 'Feature',
                      'geometry': {
                          'type': 'Polygon',
                          'coordinates': [[[116.37688636779785,39.93091599989282],
                            [116.41559600830078,39.89999167197871],
                            [116.37027740478516,39.89771993624399],
                            [116.41353607177734,39.9317880642358],
                            [116.37688636779785,39.93091599989282]
                          ]]
                      }
                  }
              },
              'layout': {},
              'paint': {
                  'fill-color': '#088',
                  'fill-opacity': 0.8
              }
          });

• And This is the screenshot
  
  When Change the zoom:
  

What's my expectation

Why not forbid overlapping?

I shall do this later, but there was too much data overlaps; and customers ask to show as my description before.

[ddimaria]

Turf union? https://github.com/Turfjs/turf/tree/master/packages/turf-union

[huangyingjie]

@ddimaria it use two or more polyons, but here it is just one polygon..

[mourner]

This is a technical limitation — we currently have no way to properly triangulate invalid self-intersecting polygons.

[huangyingjie]

Hello @mourner , could you please describe the technical limitation in detail? article、issue etc.

[mourner]

@huangyingjie there is no fast, stable algorithm for triangulating non-simple (self-intersecting) polygons. For triangulation, we use https://github.com/mapbox/earcut, which is very fast, but assumes that polygons do not self-intersect.

We clean up all self-intersections in our vector tiles, but don't do so yet in JavaScript when rendering GeoJSON sources. Detecting and resolving self-intersections is a very hard problem, which I started exploring in https://github.com/mapbox/polysnap project, but haven't finished yet.