OSRMのルート検索結果をOpenStreetMapの地図上に描画する

前回はPC上にOSRMのサーバを用意し、ルート検索を実行するまでの流れを確認した。

bannyaaa.hatenablog.jp

今回はその続きとして、OSRMのサーバから返されたルート検索結果を、Leafletを用いてOpenStreetMapの地図上に描画する。

環境

OS: Windows 11 Home: 21H2
Leaflet: 1.8.0
Chrome: 104.0.5112.81
OSRMのサーバ周りの環境は前回の記事を参照

地図の表示とルートの描画

ルート描画時に背景となる、OpenStreetMapの地図タイルを表示する仕組みを用意する。LeafletのQuick Start Guideを参考に、以下のHTMLファイルをつくる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>OSRM routing</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" 
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
</head>
<body>
  <div id="map" style="height:600px"></div>
  <script>
    // 東京駅と羽田空港が収まる地図の初期表示位置
    let map = L.map('map').setView([35.61, 139.78], 12);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
  </script>
</body>
</html>

地図タイルの表示ができたところに、ルートを描画する仕組みを追加する。OSRMのサーバに対してルート検索のリクエストを実行し、そのレスポンスから抽出したGeoJSON形式のジオメトリをLeafletに渡す処理を書けばよい。上記のHTMLファイルに追記するJavaScriptのコードは以下のとおり。

// ローカルPC上のOSRMサーバで東京駅から羽田空港までのルートを検索するURL
const url = 'http://127.0.0.1:5000/route/v1/driving/139.7681482,35.6798851;139.7845835,35.5491518?geometries=geojson&overview=full'

async function addRouteLayer(){
  const response = await fetch(url);
  const json = await response.json();
  L.geoJSON(json['routes'][0]['geometry']).addTo(map);
}

addRouteLayer();

なお、json['routes'][0]['geometry']とアクセスすることで、以下のGeoJSON形式のジオメトリが抽出できている。

{"coordinates":[[139.768429,35.679767],[139.768491,35.679864],[139.768635,35.68016],[139.769065,35.680895],
...省略...
[139.784785,35.549047],[139.784681,35.549197]],"type":"LineString"}

できあがり

最終的にできあがったHTMLファイルは以下のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>OSRM routing</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" 
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
</head>
<body>
  <div id="map" style="height:600px"></div>
  <script>
    // 東京駅と羽田空港が収まる地図の初期表示位置
    let map = L.map('map').setView([35.61, 139.78], 12);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // ローカルPC上のOSRMサーバで東京駅から羽田空港までのルートを検索するURL
    const url = 'http://127.0.0.1:5000/route/v1/driving/139.7681482,35.6798851;139.7845835,35.5491518?geometries=geojson&overview=full'

    async function addRouteLayer(){
      const response = await fetch(url);
      const json = await response.json();
      L.geoJSON(json['routes'][0]['geometry']).addTo(map);
    }

    addRouteLayer();
    
  </script>
</body>
</html>

ローカルPC上でOSRMのサーバを立ち上げた状態で、このHTMLファイルをChromeで開くと、東京駅から羽田空港までのルートが青線で描画されていることが確認できる。