Javascript 在Mapbox.js中，如何平滑多段线？

可在以下网址查看代码：

以下是要添加多段线的线

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

可以看出，属于多段线的每两条直线的接合点中都有一个角度，如下所示，这一点不太吸引人：

我想知道是否有一种简单的方法可以在Mapbox中将角度变成一条圆曲线

---

（我看到了这篇关于平滑多段线的文章。在那篇文章中，我看到了CHAIKIN的算法，但该算法的缺点是平滑曲线不会直接通过控制点…）

您可以使用从任何线串几何图形创建插值贝塞尔线。

您应该获得可以转换为坐标数组的线串几何图形

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;

函数解码（str）{
var标志=真；
setTimeout（（）=>{flag=false；返回[]；}，3000）；
var指数=0，
lat=0，
液化天然气=0，
坐标=[]，
移位=0，
结果=0，
字节=空，
纬度变化，
经度改变，
因子=数学功率（10,6）；
while（标志和索引>1）：（结果>>1））；
移位=结果=0；
做{
byte=str.charCodeAt（index++）-63；
结果|=（字节&0x1f）=0x20）；
经度变化=（（结果&1）～（结果>>1）：（结果>>1））；
lat+=纬度变化；
lng+=经度变化；
坐标。推力（[lat/系数，lng/系数]）；
}
返回坐标；

---

}

在我的例子中，

linejoin

选项是不可见的，贝塞尔曲线改变路径太多。 受该解决方案的启发，我为传单创建了自定义点到路径方法，以平滑

L.polyline

中的路径角。我相信这可以轻松地应用于Mapbox

注意：此方法仅使用多段线进行测试，不需要闭合路径

例如：

结果:

函数roundPathCorners（环、半径）{
函数向分数移动（移动点、目标点、分数）{
返回{
x:movingPoint.x+（targetPoint.x-movingPoint.x）*分数，
y:movingPoint.y+（targetPoint.y-movingPoint.y）*分数
};
}
函数pointForCommand（cmd）{
返回{
x:parseFloat（cmd[cmd.length-2]），
y:parseFloat（cmd[cmd.length-1]）
};
}
var resultCommands=[]；
如果（+半径）{
//负数会产生伪影
半径=数学绝对值（半径）；
}否则{
半径=0.15；
}
对于（i=0，len=rings.length；i

我删除了你的曲线和图形标签，因为它们不会有多大帮助，添加了传单标签。Mapbox是传单的扩展版本，包含一系列附加内容。因此，你可能需要调整搜索努力。在传单（以及Mapbox）中，多段线基本上是一条包含一些附加内容的路径：首先要看的是（

lineJoin

option）[。链接不再有效，并且

turf bezier

模块已重命名为