1

我想使用 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路由

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

4

2 回答 2

2

开始使用在线服务,如果您对它感到满意,请自行开发(如果需要)

所以让我们假设您将使用您的路由服务。信息和细节在这里

  1. 创建一个 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 以避免跨域脚本问题。

  1. 解析返回的响应。请注意,响应不是正确的 geojson(至少 ol3 可能理解它),因此您获取坐标,创建几何并将它们重新投影到您的投影

  2. 最后将您的路线显示到地图上并缩放到您的路线范围

这是一个小提琴,可以看到它的实际效果。请注意,我将上述请求的响应用作代码中的 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因此,您可以使用该类解码您的路线。检查这个小提琴

于 2016-01-04T10:36:12.483 回答
1

考虑这个小提琴开始:

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);
    });
  });
});
于 2016-02-17T19:21:27.687 回答