Monthly Archives: 7月 2014

day #006

購入して3ヵ月でBluetoothマウスが壊れました。。。
小さいのがほしくて「SANWA SUPPLY MA-BTLS21」を購入したのですが、
結構評判良くないみたいで、前もってレビューを見ておけばよかったです。。。

そんなわけで新しいマウス「Logicool Bluetooth Mouse M557」を購入しました。今度は壊れないことを祈っています。。。

OpenLayers #003 – 背景地図(OpenStreetMap)の表示

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&region=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);

参考文献 –
OpenStreetMap API 実験室

OpenLayers #002 – 背景地図(GoogleMap)の表示

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&region=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);

参考文献 –
y2blog

OpenLayers #001 – 背景地図(地理院地図)の表示

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の部分は別ファイルで管理した方が作業しやすいと思います。

参考文献 –
地理院タイルを用いた開発