Help us understand the problem. What is going on with this article?

バスマップ用のデータをopenstreetmapから取り込む手順メモ

3行要約

  • openstreetmapからデータをダウンロードし、APIと変換ツールを用いてsvgにする
  • そのsvgをillustratorに取り込めば、バスマップ制作の大幅な手順省略が可能
  • でも日本のバス停情報ってopenstreetmapは充実してない

はじめに

illustratorでバスマップを制作するの、とても面倒ではないですか?

バスマップ制作は好きですが、デザインだけではバスマップは成り立たないのが難しい所。データ入力や複雑な加工手順は、多少慣れた私としても、どうしても抵抗があります。

人間はやはり楽をしたいというもの。「データ入力や、バス以外の簡単な情報記載は省力化したい!」と模索していた所、既に2年も前に、答えがmediumに投稿されていました。

https://medium.com/@sinclarius/lets-make-some-vector-maps-792481d5f328

ざっくりいうと、openstreetmapからデータを取り込んで、べクターマップを作ろう!という投稿です。今取り上げたこの記事とその関連情報も含めて、ここではopenstreetmapを用いたバスマップ制作の省力化、そしてその課題についてメモします。

openstreetmapについて

ここでは簡単に。openstreetmapとは、誰でも編集でき、かつ利用しやすい地図サービスになります。編集時の著作物持ち込みと、利用時のライセンス表記には厳格ですが、誰でも簡単に、幅広く利用できるデータを入手できます。

例えば、こんなデータがopenstreetmapにはあります。

  • ほとんどの道路
    • むしろ、openstreetmapにない道路を探す方が大変
  • 恐らく全ての鉄道路線、駅
    • 欠けている駅を見たことがない
  • 多くの公共施設や商業店舗
    • ただしエリアによっては情報が著しく古い

(比較的緩いとはいえ)ライセンスに縛られることにはなりますが、これらのデータをバスマップ制作に取り入れることで、バスマップ制作のデータ入力手順が簡単になります。

実際にデータを取り入れてみよう

データの流れとしては

  1. overpassAPIでopenstreetmapからgeojsonを入手
  2. geojsonを変換ツールでsvgに
  3. svgをillustratorに取り込む

となります。

overpassAPIでgeojsonをダウンロードする

クエリについて

では、openstreetmapからデータを入手します。ただし、一定エリア内の全てのデータをダウンロードしては、openstreetmapのサーバーに負荷がかかりますし、こちらとしても不要なデータが多すぎて困ります。そこで、overpassAPIなるものを用いて、欲しいデータのみに絞り込んでダウンロードします。

overpassAPIについては、先述のmedium記事や、wikiのoverpassAPIについてが非常に参考になると思います。

overpass-turboでプレビュー

ここでは、overpass-turboというサービスを利用します。web上でAPIのプレビューを行い、出力もしてくれるサービスです。

webサイトを開くと、左にクエリ書き込み、右にプレビューページがあります。さっそく、左に以下のようなクエリを書き込んでみます。

// まず鳥取県東部の自治体を指定し、aという集合へ
area[name~"鳥取市|八頭町|若桜町|智頭町|岩美町"]->.a;
//---------------------------------------------
// エリアa内のリレーションのうち、日本交通が運行事業者として指定されているものを全て選択
// リレーション(エリアフィルター)[タグフィルター]
// 他にも、route="bus"などの指定方法あり
rel(area.a)[operator="日本交通"];
//---------------------------------------------
// 指定したリレーションが含むnodeやwayを返す
>;
//---------------------------------------------
// 以上を結果として返す。out bodyの省略形
// <-ちなみにこれはコメント行のマーク
out;

実行ボタンを押す、またはctrl+enterで実行してくれます。実行後は、プレビュー画面の「データへズーム」ボタンを押すと、該当範囲まで瞬時に移動してくれます。

すると、鳥取周辺の日本交通のバス路線+バス停のうち、openstreetmapに登録されているものが描画されます。バス停やバス系統をクリックすると、その情報も確認できます。

正直overpassAPIのQLは勉強中で、私の知識は浅いですが、例えば他にはこんな例があります。

area[name~"鳥取市|八頭町|若桜町|智頭町|岩美町"]->.a;
node(area.a)[highway="bus_stop"];
out;

