目錄
前言
一、問(wèn)題的由來(lái)
1、創(chuàng)建網(wǎng)頁(yè)框架
2、創(chuàng)建map對(duì)象
3、構(gòu)建點(diǎn)位，生成路線
?二、Turf.js平滑曲線改造
1、官網(wǎng)方法介紹
2、0.4彎曲度曲線
3、0.85彎曲度曲線
4、0.1度彎曲曲線
5、綜合對(duì)比?
總結(jié)
前言
????????在很多的關(guān)于路線的gis應(yīng)用中，我們經(jīng)常會(huì)有展示路線的需求，比如采集關(guān)鍵點(diǎn)位的經(jīng)緯度，最后連接成一條軌跡線。不知道各位朋友有沒(méi)有遇到這種需求，如果只是在地圖上采集一些關(guān)鍵點(diǎn)，得到的線經(jīng)常是比較生硬的，尤其是在拐點(diǎn)的時(shí)候，展示效果更加的明顯。形如下面的這種效果。
????????那么有沒(méi)有什么辦法能讓這些拐點(diǎn)練成的曲線實(shí)際效果看上去更加平滑呢？有的小伙會(huì)說(shuō)，可以在數(shù)據(jù)采集階段盡可能多的采集多的點(diǎn)位信息，通過(guò)更多點(diǎn)位的采集，形成一條更加平滑的曲線。從技術(shù)的角度來(lái)說(shuō)，這種方式是可以的，只要將點(diǎn)采集的更多，那么練成的曲線一定是更加平滑的。但是這樣會(huì)增加采集的工作量。有沒(méi)有辦法在現(xiàn)有的成果之上來(lái)進(jìn)行數(shù)據(jù)的平滑處理呢？
?????????本博客給出一種解決方案，熟悉webgis開(kāi)發(fā)的朋友一定知道多種解決方案。那么本文分享一款webgis的解決方案，基于Turf.js組件來(lái)動(dòng)態(tài)生成平滑曲線，然后在webgis框架中進(jìn)行展示。對(duì)于不熟悉或者沒(méi)用過(guò)turf.js的小伙伴起到拋磚引玉的作用。對(duì)于想在Webgis中開(kāi)發(fā)類似應(yīng)用的小伙伴來(lái)說(shuō)，可以看看這篇博客。
一、問(wèn)題的由來(lái)
????????眾所周知，線對(duì)象是由多個(gè)點(diǎn)對(duì)象組合而來(lái)，把多個(gè)點(diǎn)兩兩相連即可連成一條線。因此，這里我們首先模擬構(gòu)造一條虛擬的游覽線路。然后使用turf.js組件生成不同程度的平滑曲線。
????????為了展示最原始的線對(duì)象，我們采用Leaflet作為地圖展示組件，再一起回顧一下Leaflet當(dāng)中如何進(jìn)行地圖展示，以及集成Turf.js組件。
1、創(chuàng)建網(wǎng)頁(yè)框架
????????首先創(chuàng)建一個(gè)html頁(yè)面。在頁(yè)面中我們需要引入Leaflet.css和Leaflet.js兩個(gè)基礎(chǔ)組件，同時(shí)引入Turf.js這個(gè)組件。關(guān)鍵代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>基于Leaflet和Turf生成平滑曲線實(shí)踐</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
<script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
<!-- 使用unpkg -->
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<style>
#map {
margin: 0;
padding: 0;
position: absolute;
width: 99%;
height: 98%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
</script>
</body>
</html>
2、創(chuàng)建map對(duì)象
????????在創(chuàng)建了基礎(chǔ)的網(wǎng)頁(yè)模板之后，再來(lái)定義map對(duì)象。以此在界面上綁定地圖展示容器。代碼如下：
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、構(gòu)建點(diǎn)位，生成路線
????????這里僅為了演示效果，使用演示數(shù)據(jù)。虛擬場(chǎng)景為，構(gòu)建一個(gè)自駕路線，從云南的保山市出發(fā)，依次經(jīng)過(guò)攀枝花、昆明、成都、重慶、貴陽(yáng)、長(zhǎng)沙、贛州，最終到達(dá)福建的福州。以上城市的經(jīng)緯度信息如下：
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]);//貴陽(yáng)
cityPoint.push([112.929622, 28.141659]);//長(zhǎng)沙
cityPoint.push([114.956049, 25.713705]);//贛州
cityPoint.push([119.344081, 26.027307]);//福州
????????然后，我們將這些點(diǎn)位數(shù)據(jù)連成一條線，在地圖上展示出來(lái)。
var linestring = turf.lineString(cityPoint, {name: 'line 1'});
L.geoJSON(linestring,{style:{color:"blue",wight:2,fill:false}}).addTo(mymap);????????先來(lái)看一下原始的曲線效果，請(qǐng)注意各個(gè)拐點(diǎn)的實(shí)際效果。通過(guò)以下結(jié)果可以看到，原始的路線展示確實(shí)不夠平滑。
?二、Turf.js平滑曲線改造
????????首先對(duì)turf.js對(duì)于平滑曲線改造的方法進(jìn)行一個(gè)簡(jiǎn)單的介紹。首先來(lái)看一下Turf.js官網(wǎng)對(duì)多線段平滑的方法說(shuō)明。
1、官網(wǎng)方法介紹
????????turf.js是使用bezierSpline()進(jìn)行多線段平滑的構(gòu)建支持的。其原理是接受一條線，通過(guò)應(yīng)用貝塞爾樣條算法返回一個(gè)彎曲的版本。關(guān)于白塞爾曲線的的創(chuàng)建原理，有興趣的朋友可以去查詢相關(guān)搜索引擎。里面還是有一點(diǎn)知識(shí)點(diǎn)的。
????????我們先來(lái)看一下這個(gè)方法：
????????bezierSpline方法參數(shù)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| line | Feature <LineString> | input LineString |
| options | Object | 可選參數(shù)：見(jiàn)下文 |
????????options選項(xiàng)
| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| resolution | number | 10000 | 點(diǎn)之間的時(shí)間（毫秒） |
| sharpness | number | 0.85 | 衡量樣條路徑應(yīng)該有多彎曲的一個(gè)度量 |
方法的返回值是Feature <LineString> - 彎曲的線。
2、0.4彎曲度曲線
????????了解了上面的方法后，在我們的應(yīng)用當(dāng)中調(diào)用生成方法。彎曲度的設(shè)置這里，首先我們?cè)O(shè)置成0.4，來(lái)看一下在0.4的彎曲度下，生成的平滑曲線是什么效果。
var curved = turf.bezierSpline(linestring,{sharpness:0.4,resolution:10000});//0.4的彎曲度
L.geoJSON(curved,{style:{color:"red",wight:2,fill:false}}).addTo(mymap);????????為了與原始的路線進(jìn)行差異對(duì)比，我們將0.4彎曲度的路線設(shè)置為紅色。在瀏覽器中查看實(shí)際效果。很明顯可以看到，與原始路線相比，整條路線看起來(lái)平滑多了。
3、0.85彎曲度曲線
????????在彎曲度0.4的情況下，曲線已經(jīng)明顯發(fā)生光滑。來(lái)看一下0.85的彎曲度下是什么效果。
L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.85,resolution:10000}),{style:{color:"green",wight:2,fill:false}}).addTo(mymap);//0.85的彎曲度
????????我們發(fā)現(xiàn)0.85的曲線，其彎曲度處理的更大了，與實(shí)際效果有一定的差異。?
4、0.1度彎曲曲線
????????最后再來(lái)看一下0.1度彎曲的曲線是什么效果。
L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.1,resolution:10000}),{style:{color:"yellow",wight:2,fill:false}}).addTo(mymap);//0.1的彎曲度
5、綜合對(duì)比?
????????為了比較不同彎曲度下，曲線的平滑程度。為了直觀的展示效果，將三種平滑度同時(shí)疊加。
?????????通過(guò)效果可以看到，彎曲度系數(shù)越大，曲線的平滑程度也是比較大。黃色表示0.1的彎曲度，紅色表示0.4的彎曲度，綠色表示0.85的彎曲度。
| 序號(hào) | 彎曲度 | 實(shí)際效果 |
| 1 | 0.1 | 與原始擬合 |
| 2 | 0.4 | 有一定彎曲 |
| 3 | 0.85 | 彎曲較大 |
????????最后給出完整的示例代碼，請(qǐng)注意在運(yùn)行時(shí)替換本地圖源地址。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-845271.html
<!DOCTYPE html>
<html>
<head>
<title>基于Leaflet和Turf生成平滑曲線實(shí)踐</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
<script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
<!-- 使用unpkg -->
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<style>
#map {
margin: 0;
padding: 0;
position: absolute;
width: 99%;
height: 98%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
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);
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);
var curved = turf.bezierSpline(linestring,{sharpness:0.4,resolution:10000});//0.4的彎曲度
L.geoJSON(curved,{style:{color:"red",wight:2,fill:false}}).addTo(mymap);
L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.85,resolution:10000}),{style:{color:"green",wight:2,fill:false}}).addTo(mymap);//0.85的彎曲度
L.geoJSON(turf.bezierSpline(linestring,{sharpness:0.1,resolution:10000}),{style:{color:"yellow",wight:2,fill:false}}).addTo(mymap);//0.1的彎曲度
</script>
</body>
</html>總結(jié)
????????以上就是本文的主要內(nèi)容，那么本文分享一款webgis的解決方案，基于Turf.js組件來(lái)動(dòng)態(tài)生成平滑曲線，然后在webgis框架中進(jìn)行展示。對(duì)于不熟悉或者沒(méi)用過(guò)turf.js的小伙伴起到拋磚引玉的作用。如果您對(duì)在webgis中如何展示平滑曲線有一定的處理需求，不妨來(lái)看看這篇博客。行文倉(cāng)促，難免有不當(dāng)之處，歡迎各位小伙伴，各位專家批評(píng)指正。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-845271.html
到了這里，關(guān)于基于Lealfet.js展示Turf.js生成的平滑曲線實(shí)踐的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
