Mapbox gl 方向 API

Question

所以我正在编写一个应用程序，它允许管理员用户围绕具有不同停靠点的特定位置创建旅程。

为了显示地图、添加标记、flyTo 位置等，我正在使用 Mapbox GL。

我正在使用 cURL Mapbox API 的实现来获取行车路线，然后在地图上画一条线

因此，作为 cURL 调用的示例，我收到了代表我的方向的坐标列表。

当我尝试在地图上连接这些点时，问题 出现了。

作为 HTML 的示例，其中一些 JS

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<ACCESS TOKEN>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function () {
    map.addSource("route", {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                 [-155.088899,19.722942],[-155.08565,19.72472],[-155.084661,19.723701],[-155.083569,19.723139],[-155.079557,19.722262],[-155.074227,19.721938],[-155.069939,19.722545],[-155.070061,19.721225],[-155.07007,19.711726]
                ]
            }
        }
    });

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });
});
</script>

</body>
</html>

可以看到一组坐标，将连接起来画一条线。我想知道是否有一种方法可以连接这些点，使这条线只沿着道路行驶（用于驾驶）？

为了更好地解释，这是输出的近距离缩放

我知道这是对我的问题的非常笼统的解释，但我希望它是可以理解的。

我一直在尝试用 Mapbox Gl Directions API 做一些魔术，但没有成功，因为我必须添加一个我不想添加的 contoller。我只需要绘制一条路线并且不允许 public 用户能够修改它。

有什么建议吗？

Answer 1

我今天一直在尝试这样做，并通过从 git 中心拉下 mapbox-gl-directions 项目并制作一个小版本，成功地将路线获取到地图中并删除了开始和结束控件mod 到 src/directions.js

我注释掉了第 48 到 52 行

// Add controllers to the page
//new Inputs(inputEl, store, this.actions, this.map);
//new Instructions(directionsEl, store, {
//  hoverMarker: this.actions.hoverMarker,
//  setRouteIndex: this.actions.setRouteIndex
//}, this.map);

根据 https://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md

运行 npm 设置，使用 npm 中的设置和我自己的测试文件进行测试相对容易

npm install & npm start & open http://localhost:9966/example/

我还添加了以下行：

localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');

低于要求（'../）;在 example/index.js 中。当您在 npm 中有示例运行时，您可以从 http://localhost:9966/example/bundle.js

访问插件的新捆绑版本

然后我可以更改线路

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.0.0/mapbox-gl-directions.js'></script>

到

<script src='http://localhost:9966/example/bundle.js'></script>

在 npm 的示例运行程序中有一大堆神奇的事情发生，我对此一无所知，但它们都在我的机器上运行。希望这可以帮助。方向线与动画和俯仰、缩放和方位动画一起使用。请参阅下面的屏幕截图：

更新：在此处添加回复以便我可以显示屏幕截图。 @Andrejus，因为这个 hack 依赖于 mapbox gl directions 插件的行为，而不是从头开始绘制路径，你得到了内置的道路，你可以访问方向 API 添加 waypoints 来做你的 A ->B->C->D 这样：

map.on('load', function() {
    directions.setOrigin(start); 
    directions.addWaypoint(0, [-0.07571203, 51.51424049]);
    directions.addWaypoint(1, [-0.12416858, 51.50779757]);
    directions.setDestination(end);  
});

文档说您最多可以有 25 个航路点。

mapbox-gl-directions 插件没有关闭屏幕控件的选项，它们被添加到 Directions class 的 onAdd(map) 方法中，当方向被添加到地图中。我想看看我是否可以更早地删除它们并进行试验，因此被黑了。为了制定灵活的解决方案，可以添加一个传递给 Directions class 的构造函数的选项。那里还传递了其他选项，尽管这些选项似乎绑定到用于调用 Directions API:

的参数

var directions = new mapboxgl.Directions({
  unit: 'metric',
  profile: 'cycling'
});

所以可能有比这更好的解决方案。我使用 Mapbox 不到 1 天，对它的编写或结构了解不多。

另请注意，代码更改是在插件中，而不是 mapbox gl 的核心，因此相对孤立。顺便说一句，这个插件是你调用的 cURL API 的包装器，它返回点数组。据推测，GitHub 上的源代码将包含在呈现线的位置之后执行道路的代码，如果这确实是您想要做的。

Answer 2

其实我想的更简单，我所要做的就是从方向 API 得到一个响应，然后将返回的数组传递给 Mapbox 地图匹配，这样 returns完美的路线。全部记录在 Mapbox API

Answer 3

不确定我是否理解正确，但是当您发送请求以获取路线时，请包含在 url 'overview=full' 中。这将return一个更详细的路径，因此您无需在之后使用匹配API。

示例： `https://api.mapbox.com/directions/v5/mapbox/driving/-74.50,40;-80,50?overview=full&geometries=geojson&access_token=

Mapbox gl 方向 API

Mapbox gl directions API

mapbox

mapbox-gl