LoginSignup
8
7

More than 5 years have passed since last update.

Google Mapsに鉄道路線を描画しよう

Last updated at Posted at 2018-12-08

ヴァル研究所アドベントカレンダー2018の9日目です。

こんな風にGoogle Maps上に鉄道路線を描画したいと思ったことはありませんか?
image.png
(東京の京王線を描画した状態)

もちろん座標データさえあればpolylineで描画できますが、そのデータをどこから入手するかが問題です。

1. 駅の緯度経度を結ぶ方法

駅すぱあとWebサービスの有償版を使うと、路線名で指定した路線上の全駅情報(緯度経度込み)を取得したり、経路探索してその経路で通過する全駅の情報を取得できたりします。駅を結ぶ折れ線でよければ、単純にこの緯度経度をpolylineで結ぶだけです。

2. 国土数値情報を使う方法

国土交通省が公開している国土数値情報の中に、鉄道データというものがあります。
国土数値情報のライセンスはデータごとに定められており、ものによっては商用利用不可だったりするのですが、本記事の方法で鉄道データを描画することは

(3) 商用不可の「国土情報」であっても、図化したり、GISによって空間演算した結果(データベースでないもの)については、原典及び加工者名を明示することによって、申請無しに再配布可能です。ただし、利用の成果物がGIS型式やエクセル型式等の データベースの場合は、データベースの著作権の侵害のおそれがありますので、国土情報ダウンロードサービス事務局にお問い合わせください。
http://nlftp.mlit.go.jp/ksj/other/yakkan.html

に該当するので商用利用可であると私は解釈しています。

さて、こちらのURLから N02-17_GML.zip (平成29年)をダウンロードすると、下記のように様々な形式のファイルが入っています。

KS-META-N02-17.xml
N02-17.xml
N02-17_RailroadSection.dbf
N02-17_RailroadSection.geojson
N02-17_RailroadSection.prj
N02-17_RailroadSection.shp
N02-17_RailroadSection.shx
N02-17_Station.dbf
N02-17_Station.geojson
N02-17_Station.prj
N02-17_Station.shp
N02-17_Station.shx

この中の N02-17_Station.geojson をWebサーバに配置し、同ディレクトリに下記の index.html を作成して配置します。(アクセスキーを入れてねの部分を書き換えてください)

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>地図</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=アクセスキーを入れてね"></script>

    <script>
      var map;

      $(function() {
        var center = new google.maps.LatLng(35.6813095277778, 139.76723425);
        var gmap_options = {
          zoom: 11,
          center: center,
        };
        map = new google.maps.Map(document.getElementById("gmap"), gmap_options);

        map.data.loadGeoJson("./N02-17_RailroadSection.geojson");
        // スタイルの設定
        map.data.setStyle(function(feature) {
          return ({
            strokeColor: "#0000ff",
            strokeWeight: 2,
            clickable: true,
            zIndex: 1
          });
        });
      });
    </script>

    <style>
      html, body  { height: 100%; }
      div#gmap { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <div id="gmap"></div>
  </body>
</html>

ブラウザでアクセスしてみると、数秒して全国の路線が全部表示されるはずです。どうでしょうか?
(Webサーバに配置せず file:// スキームで開くとエラーになると思います。 loadGeoJson はXHRでファイルをロードするためです)

スクリーンショット 2018-12-05 9.50.33.png

国土数値情報がgeojson形式で配布してくれていて、Google Mapsにgeojsonを描画するメソッドがあったので一発でしたね。あとはgeojsonファイルから描画したい部分を抜き出すなど、必要に応じて加工すればよいかと思います。

以上です。

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7