Fix line rendering at high line-offsets with non-miter linejoin

[peterqliu]

mapbox-gl-js version: v0.15.0

Steps to Trigger Behavior

Check out https://jsfiddle.net/nx2nh1vk/. It is identical to the geojson line example, save with a line-offset:20 property added.

Expected Behavior

I expect lines to render as cleanly as if there were no offset.

Actual Behavior

Line pinches, tapers, intersects itself, breaks, and is otherwise distended.

[mourner]

Looks like this only happens with round linejoins. If you remove this property, it looks good.

[mourner]

And bevel linejoins too. Screenshots:

Round:

Bevel:

Miter (default):

[lucaswoj]

This is a known (but not ticketed) issue that affects mapbox-gl-js and mapbox-gl-native.

This patch implements rudimentary support for offsetting lines.

It doesn't properly offset line joins that are very sharp, and generally only works okay-ish for miter joins (bevel or round joins start to look weird at a certain distance).

-- @kkaefer in mapbox/mapbox-gl-native#3092 (comment)

[lbud]

Closing in favor of #3809 as that ticket has more information (#3809 (comment)).