購入して3ヵ月でBluetoothマウスが壊れました。。。
小さいのがほしくて「SANWA SUPPLY MA-BTLS21」を購入したのですが、
結構評判良くないみたいで、前もってレビューを見ておけばよかったです。。。
そんなわけで新しいマウス「Logicool Bluetooth Mouse M557」を購入しました。今度は壊れないことを祈っています。。。
OpenLayersで背景にOpenStreetMapを表示するためには下記のように記述します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>スカイツリー表示</title> <script src="http://portal.cyberjapan.jp/sys/OpenLayers-current/OpenLayers.js"></script> <script src="http://maps.google.co.jp/maps/api/js?sensor=false&language=ja®ion=jp"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} 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> <div id="map"> <script> var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); var map = new OpenLayers.Map({ div: "map", projection: projection3857, displayProjection: projection4326, }); // OpenStreetMap map.addLayer(new OpenLayers.Layer.OSM()); map.setCenter(new OpenLayers.LonLat(139.810595, 35.709891) .transform(projection4326, projection3857), 16); </script> </body> </html>
ファイルをHTMLで保存して実行すると下記のようにブラウザで表示されます。
初期表示位置・縮尺を変えたい時:
map.setCenter~の部分の記述を変更します。
日本全体表示
map.setCenter(new OpenLayers.LonLat(138.75, 35.999887) .transform(projection4326, projection3857), 5);
OpenLayersで背景にGoogleMapを表示するためには下記のように記述します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>スカイツリー表示</title> <script src="http://portal.cyberjapan.jp/sys/OpenLayers-current/OpenLayers.js"></script> <script src="http://maps.google.co.jp/maps/api/js?sensor=false&language=ja®ion=jp"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} 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> <div id="map"> <script> var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); var map = new OpenLayers.Map({ div: "map", projection: projection3857, displayProjection: projection4326, }); // GoogleMap map.addLayer(new OpenLayers.Layer.Google( "GoogleMap", {type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 22} )); map.setCenter(new OpenLayers.LonLat(139.810595, 35.709891) .transform(projection4326, projection3857), 16); </script> </body> </html>
ファイルをHTMLで保存して実行すると下記のようにブラウザで表示されます。
読み込む地図の種類を変えたい時:
map.addLayer~の部分の記述を変更します。
GoogleMapオルソ
// GoogleMapオルソ map.addLayer(new OpenLayers.Layer.Google( "GoogleMapオルソ", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22} ));
GoogleMapハイブリッド
// GoogleMapハイブリッド map.addLayer(new OpenLayers.Layer.Google( "GoogleMapハイブリッド", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22} ));
初期表示位置・縮尺を変えたい時:
map.setCenter~の部分の記述を変更します。
日本全体表示
map.setCenter(new OpenLayers.LonLat(138.75, 35.999887) .transform(projection4326, projection3857), 5);
OpenLayersとは、Webに地図を表示できるJavaScriptライブラリです。背景地図(地理院地図等)の表示やコントロールを、独自でカスタマイズしてWebGISとして公開するために利用します。
背景に地理院地図を表示するためには下記のように記述します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>スカイツリー表示</title> <script src="http://portal.cyberjapan.jp/sys/OpenLayers-current/OpenLayers.js"></script> <style> body {padding: 0; margin: 0} html, body, #map {height: 100%; width: 100%;} 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> <div id="map"> <script> var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); var 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(139.810595, 35.709891) .transform(projection4326, projection3857), 16); </script> </body> </html>
ファイルをHTMLで保存して実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」
読み込む地図の種類を変えたい時:
map.addLayer~の部分の記述を変更します。
淡色地図
map.addLayer(new OpenLayers.Layer.XYZ("淡色地図", "http://cyberjapandata.gsi.go.jp/xyz/pale/${z}/${x}/${y}.png", { attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>", maxZoomLevel: 17 }));
電子国土基本図(オルソ画像)
map.addLayer(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>", maxZoomLevel: 17 }));
初期表示位置・縮尺を変えたい時:
map.setCenter~の部分の記述を変更します。
日本全体表示
map.setCenter(new OpenLayers.LonLat(138.75, 35.999887) .transform(projection4326, projection3857), 5);
サンプルでは、HTMLにCSSも記述してありますがCSSの部分は別ファイルで管理した方が作業しやすいと思います。