tangrams / tangram

WebGL map rendering engine for creative cartography
https://tangram.city
MIT License
2.22k stars 290 forks source link

Ends of linear rings are not joined #631

Closed westnordost closed 6 years ago

westnordost commented 6 years ago

So while playing around with shaders (from tron), I came across this situation:

circle2

Check this tangram play setup for a minimal demo: >> Demo <<

So, the problem is that the start/end of a linear ring is not joined, at least of a boundary: true. There is an open end like this, which is especially visible of course if the boundary is not a solid color:

illust

The same issue occurs in Tangram-ES.

bcamper commented 6 years ago

Is the underlying data of type linestring, or polygon? If it's a linestring, this is expected, and it's more of a data issue IMO (though we could potentially have a draw-group-level option to treat a closed linestring like this as as polygon). If it's a polygon, then it's not what I would expect.

On Wed, Jan 31, 2018 at 10:26 AM, Tobias Zwick notifications@github.com wrote:

So while playing around with shaders (from tron), I came across this situation:

[image: circle2] https://user-images.githubusercontent.com/4661658/35630859-b36c0520-06a2-11e8-8fb5-2bf8ed5ac921.png

Check this tangram play setup for a minimal demo: >> Demo << https://tangram.city/play/?scene=https%3A%2F%2Fgist.githubusercontent.com%2Fanonymous%2Fe4b6909facde8cb6cbff3f44625339b1%2Fraw%2Ffb5105eb015ee678248acab99d3e9b34dfbe0b9e%2Fscene.yaml#20.00000/53.55052/9.97208

So, the problem is that the start/end of a linear ring is not joined, at least of a boundary: true. There is an open end like this, which is especially visible of course if the boundary is not a solid color:

[image: illust] https://user-images.githubusercontent.com/4661658/35630184-0680fdda-06a1-11e8-954b-f216059f5495.png

The same issue occurs in Tangram-ES.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tangrams/tangram/issues/631, or mute the thread https://github.com/notifications/unsubscribe-auth/AABBXWiGxi6q35WPqEekr6NmjiFD7Nq0ks5tQIYagaJpZM4R0JjU .

westnordost commented 6 years ago

It is a polygon. This is the place: https://www.openstreetmap.org/way/461574471

Edit: Or well, you know that there is no concept of "areas" in OSM, everything is a linestring. So I suppose you meant whether the linestring is closed, right?

bcamper commented 6 years ago

Sorry for the delay. I think the issue is that your boundary: true geometries are encoded as a line type in your MVT. Tangram will only draw a closed line on a polygon type. But you do have the polygon version of that geometry in your tiles already -- if you just remove boundary: true from the filter, it will draw a line stroke around the same water area you are filling blue, and it should work fine:

        shore_lines:
            filter: { $zoom: { min: 16 } }

screen shot 2018-04-22 at 10 40 26 am

westnordost commented 6 years ago

True, removing boundary: true changes something, however the original problem as described remains the same. See here:

linejoin

bcamper commented 6 years ago

Ah OK I think the problem is now it's drawing lines styles for both boundary (lines) and non-boundary (polygon) features. I think it's working as you want if you explicitly exclude the boundaries?

        shore_lines:
            filter: { boundary: false, $zoom: { min: 16 } }
            draw:
                lines-coast:
                    order: global.sort_rank
                    width: 20px
                    color: global.water_color

screen shot 2018-04-22 at 12 43 57 pm

westnordost commented 6 years ago

Oh yeah, exactly! That's beautiful, thank you :-D