Route 360 API を利用してレンダリング！移動可能範囲を可視化したマップが面白い！

doxas : 2016-07-07 13:06:15

移動手段が変わってもきちんと可視化！

今回ご紹介するのは、徒歩や自転車など、様々な手段を用いた場合の移動可能な範囲を地図上にマッピングするという、非常に面白いデモ作品です。

私は知らなかったのですが、ルート検索などを行うことができる Route 360 API を利用することで今回のようなデータの可視化が可能みたいですね。これは面白い。

描画部分は WebGL で実装されていますが、描画だけでなく、このような面白いデータが可視化されている点がとても貴重な一作だなと感じました。

今回の作品は Leaflet や Mapbox などの地図を描画する仕組みをうまく活用しながら、そこに WebGL の描画を合成しています。

表示されるのは、現在選択中の移動手段で、特定の時間を用いてどこまで到達できるのか、という情報です。

たとえば「徒歩」ではここまで、「自転車」ならここまで、といったように、移動手段に応じて移動可能な範囲がカラフルなラインで描画されます。

マップは黒をベースにしたカラーリングになっており、WebGL の描画レイヤーの様子が視覚的に非常にわかりやすくなっています。

現在地のアイコンの周辺だけに色が付いているのがわかると思いますが、これが移動可能範囲を表しているようですね。

画面の左上のところにボタンが並べられていて、ここから移動手段の足をどれにするのか決めることができます。上の画像は、徒歩の場合の描画結果ですが、これを自転車へと変更するだけで、下の画像のように大きく到達可能な地域が広がるのがわかります。

また、画面の左上のほうには、まるでヒートマップのようなカラーバーが設置されているのがわかると思います。

こちらは、移動時間を任意に変更することができるスライダーになっており、デフォルトでは 30 分が選択された状態になっています。

最大で 120 分まで移動時間を増やすことができるようになっており、さすがに 2 時間もあると、徒歩でもかなりの距離を移動できることがマップ上で確認できます。

以下のふたつの画像は、上段が車での 30 分、下段が徒歩での 2 時間です。同じ縮尺で見てみると、違いがわかりやすいですね。

今回のデモで利用されている Route 360 という API は、経路探索などの技術を提供している API のようで、上の車での移動結果を見るとわかるように、直進できる入り組んでいない経路では、より到達距離が延びるなどかなり信憑性の高い結果を返してくれるようですね。

このような経路探索的なことが行える API って、あまり可視化されているところを個人的には見たことがないのですが、今回のデモのように WebGL を利用しつつ美しく可視化すると、なんとも面白く興味深いデモになるのだなと感じました。

描画自体はそれほど難しいことをしているわけではないと思うのですが、API をたくさん使っているためか、若干動作は重く感じられるかもしれません。

しかしちょっと待てば結果はすぐに表示されますし、内容を考えれば十分に楽しい、素晴らしい作品だと思います。