Polygon overlaps itself doesn't show normally

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

https://docs.mapbox.com/mapbox-gl-js/

Other

11.18k stars 2.22k forks source link

Polygon overlaps itself doesn't show normally #4962

Closed huangyingjie closed 7 years ago

huangyingjie commented 7 years ago

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 commented 7 years ago

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

huangyingjie commented 7 years ago

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

mourner commented 7 years ago

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

huangyingjie commented 7 years ago

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

mourner commented 7 years ago

@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.