WebGISアプリを作る場合、Googleマップを用いれば地図も綺麗だし、APIの書籍や解説サイトも多く出ており、やりやすいと思います。
しかしながら、業務で利用する場合はライセンスが問題になります。その解決策の1つとして、昨年秋にリニューアルされた国土地理院の「地理院地図」を利用してみることにします。
地理院地図は、以前は電子国土と呼ばれており、Ver1から4までプラグイン版とかプラグインなし版とかいろいろありました。また独自のAPIも提供されていました。新たな地理院地図からは独自のAPIは提供されないようなので、今後は別のGISライブラリを使用する必要があります。公式のサンプル集にもありますが、OpenLayersやLeafletといったものがあります。
以前、紹介したOpenLayers Starterのレシピをもとに、OpenLayersで地理院地図を表示する方法を確認していきます。
レシピ１：地理院地図 標準地図の表示
htmlファイル内にJavaScript,CSSとも含んでいます。解説は、以下のコードのコメント欄に出来るだけ詳しく記載しましたので参照ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>recipe01</title> <!-- OpelLayesのライブラリを読み込み --> <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> <!-- 地図表示用スクリプト --> <script type="text/javascript"> // 地図初期化 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: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", //地理院地図の著作権表示 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); } </script> <style> h1 { font-size: 130%; margin-bottom: 0.5em; border-bottom: 1px solid #fcb100; } #map { width:100%; height:600px; border:1px solid #CCC;} /<em>地理院地図の著作権表示のスタイル</em>/ div.olControlAttribution { padding: 3px; color:#000000; background-color:#ffffff; background-color:rgba(230,255,255,0.7); font-size:12px; line-height:14px; bottom:5px; vertical-align: middle; } </style> </head> <!-- body読み込み時にinitMapを実行します。 --> <body onload="initMap()"> <h1>Recipe 1：地理院地図 標準地図の表示例</h1> <!-- ここに地図が表示されます。 --> <div id="map"></div> </body> </head> </html> |
実行結果
上記のhtmlファイルを表示すると、下記のような結果となります。
右上の青色の＋マークのところがレイヤスイッチです。現在はベースレイヤが1つ「標準地図」のみ表示されています。
右下には国土地理院の著作権が表示されます。これは公式サイトのサンプルに準じています。