基于Leaflet.js和Turf.js的完整平滑曲线生成展示实践教程

在GIS路线相关的应用开发中，展示轨迹是一个常见的需求。通常，我们需要在地图上采集若干个关键点的经纬度，然后将它们连接成一条路径。但有一个问题令人困扰：如果只采集少量关键点，最终生成的折线会显得十分生硬，尤其在拐点处非常突兀。简单来说，效果如下：

那么，有没有办法让这些拐点连接而成的曲线变得更加平滑自然呢？有人可能会说：多采集一些点不就行了？理论上确实如此，点越多曲线越平滑。然而，实际野外数据采集工作并不轻松，点位越多意味着工作量越大。那么，能否在不增加采集工作量的前提下，基于现有数据直接进行平滑处理呢？

本文分享一种基于Turf.js的WebGIS解决方案。该方案可以在不增加点位采集负担的情况下，动态生成平滑曲线并在地图上展示。对于希望在WebGIS中实现类似功能的技术人员而言，这是一种值得掌握的实用方法。

一、问题的由来

线是由点构成的。将点两两相连，就能形成一条线。为了便于演示，我们模拟了一条虚拟的自驾路线，并使用Turf.js生成不同平滑程度的曲线。

先回到最基础的场景：以Leaflet作为地图组件，搭配Turf.js，查看初始效果。

1、创建网页框架

首先创建一个HTML页面，页面中需要引入Leaflet的CSS和JS文件，以及Turf.js的库。核心代码如下：

2、创建map对象

基础框架搭建完成后，定义地图对象并将容器绑定上去：

var mymap = L.map('map').setView([29.052934, 104.0625], 6);
var tileLayer = L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png', {
    maxZoom: 7,
    minZoom:0
});
tileLayer.addTo(mymap); 

3、构建点位，生成路线

为了演示，我们使用一套虚拟数据，模拟一条从云南保山出发，途经攀枝花、昆明、成都、重庆、贵阳、长沙、赣州，最终到达福建福州的自驾路线。各城市的经纬度如下：

var cityPoint = new Array();
cityPoint.push([99.116482, 25.078402]);//保山
cityPoint.push([101.708392, 26.50289]);//攀枝花
cityPoint.push([102.780718, 24.915559]);//昆明
cityPoint.push([104.098757, 30.594412]);//成都
cityPoint.push([106.559098, 29.452047]);//重庆
cityPoint.push([106.515163, 26.461228]);//贵阳
cityPoint.push([112.929622, 28.141659]);//长沙
cityPoint.push([114.956049, 25.713705]);//赣州
cityPoint.push([119.344081, 26.027307]);//福州

然后将这些点位连接成线，并展示在地图上：

var linestring = turf.lineString(cityPoint, {name: 'line 1'});
L.geoJSON(linestring,{
    style:{color:"blue",wight:2,fill:false}
}).addTo(mymap);

查看原始效果，注意各个拐点——确实不够平滑。

二、Turf.js平滑曲线改造

现在进入核心环节。先简单了解Turf.js中用于曲线平滑的方法。

1、官网方法介绍

Turf.js提供了bezierSpline()方法，用于对多线段进行平滑处理。其原理是通过贝塞尔样条算法，将原始线转换为弯曲的版本。关于贝塞尔曲线的具体原理，感兴趣的朋友可以自行查阅，其中涉及不少数学知识。

方法参数如下：

options选项：

返回值是Feature ，即平滑后的线。

2、0.4弯曲度曲线

在实际应用中，我们将sharpness设置为0.4，观察效果：

var curved = turf.bezierSpline(linestring,{sharpness:0.4,resolution:10000});
L.geoJSON(curved,{
    style:{color:"red",wight:2,fill:false}
}).addTo(mymap);

将生成的红色曲线与原始蓝色曲线叠加在一起，可以明显看出整条路线平滑了许多。

3、0.85弯曲度曲线

接下来尝试0.85的弯曲度：

L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.85,resolution:10000}),{
    style:{color:"green",wight:2,fill:false}
}).addTo(mymap);

从效果来看，0.85的曲线弯曲程度明显更大，与真实路线的形态差异也更为突出。

4、0.1弯曲度曲线

再试试0.1的弯曲度：

L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.1,resolution:10000}),{
    style:{color:"yellow",wight:2,fill:false}
}).addTo(mymap);

5、综合对比

将三条不同弯曲度的曲线叠加在一起进行对比，效果更加直观：

从对比中可以看出：弯曲度系数越大，曲线越“弯”。黄色代表0.1弯曲度，红色代表0.4弯曲度，绿色代表0.85弯曲度。

最后附上完整的示例代码。运行时请将图源地址替换为自己服务器上的地址。

总结

简而言之，利用Turf.js的bezierSpline方法配合sharpness参数，可以在不增加采集点数量的情况下，高效地对已有路线数据进行平滑处理。这种方法既不会破坏原始路径的走向意图，又能有效优化拐点效果。在WebGIS轨迹平滑、路线可视化等场景中，这是一种优雅且实用的解决方案。