WebGISアプリを作る場合、Googleマップを用いれば地図も綺麗だし、APIの書籍や解説サイトも多く出ており、やりやすいと思います。
しかしながら、業務で利用する場合はライセンスが問題になります。その解決策の1つとして、昨年秋にリニューアルされた国土地理院の「地理院地図」を利用してみることにします。
地理院地図は、以前は電子国土と呼ばれており、Ver1から4までプラグイン版とかプラグインなし版とかいろいろありました。また独自のAPIも提供されていました。新たな地理院地図からは独自のAPIは提供されないようなので、今後は別のGISライブラリを使用する必要があります。公式のサンプル集にもありますが、OpenLayersやLeafletといったものがあります。
以前、紹介したOpenLayers Starterのレシピをもとに、OpenLayersで地理院地図を表示する方法を確認していきます。
レシピ1:地理院地図 標準地図の表示
htmlファイル内にJavaScript,CSSとも含んでいます。解説は、以下のコードのコメント欄に出来るだけ詳しく記載しましたので参照ください。
[html title=’recipe01.html’]
// 地図初期化 function initMap(){ /* 座標変換用オブジェクト 地理院地図のタイルの座標系は世界測地系(WGS84 EPSG:3857)、 投影は球面メルカトル図法で作成されているため、これらを用いる */ var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326");
// mapオブジェクトを作成。後で出てくるdiv要素のid="map"のところに表示されます。 var map = new OpenLayers.Map({ div: "map", projection: projection3857, displayProjection: projection4326, });
/*ベースのMapレイヤを作成 Open Street Mapの場合は以下、 var osm = new OpenLayers.Layer.OSM("Simple OSM BaseMap"); 地理院地図の標準地図に置き換えた場合は以下*/ var cjstd = new OpenLayers.Layer.XYZ("標準地図", //XYZ形式(緯度、軽度、ズームレベル レイヤ名を指定 "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/${x}/${y}.png", { //地理院地図のタイルを指定 attribution: "国土地理院", //地理院地図の著作権表示 maxZoomLevel: 18 //省略すると15になったので指定する });
//作成したベースレイヤをMapオブジェクトに追加する。 map.addLayer(cjstd);
//Mapオブジェクトにコントロールを追加 今回はレイヤスイッチのみ map.addControl(new OpenLayers.Control.LayerSwitcher());
//Mapの中心(都庁)、初期ズームレベルを設定 map.setCenter(new OpenLayers.LonLat(139.691706,35.689487) .transform(projection4326, projection3857), 15); }
Recipe 1:地理院地図 標準地図の表示例