目次
電子国土から地理院地図へ移行
したのが、もう半年以上も前のことでした。
今後は電子国土プラグインのサポートもされないということなので、以前に作ったプラグインバージョンの地図アプリケーションを地理院地図対応へバージョンアップする必要が生じました。電子国土プラグインはAPIも整備されており開発しやすかったのですが、今後の地理院地図ではAPIは提供されず、オープンソースのライブラリ(Openlayers や Leafletなど)を用いて開発しなければならないようです。
以前に作ったアプリケーションの一つの機能として簡単なものですが、複数の位置情報を地図上にプロットするというものがあります。Webアプリケーションならサーバー任せでkmlファイルを作って表示させれば良いと思いますが、ユーザーが使うExcelのデータを簡単にプロットできる方法はないかと考えていました。
Excel側でデータを変換しkmlファイルを作ってサーバーにアップロードして…というのも考えましたが、検討したところkmlを使わずにもっと簡単な方法でできることがわかりました。
マップ用のHTMLを準備
サーバーに設置するマップ用のHTMLファイルを作成します。セオリーは公式サイトに記載されていますので、これを参考にします。
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>putMarkers Test</title> <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 640px; width: 640px;} 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> <script type="text/javascript"> var map = null; var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); var markers = new OpenLayers.Layer.Markers("Markers"); var size = new OpenLayers.Size(21,32); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var bounds = new OpenLayers.Bounds(); function init(){ map = new OpenLayers.Map({ div: "map", projection: projection3857, displayProjection: projection4326, }); map.addLayer(new OpenLayers.Layer.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: 17 })); map.setCenter(new OpenLayers.LonLat(138.7313889, 35.3622222) .transform(projection4326, projection3857), 5); map.addLayer(markers); } function putMarkers(lon,lat,ico){ var icon = new OpenLayers.Icon(ico,size,offset); var lonlat = new OpenLayers.LonLat(lon,lat); lonlat.transform(projection4326,projection3857); markers.addMarker(new OpenLayers.Marker(lonlat,icon)); bounds.extend(lonlat); markers.map.zoomToExtent(bounds); } </script> </head> <body onload="init();"> <div id="map"></div> <div id="description"></div> </body> </html> |
1~6行目 Openlayersのライブラリ指定など
冒頭部分では、metaタグやタイトルを設定するほか、用いるOpenlayersライブラリを指定します。公式のアドレスを指定しておけば安定版の最新版を常に使えます。
8~21行目 スタイルの指定
地図描画範囲などのスタイルを指定します。
11行目からのdiv.olControlAttributionは、国土地理院の著作権表示用のスタイルです。
23~30行目 マップ表示用スクリプトの作成開始
24行目からはグローバル変数の宣言をしています。
24行目:地図の実体。initが実行されるまではnullにしておきます。
25行目:地図投影に真球疑似メルカトル投影を使用
26行目:地図表示に経緯度を使用
27行目:マーカー表示用のレイヤ
28行目:マーカーの表示サイズ。pngの実際のサイズと一致していなくても可
29行目:マーカー表示のオフセット位置。左上を原点としているので、ピン形状など下中央を中心座標とする場合は、幅の半分と高さの分をマイナスで指定します。
30行目:地図の表示範囲用の境界
32~50行目 地図の初期化
34〜38行目:地図インスタンスを生成します。後でbody内に出てくる div id=”map” の場所に挿入されます。また、前述で定数定義した地図投影と地図表示を指定します。
40〜44行目:生成した地図に地理院地図をベースレイヤとして追加します。42行目は著作権表示しています。
46〜47行目:指定の緯度経度を表示の中心に指定します。
49行目:マーカー用のレイヤを重ねます。
52~61行目 マーカー配置関数
Excelから実行する関数を定義します。
引数 lon:経度, lat:緯度, ico:アイコンのパス(Excelから指定)
53〜55行目:アイコンとその位置情報(投影を反映して変換)を設定します。
56行目:マーカーを配置します。
57〜58行目:表示領域をそのアイコンの座標を含めて拡張し、その領域にズームします。
62行目〜66行目 body部分
62行目:bodyが表示されるときに、初期化関数initが呼ばれるようにします。
63〜64行目:地図領域と説明領域を指定します。
Excelのファイルは次のエントリに分割します。