OpenLayersで作る地図には、いろいろなコントロールを設定できますが、これらのうち、簡単な地図の場合でも表示しておきたいコントロールを選んで追加してみます。
追加するコントロール
- Navigation 地図上には何も表示されれませんが、マウスアクション（ドラッグ、ダブルクリック、ホイールスクロール）を有効にします。
- KeyboardDefaults 地図上には何も表示されれませんが、カーソルキーで地図を移動可能にします。
- PanZoomBar パンとズームバーを表示します。
- LayerSwitcher レシピ1〜2ですでに出ていますが、レイヤーを選択できるコントロールを表示します。
- OverviewMap 小窓に概観図を表示し、どこを表示しているか示します。
- ScaleLine 左下にスケールを表示します。（CSSで書式を変更できます）
- Attribution レシピ1〜2ですでに出ていますが、著作権表示をします。（CSSで書式を変更できます）
LayerSwitcherとOverviewMapを開いた場合、次のようになります。
コントロールを追加するコード
|
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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レシピ３ 簡単なコントロールを使う</title> <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> function initMap(){ var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); /* コントロール群のオブジェクト Attribution：帰属を表示 KeyboardDefaults：カーソルキーで地図を移動可能に LayerSwitcher：レイヤーを選択できるコントロールを表示 Navigation：マウスアクション（ドラッグ、ダブルクリック、ホイールスクロール）を有効に OverviewMap：小さなオーバービューを表示 PanZoomBar：パンパネルとズームバーの両方を表示 ScaleLine：スケールライン（地図上での長さ）を表示 */ var controls_array = [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), new OpenLayers.Control.OverviewMap(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine({maxWidth:150,bottomOutUnits:"",bottomInUnits:"",geodesic:true}) ]; /* 地図オブジェクト 上記のコントロールも設定 */ var map = new OpenLayers.Map({ div: "map", controls : controls_array, projection: projection3857, displayProjection: projection4326, }); /* 地理院地図の標準地図レイヤ */ var cjstd = 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>", minZoomLevel: 2, maxZoomLevel: 18 }); /* 地理院地図のオルソ画像レイヤ */ var cjort = new OpenLayers.Layer.XYZ("オルソ画像", "http://cyberjapandata.gsi.go.jp/xyz/ort/${z}/${x}/${y}.jpg", { attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", minZoomLevel: 15, maxZoomLevel: 17 }); /* 地理院地図の白地図レイヤ */ var cjblk = new OpenLayers.Layer.XYZ("白地図", "http://cyberjapandata.gsi.go.jp/xyz/blank/${z}/${x}/${y}.png", { attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", minZoomLevel: 5, maxZoomLevel: 14 }); /* 作成した複数のレイヤをMapオブジェクトに追加する。 */ map.addLayers([cjstd,cjort,cjblk]); /* 地図初期表示の中心を指定 */ map.setCenter(new OpenLayers.LonLat(139.691706,35.689487) .transform(projection4326, projection3857), 5); } </script> <style> h1 { font-size: 130%; margin-bottom: 0.5em; border-bottom: 1px solid #fcb100; } #map { width:100%; height:600px; border:1px solid #CCC; } /* 著作権表示のCSS（レシピ1,2より若干変更 */ div.olControlAttribution { padding: 5px; color:#000000; background-color:rgba(230,255,255,0.7); font-size:12px; bottom:5px; border-radius: 5px; } /* スケールラインのCSS */ div.olControlScaleLine { background-color:rgba(255,255,255,1); font-size:12px; bottom:5px; } </style> </head> <body onload="initMap()"> <h1>レシピ３ 簡単なコントロールを使う</h1> <div id="map"></div> </body> </html> |
実行結果
上記のhtmlファイルを表示すると、下記のような結果となります。