mapbox - Mapbox gl Directions API

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

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

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

因此，以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 - Mapbox gl Directions API-LMLPHP

我知道这是对我的问题的一般解释，但我希望它是可以理解的。

我一直在尝试用Mapbox Gl Directions API做一些魔术，但是没有运气，因为我必须添加我不想添加的contoller。我只需要画一条路线，而不允许公共用户修改它。

有什么建议吗？

最佳答案

我今天一直在尝试这样做，并通过从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>');

低于require('../);在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插件的行为，而不是从头开始绘制路径，所以您会建立内置的路径跟踪，并且可以访问Directions 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-gl-directions插件没有关闭屏幕上控件的选项，它们被添加到Directions类的onAdd(map)方法中，该方法在将方向添加到地图时被调用。我想看看是否可以更早地删除它们，并进行了实验，从而找到了破解方法。为了提供灵活的解决方案，可能可以添加一个传递到Directions类的构造函数中的选项。尽管似乎将这些其他选项绑定到用于Directions API调用的参数，但还有其他选项:

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

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

还请注意，代码更改位于插件中，而不是mapbox gl的核心，因此相对隔离。顺便说一句，此插件是您正在调用的cURL API的包装，该API返回了点数组。假设GitHub上的源代码将包含代码，该代码将遵循代码渲染线的方式(如果确实要这样做)。