所以我正在编写一个应用程序,允许管理员用户创建一个具有不同停靠点的特定位置的旅程。
为了显示地图,添加标记,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
。我只需要画一条路线,不允许公共用户修改它。
有什么建议吗?
答案 0 :(得分:2)
我今天一直试图这样做,并成功通过从git hub下拉mapbox-gl-directions项目并将一个小模块转换为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>');
低于要求(&#39; ../);在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方向的插件行为,而不是从头开始绘制路径,你得到内置的道路,你可以访问路线API来添加路径来做你的A-&gt; B-&gt; C - &gt; 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类的onAdd(map)方法中,该方法在添加方向时调用地图。我想看看我是否可以提前删除它们并进行实验,因此是黑客攻击。要制作灵活的解决方案,可以添加传递给Directions类的构造函数的选项。还有其他选项传入,尽管这些选项似乎与方向API调用的参数绑定:
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'cycling'
});
所以可能有更好的解决方案。我一直在使用Mapbox <1天,并且不太了解它的书面或结构。
另请注意,代码更改位于插件中,而不是mapbox gl的核心,因此相对隔离。 BTW这个插件是你调用的cURL API的包装器,它返回了点数组。据推测,GitHub上的源代码将包含代码,该代码在呈现该行的路上行走,如果这肯定是您想要做的。
答案 1 :(得分:1)
不确定我是否理解正确,但是当您向我发送请求时,请求包含在网址“概述=完整”中。这将返回更详细的路径,因此您无需在之后使用匹配API。
实施例:
https://api.mapbox.com/directions/v5/mapbox/driving/-74.50,40;-80,50?overview=full&geometries=geojson&access_token=pk.eyJ1IjoiZG5hZ29ybnkiLCJhIjoiY2pnMmxrdDNuNjNrZDJ3bWRjZ3U0YWNzaSJ9.WWONwkA77y5GRbG8dD1ftQ
答案 2 :(得分:0)
实际上我想的更容易,我所要做的就是从Directions API获得响应,并将返回的数组传递给Mapbox Map Matching,这样它就会返回一条完美的路径。全部记录在Mapbox API中