Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Mapbox.js, how to smooth a polyline?

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:

enter image description here

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

like image 890
Hanfei Sun Avatar asked Mar 16 '15 10:03

Hanfei Sun


1 Answers

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

like image 130
tmcw Avatar answered Sep 30 '22 05:09

tmcw