正規表現も使用できますし、駅から半径Xm以内、などの条件も簡単です。ただし、openstreetmapの仕様の知識が必要です。バス路線の仕様については、以下などを見ると、ある程度理解できると思います。

overpass-turboでエクスポート

なお、忘れてはならないのが、ここはまだプレビューしている段階ということです。上のメニューバーから「エクスポート」を選択し、「ダウンロード/GeoJSONとしてコピー」の「ダウンロード」をクリックしましょう。

export.jsonは、ダウンロードされましたか?そのexport.jsonをもとに、次にsvgデータへ変換してみましょう。

mapshaperでSVGにする

SVGへの変換方法は色々ありますが、ここではmapshaperなるものを用います。このツールはgithubでデータが公開されていますが、今回はオンラインで用います。

使い方は簡単!

  1. 上記サイトを開き、ドラッグ・アンド・ドロップなどでexport.jsonを放り込む
  2. 「import」ボタンでimportする
  3. 上のバー中央にある「(ファイル名)▼」ボタンから、可視化するレイヤーを選択し確認
    • 因みに前章のexport.jsonであれば、バス停とバス経路の2レイヤー
  4. (2019/08/17追加)上のバー右にあるconsoleを開き、以下を入力
    // ウェブマップタイル向けの図法を指定する
    // これを指定しないと縦横比がおかしくなる
    -proj +init=EPSG:3857
  1. 上のバー右上にある「export」ボタンを選択
  2. 出力形式をsvgにし、export
    • 出力対象のレイヤーにチェックが入っているか確認を

因みに私の場合、なぜかバス経路レイヤーが可視化されていなかったので、最初は少し動揺しました。

svgをIllustratorで読み込む

ここまでくれば、もう終わったようなもの。Adobe illustratorでsvgを開けば、先程のデータを取り入れることが出来ます。が、いくつか注意点があります。

  1. バス停などは点のデータなので、表示スタイルを変えないと見えない
    • データが見えなくても、焦らずにアウトライン表示や線端の設定を見直すこと
  2. 縮尺や位置を合わせる必要がある
    • 自分で調整してillustratorのバスマップデータに取り入れる必要がある
    • 例えばリンク配置機能を利用して調整するなど
    • ベクターデータなので、正確に合わせた後に線や点として取り込むことは可能
  3. もちろん、最終的なライセンス表記は忘れずに

openstreetmapのデータを取り込む際の課題

お手軽で、簡単に見えるこの方法。しかし、実はこの方法、非常に大きい課題が1つあります。そう、

openstreetmapでのバスの情報が不足している

のです。これは非常に深刻な問題で、データを取り込みたくても、「あるはずのバス停が記載されていない!」「バス系統が記載されていないぞ?」という状況。マッパー(openstreetmapへの情報記載者)の絶対数が足りず、「バスについて記す人」の有無によって、地域によってデータの充実度合いに、明らかな格差があります。

ぜひopenstreetmap.orgの交通レイヤーを見てください、バスが記載されている(赤色の線)がある都市、日本にいくつあります?

つまり、データが充実していなければ、この方法を採用する効果が薄い。これが大きな課題です。どうしよう。

終わりに

うまいこと省力化できそうなことは分かりましたが、データが揃っていない現状を見ると、この方法は難しいかもしれません。

自分も過去に、講義の一環で鳥取のバスのデータを作成しました。しかし、その作業が何に役に立つのか意味を見いだせず、面倒に感じられて、その後は一切手を付けていません。これを機会に、ちょっとマッピングしようか迷っています。

加えて、いくつかまだ調べる必要のある事項があるので列挙します。

  • ラベルってどうやって付与するの?
    • バス停名や系統名はopenstreetmapに登録されているはず
    • 一緒に取り込みたいけれども?
  • svgを取り込み調整する際の、賢い方法は無いの?
    • ここが完全手動だと手間が増える
    • 地図タイルに合わせるなどできれば、完璧

これらについて情報があれば、ぜひ教えて下さい!

追記(2019/08/16->解決済)

出力したSVGデータ、どうも縦横比がおかしいんですよね。出力時に図法がどこかで変わったのだと思うのですが、修正方法が見当も付きません。解決策情報求む……

-> consoleで、図法をきちんと指定することで解決しました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away