时间戳

首页 > 解决方案 > Mapbox中两点之间的路由

mapbox - Mapbox中两点之间的路由

问题描述

我正在使用 MapBox 在两点之间创建一条路线。我已经有两个点的 LatLng 并且已经成功地在源点和目标点添加了标记。问题是当用户点击源点时，如何使用曲线（路线）在这两个点之间进行映射或连接？例如航班路线图

标签： mapbox

解决方案

如果要绘制连接地球表面上 2 个点的弧线，则不必担心曲率，因为球体上 2 个点之间的最短线是弯曲的。

下面应该可以在您的 Mapbox GL JS 地图上绘制旧金山和华盛顿特区之间的曲线：

// San Francisco
var origin = [-122.414, 37.776];
 
// Washington DC
var destination = [-77.032, 38.913];
 
// A simple line from origin to destination.
var route = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [origin, destination]
}
}
]
};

map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
'type': 'geojson',
'data': route
});


map.addLayer({
'id': 'route',
'source': 'route',
'type': 'line',
'paint': {
'line-width': 2,
'line-color': '#007cbf'
}
});

});

推荐阅读