2

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

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

我正在使用API 的cURL实现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 gl 用一条线连接一组点

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

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

有什么建议吗？

4

3 回答 3

4

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

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

于 2018-05-18T18:30:49.517 回答
3

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

低于要求（'../）; 在示例/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->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 的包装器，它返回了点数组。大概 GitHub 上的源代码将包含代码，这些代码会沿着它呈现线的位置执行，如果这绝对是您想要做的。

于 2016-05-23T16:22:58.767 回答
-1

实际上，我认为更容易，我所要做的就是从路线 API 获得响应，并将返回的数组传递给 Mapbox 地图匹配，这样它就会返回一条完美的路线。所有记录在 Mapbox API 中

于 2016-06-08T22:17:13.607 回答