Question

我想在我的地图上使用OSRM和Openlayers 3实现路由，但似乎不是任何地方的示例或教程。所有示例都令人困惑

来源参考1：http://workshop.pgrouting.org/chapters/ol3_client.html（在此示例中，我不知道从何处获取数据以绘制折线我将获取数据作为json，其中包含具有纬度和经度）

2：http://wiki.openstreetmap.org/wiki/Routing/online_routers不知道从哪里开始实现它

3：Openlayers 3中的OSRM路由

我能画直线但是我想沿着地图的方向画出不同的颜色线，我知道这个我必须使用方向服务可以任何身体请指向一些示例代码或发布任何帮助将是感恩的，请说一个完成它的方法

Answer 1

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

所以我们假设您将使用YOURS路由服务。信息和详细信息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

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

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

这是一个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

这应返回编码折线。因此，您可以使用ol.format.Polyline类解码您的路线。请检查此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路由在地图上沿地图方向绘制多边形

2 个答案: