如何不用mapbox的测距api,直接通过mapboxgl+js+turf实现类似百度地图的测距功能,鼠标放到拐点,鼠标样式变成手型,并可以拖动
时间: 2023-02-09 18:36:51 浏览: 194
你可以使用 turf.length 方法来计算地图上的折线的长度。
为了实现鼠标放到拐点,鼠标样式变成手型,并可以拖动的效果,你可以使用 Mapbox GL JS 的拖拽插件。你可以在插件的文档中找到如何使用它的说明。
示例代码如下:
```
// 计算地图上折线的长度
var line = turf.lineString(coords);
var length = turf.length(line);
// 初始化地图
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: coords[0],
zoom: 14
});
// 添加折线图层
map.on('load', function() {
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: coords
}
}
},
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#888',
'line-width': 8
}
});
});
// 添加拖拽插件
var drag = new MapboxGL.Draggable(map);
// 监听拖拽事件,计算新的折线长度
drag.on('drag', function(e) {
// 更新折线的坐标
coords = e.features[0].geometry.coordinates;
line = turf.lineString(coords);
length = turf.length(line);
// 更新折线图层
map.getSource('route').setData({
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: coords
}
});
});
```
希望这能帮到你!