Mapbox gl方向API
因此，我正在编写一个应用程序，它允许管理用户创建一个旅行围绕一个特定的地点与不同的停止点。
为了显示地图，添加标记，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。我只需要画一条路线，而不允许公共用户修改它。
有什么建议吗？
回答 3
Stack Overflow用户
发布于 2016-06-08 22:17:13
实际上，我想的更简单，我所要做的就是从directions获得一个响应，并将一个返回的数组传递给Mapbox匹配，这样它就返回了一个完美的路由。所有记录在Mapbox中
Stack Overflow用户
发布于 2018-05-18 18:30:49
不确定我是否正确地理解了，但是当您发送请求获取指示时，包括在url 'overview=full'.中。这将返回一个更详细的路径，因此之后不需要使用匹配API。
示例：`token=
Stack Overflow用户
发布于 2016-05-23 16:22:58
我今天一直在尝试这样做，并成功地将方向输入到地图中，并通过从git中心拉下mapbox方向项目，将开始和结束控制移除，并对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);这相对容易用npm中的安装程序和我自己的测试文件来测试，方法是按照https://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md运行npm安装程序。
npm install & npm start & open http://localhost:9966/example/我还增加了一行：
localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');下面的要求(‘./)；在例/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，由于此攻击依赖于mapbox gl方向插件行为，而不是从头开始绘制路径，因此您可以在内置的道路上使用方向API来添加路径点来执行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方向插件没有关闭屏幕上控件的选项，它们是添加到地图中的方向类的onAdd( map )方法中添加的。我想看看我是否能更早地移除它们，并进行实验，从而进行黑客攻击。为了提供一个灵活的解决方案，可以添加一个传递给Directions类构造函数的选项。其中还传递了其他选项，尽管这些选项似乎被绑定到了调用Directions的参数上：
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'cycling'
}); 所以也许有一个更好的解决方案。我已经使用Mapbox <1天了，对它的编写和结构不太了解。
还要注意的是，代码修改是在插件中进行的，而不是mapbox的核心，因此相对独立。顺便说一句，这个插件是您正在调用的cURL API的包装器，它返回了点数组。据推测，GitHub上的源代码将包括代码，如果这是您想要做的事情，那么代码就会按照代码的方式呈现行。
https://stackoverflow.com/questions/37259426
复制相似问题
腾讯云开发者
