様々な形式のデータを地図上に描画する¶
概要¶
この項目では、地理系のサービスにおいてGeoJSONやKML等、一般的に使用されているデータ形式を読み取り、地図上に描画する方法について説明します。
ナビタイムの路線形状配信API及び経路形状配信APIも、返却形式としてこれらのデータ形式を採用しているため、以下で説明する機能を使用することで簡単に取得したデータを地図上へ描画することができます。
なお、現在対応しているデータ形式は以下の通りです。
- GeoJSON
Contents
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プロパティが必須であることに注意して下さい。