在Openlayers 3中使用OSRM Routing沿地图方向在地图上绘制折线

Question

我想使用 OSRM 和 Openlayers 3 在我的地图上实现路由，但似乎没有任何示例或教程anywhere.All示例令人困惑

来源参考 1：http://workshop.pgrouting.org/chapters/ol3_client.html（在这个示例中，我不知道从哪里获取数据来绘制多段线，我将把数据作为 json 包含数组带纬度和经度的对象）

2:http://wiki.openstreetmap.org/wiki/Routing/online_routers不知道从哪里开始完成

3:Openlayers 3 中的 OSRM 路由

我可以画一条直线，但我想沿着地图的方向画不同颜色的线，我开始知道为此我必须使用方向服务任何人都可以请指出一些示例代码或 post 任何帮助将不胜感激，请说出实现它的方法

Answer 1

开始使用在线服务，如果您对它感到满意，请自行开发（如果需要）

所以让我们假设您要使用您的路由服务。信息和详细信息 here

创建 GET 请求 http://www.yournavigation.org/api/1.0/gosmore.php?format=geojson&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik

将以上url放入浏览器即可。它会返回一个响应，其中包含您要查找的线路的坐标。要在您自己的应用程序中使用它，您可能必须创建一个代理 servlet 以避免跨域脚本问题。

解析返回的响应。请注意，响应不是正确的 geojson（至少 ol3 可能理解它）所以您获取坐标，创建几何并将它们重新投影到您的 projection
最终将您的路线显示到您的地图并缩放到您的路线范围

这里有一个 fiddle 可以看到它的实际效果。请注意，我将上述请求的响应用作代码中的 json 对象。

更新

对 OSRM 的相同请求将是

https://api-osrm-routed-production.tilestream.net/viaroute?instructions=true&alt=true&loc=52.215676,5.963946&loc=52.2573,6.1799

这应该是 return 编码折线。所以你可以使用 ol.format.Polyline class 解码你的路线。检查这个 fiddle

Answer 2

考虑这个 fiddle 作为开始：

map.on('click', function(evt){
  utils.getNearest(evt.coordinate).then(function(coord_street){
    var last_point = points[points.length - 1];
    var points_length = points.push(coord_street);

    utils.createFeature(coord_street);

    if (points_length < 2) {
      msg_el.innerHTML = 'Click to add another point';
      return;
    }

    //get the route
    var point1 = last_point.join();
    var point2 = coord_street.join();

    fetch(url_osrm_route + point1 + ';' + point2).then(function(r) { 
      return r.json();
    }).then(function(json) {
      if(json.code !== 'Ok') {
        msg_el.innerHTML = 'No route found.';
        return;
      }
      msg_el.innerHTML = 'Route added';
      //points.length = 0;
      utils.createRoute(json.routes[0].geometry);
    });
  });
});

在Openlayers 3中使用OSRM Routing沿地图方向在地图上绘制折线

using OSRM Routing in Openlayers 3 to draw polyines on the map along the direction of the map

routing

openlayers-3

polyline

osrm