OpenLayersでOSRM（Open Source Routing Machine）を利用する

WebGISにてgoogle以外で、ナビゲーション機能を実装しようと思い調査してみると、OSRM（Open Source Routing Machine）といって、OpenStreetMapのデータの上で最適なルートを返してくれるAPIが提供されているので、OpenLayers上で試してみました。

OSRMとは？

OSRMは、最短ルートを高速に計算できるルーティングエンジンです。以下の特徴があります。

ルーティングエンジン
- 地図上で「A地点からB地点へ最短ルートを出して！」というリクエストに応えるソフトウェア
ベースデータ
- OpenStreetMap（OSM）を利用
超高速
- C++で書かれており、大量リクエストにも耐える性能

OSRMで何ができるか？

OSRMでは以下の機能が提供されています。

経路探索
- A地点からB地点への最短・最速ルートを計算
距離行列
- 複数地点間の移動距離・時間のマトリクスを作成
経路の案内
- 分岐やターンの指示（ナビのような案内）
ルートのジオメトリ
- 経路の線（GeoJSON形式など）を返す

OSRMの使用例

osrm.js

  const map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([139.6917, 35.6895]), // 東京
      zoom: 12
    })
  });

  let startPoint = null;
  let endPoint = null;
  const routeLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      })
    })
  });
  map.addLayer(routeLayer);

  map.on('click', function(e) {
    const coord = ol.proj.toLonLat(e.coordinate);
    if (!startPoint) {
      startPoint = coord;
      alert(`出発地点: ${coord}`);
    } else if (!endPoint) {
      endPoint = coord;
      alert(`到着地点: ${coord}`);
      getRoute(startPoint, endPoint);
    } else {
      // リセット
      startPoint = coord;
      endPoint = null;
      routeLayer.getSource().clear();
      alert(`出発地点をリセット: ${coord}`);
    }
  });

  function getRoute(start, end) {
    const url =
      `https://router.project-osrm.org/route/v1/driving/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const route = data.routes[0].geometry;
        const routeFeature = new ol.format.GeoJSON().readFeature({
          type: 'Feature',
          geometry: route
        }, {
          featureProjection: map.getView().getProjection()
        });

        routeLayer.getSource().addFeature(routeFeature);
      });
  }

const map = new ol.Map({

target: 'map',

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

view: new ol.View({

center: ol.proj.fromLonLat([139.6917, 35.6895]), // 東京

zoom: 12

})

});

let startPoint = null;

let endPoint = null;

const routeLayer = new ol.layer.Vector({

source: new ol.source.Vector(),

style: new ol.style.Style({

stroke: new ol.style.Stroke({

color: 'blue',

width: 3

})

});

map.addLayer(routeLayer);

map.on('click', function(e) {

const coord = ol.proj.toLonLat(e.coordinate);

if (!startPoint) {

startPoint = coord;

alert(`出発地点: ${coord}`);

} else if (!endPoint) {

endPoint = coord;

alert(`到着地点: ${coord}`);

getRoute(startPoint, endPoint);

} else {

// リセット

startPoint = coord;

endPoint = null;

routeLayer.getSource().clear();

alert(`出発地点をリセット: ${coord}`);

}

});

function getRoute(start, end) {

const url =

`https://router.project-osrm.org/route/v1/driving/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson`;

fetch(url)

.then(res => res.json())

.then(data => {

const route = data.routes[0].geometry;

const routeFeature = new ol.format.GeoJSON().readFeature({

type: 'Feature',

geometry: route

}, {

featureProjection: map.getView().getProjection()

});

routeLayer.getSource().addFeature(routeFeature);

});

}

OSRM利用後の地図

通勤経路を表示してみました。ほぼ合っています。

まとめ

OSRM利用することで、経路探索が非常に簡単に実装できるようになりました。
次回は経路案内の情報（分岐やターンの指示）が取得できているので、経路案内を表示してみたいと思います。

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30