様々な形式のデータを地図上に描画する

_images/geojson.png

概要

この項目では、地理系のサービスにおいてGeoJSONやKML等、一般的に使用されているデータ形式を読み取り、地図上に描画する方法について説明します。
ナビタイムの路線形状配信API及び経路形状配信APIも、返却形式としてこれらのデータ形式を採用しているため、以下で説明する機能を使用することで簡単に取得したデータを地図上へ描画することができます。
なお、現在対応しているデータ形式は以下の通りです。
  • GeoJSON

GeoJSON

概要

GeoJSONクラスは引数で渡されたGeoJSON形式のデータとoptions(詳細は GeoJSON(API) を参照)を元に、地図上へルート線等を描画する機能です。
GeoJSONクラスでは描画の為のdraw()メソッドのみ提供しています。一度描画したオブジェクトに対して表示/非表示の切り替え等の操作をする場合は、draw()メソッドの戻り値として返却されるPolyline/Polygonオブジェクトの配列を操作して下さい。
具体的な操作方法については 地図上に図形やアイコンを表示する を参照してください。

Note

GeoJSONの書式については、http://www.geojson.org/ に準拠します。ただし、地図タイルスクリプトは世界測地系（wgs84）のみ対応しているため、それ以外の形式では正常に表示できません。

GeoJSONを使用して描画する

<サンプルソース>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>GeoJSONサンプル</title>
    <script charset="UTF-8" src="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
    <script>
      function init() {
        var yokohama = new navitime.geo.LatLng(35.467311,139.622948);
        var map = new navitime.geo.Map("map", yokohama, 15);

        var route = {
          "type":"FeatureCollection",
          "features":[
            {
              "type":"Feature",
              "geometry":{
                "type":"LineString",
                "coordinates":[
                  [139.621704,35.466909],
                  [139.621425,35.467136],
                  [139.620803,35.467014],
                  [139.619107,35.467923],
                  [139.618785,35.469723],
                  [139.615631,35.469076],
                  [139.615631,35.468866],
                  [139.614708,35.468587],
                  [139.612842,35.466175],
                  [139.612155,35.465389],
                  [139.60855,35.461054]
                ]
              }
            }
          ]
        };

        // mapプロパティとjsonプロパティは必須
        navitime.geo.GeoJSON.draw({map: map, json: route});
      }
    </script>
  </head>
  <body onload="init()">
    <div id="map" style="height:500px; width:800px"></div>
  </body>
</html>

サンプルを表示

サンプルでは、GeoJSON形式のオブジェクトを変数routeとして定義し、それをGeoJSONのdraw()関数の引数として渡しています。
coordinates変数に格納されている緯度経度の配列を、0番目から順に直線でつなげた線がルート線として描画されます。

Warning

optionsのmapプロパティ及びjsonプロパティが必須であることに注意して下さい。