[Work/Class/Google Maps APIの基礎/basic]

GoogleMaps APIの基礎 - 曲線ルートの表示

ルートラボの道ピタモード

緯度経度を指定して線を引く方法を前回やったが，道路の経路を描くためには，いちいち緯度経路を調べるのは面倒くさい．そこで他のツールを使って生成したいど経度のデータをGoogleMaps APIを使って表示する．

GoogleMapsも経路探索などでルートを生成できるが，任意のルート，特に折り返しなどを含む場合，「ルートラボ」の「道ピタモード」で書くのが便利．

ルートラボの画面

一番左のアイコン「道ピタモード」になっていることを確認し，地図上をクリックしてルートを作成する．作成したら左下の「エクスポート」．

ルートラボでKMLエクスポート

「KMLでエクスポート」

すると，route.kmlという名前でダウンロードされる．

KMLの中身をエディタで開くと以下のようになっている． 

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<Style>
<LineStyle>
<color>99ff0000</color>
<width>6</width>
</LineStyle>
</Style>
<LineString>
<coordinates>
139.36811305555557,35.662075,113
139.36820111111112,35.661613055555556,113
139.36821305555554,35.661455,112
139.36821305555554,35.661355,112
139.36820111111112,35.66087111111111,112
139.36816305555556,35.66007111111111,112
139.3681511111111,35.659638055555554,112
139.36811305555557,35.659155,112
139.3680688888889,35.65915805555556,112
139.3680688888889,35.65915805555556,112
139.36811305555557,35.659155,112
139.36897611111112,35.65908805555556,111
139.37012611111112,35.659013055555555,110
139.37021305555555,35.659013055555555,110
139.37116305555554,35.658955,110
139.37180111111113,35.65889694444444,109
139.37218,35.65886805555556,109
139.3721788888889,35.65886805555556,109
139.37223805555556,35.65886305555556,109
139.37228805555554,35.65938,109
139.3723011111111,35.65949694444444,109
139.3723261111111,35.659638055555554,109
139.37237611111112,35.659838055555554,109
139.3724511111111,35.65999611111111,109
139.37260111111112,35.66026305555555,109
139.37276305555557,35.660455,109
139.3729011111111,35.66058805555556,108
139.37301305555556,35.66069611111111,108
139.37333805555556,35.66088805555555,108
139.37413805555556,35.66131305555555,107
139.3741311111111,35.66135111111111,107
139.3741311111111,35.66135111111111,107
139.37413805555556,35.66131305555555,107
139.37477388888888,35.66164805555555,107
</coordinates>
</LineString>
</Placemark>
</Document>
    </kml>

要するにLineStringの中に座標(coordinate)が大量に並んでいる，という形である．

color(線の色)やwidth線の太さなどは，エディタで直接編集できる．

このKMLファイルはインターネットからアクセスできる領域に置いておく必要がある．(Googleのシステムがそれを取得して表示する形式にしてくれるため）授業用のWebサーバの個人領域に置いておくこと．

JavaScriptのコードは以下の通り． 

// display_kml.js
 window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    zoom: 16
  };

  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // KMLを表示するためのレイヤーのプロパティ
  const kmlLayerElements = {
    // KMLファイルのURL
    url: 'http://cad.lolipop.jp/data/from_latlonglab.kml',
    // インターネットから探せるサーバ上においておき，そのURLを記述する．
    //ルートの場合関係ないが，レイヤ上のオブジェクトの方がInfoWindowよりも上にくる（抑制する）
    suppressInfoWindows: true,
    // 地図オブジェクト
    map: myMap
  };
  // KMLを表示するためのレイヤーのコンストラクタを実行する．
  // これを実行すると，Googleのシステムが上記KMLファイルを読み込んで来て，表示してくれる
  // もちろん複数作ることもできる．
  const kmlLayer = new google.maps.KmlLayer(kmlLayerElements);
}); // window.addEventListenerに登録する関数オブジェクトここまで