mapbox 繪制路線并展示路線長度

背景:上一篇寫過mapbox如何繪制線路并導出為kml檔案,後面又加了個需求,需要展示所繪制的路線長度,這裡就需要用到turf了

1. 引入turf,可以線上引入,也可以下載下傳到本地引入

import '@/components/webgisMap/turf.min.js';

<script src="https://unpkg.com/@turf/[email protected]/turf.min.js"></script>
           

2. 使用turf.length計算

// 生成geojson格式的路線資料 (上一篇寫的mapbox線路繪制可直接生成geojson資料,這裡用turf.lineString轉化一下)
var line = turf.lineString([[115, -32], [131, -22], [143, -25], [150, -34]]);
// 計算長度 units: 'miles' 機關,預設kilometers
var length = turf.length(line, {units: 'miles'});
           

更多turf功能請檢視Turf.js | Advanced Geospatial Analysis