在Mapbox.js中，如何平滑多段线？ [英] In Mapbox.js, how to smooth a polyline?

问题描述

代码可以在

提供了CHAIKIN的算法，但该算法的缺点是平滑曲线不能直接通过控制点...）

解决方案

您可以使用草皮贝塞尔创建插值贝塞尔线任何LineString几何图形。

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

解决方案

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

这篇关于在Mapbox.js中，如何平滑多段线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！