In Mapbox.js, how to smooth a polyline?

Question

The code can be viewed at

http://jsfiddle.net/qsr5bs6v/

Following are the lines to add a polyline

L.polyline([[31.233, 121.465], [31.233499, 121.500634], [31.190172, 121.588107]], {
    color: '#000',
    smoothFactor: 10.0
}).addTo(map)

As can be seen, there is an angle in the joint point of every two lines belonging to the polyline, like this, which is not so attractive:

I was wondering whether there is an easy way to make the angle into a rounded curve in Mapbox..

(I saw this post about smoothing a polyline Smooth polyline with minimal deformation . In that post, I saw CHAIKIN'S ALGORITHMS is suggested but the drawback of that algorithm is that the smoothed curve doesn't pass directly through the control points... )

Answer 1

You should get a string geometry that can be converted to an array of coordinates

function decode(str) {
var flag = true;
setTimeout(() => { flag = false; return []; }, 3000);
var index = 0,
  lat = 0,
  lng = 0,
  coordinates = [],
  shift = 0,
  result = 0,
  byte = null,
  latitude_change,
  longitude_change,
  factor = Math.pow(10, 6);
while (flag && index < str.length) {
  byte = null;
  shift = 0;
  result = 0;
  do {
    byte = str.charCodeAt(index++) - 63;
    result |= (byte & 0x1f) << shift;
    shift += 5;
  } while (flag && byte >= 0x20);
  latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
  shift = result = 0;
  do {
    byte = str.charCodeAt(index++) - 63;
    result |= (byte & 0x1f) << shift;
    shift += 5;
  } while (flag && byte >= 0x20);
  longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
  lat += latitude_change;
  lng += longitude_change;
  coordinates.push([lat / factor, lng / factor]);
}
return coordinates;

}

Answer 2

You can use turf-bezier to create an interpolated bezier line out of any LineString geometry.