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

オンライン サービスの使用を開始し、快適に感じたら、独自のサービスを作成します (必要な場合)。

YOURSルーティングサービスを使用すると仮定しましょう。情報と詳細はこちら

  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

上記の URL をブラウザに入力するだけです。探している線の座標を含む応答が返されます。独自のアプリで使用するには、おそらくプロキシ サーブレットを作成して、クロス ドメイン スクリプティングの問題を回避する必要があります。

  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 に答える