前回はPC上にOSRMのサーバを用意し、ルート検索を実行するまでの流れを確認した。
今回はその続きとして、OSRMのサーバから返されたルート検索結果を、Leafletを用いてOpenStreetMapの地図上に描画する。
環境
地図の表示とルートの描画
ルート描画時に背景となる、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: '© <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: '© <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で開くと、東京駅から羽田空港までのルートが青線で描画されていることが確認できる。
