今回はms4wに日本地図を載せてみます。
その際テストPCがインターネット回線に接続されている必要があります。
まずは OpenLayersのホームページからオープンソースのGISライブラリのOpenLayersをダウンロードしてきます。
2014/08時点では2.13-1が最新バージョンとなりますが、2.13と2.12で大きく構文が変わっているため、まずはOlder Vesionから2.12をダウンロードします。
これをms4w/apps配下に解凍します。
次にms4w/http.dにOpenLayers-2.12.confという名前の空ファイルを作成し、中身を下記の内容にします。
Alias /OpenLayers-2.12/ "C:/ms4w/apps/OpenLayers-2.12/" <Directory "C:/ms4w/apps/OpenLayers-2.12/"> AllowOverride None Options Indexes FollowSymLinks Multiviews Order allow,deny Allow from all </Directory>
次にms4w/Apache/htdocsフォルダにopenlayers.pkg.html
という名前の空ファイルを作成し、中身を下記の内容にします。
<h3>OpenLayers 2.12</h3> <blockquote> <p><a href="/OpenLayers-2.12/examples/">Examples</a></p> </blockquote> <h3>test</h3> <blockquote> <p><a href="/OpenLayers-2.12/test.html">test</a></p> </blockquote>
最後にms4w/OpenLayers-2.12/ にtest.htmlという名前の空ファイルを作成し、中身を下記の内容にします。このときファイルの保存エンコードをUTF-8にしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://localhost/OpenLayers-2.12/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(138.7313889, 35.3622222)
.transform(projection4326, projection3857), 5);
</script>
</body>
</html>
たったこれだけの準備で準備完了です。
まずはms4w/apache-restart.batを管理者権限で実行し、その上でhttp://localhostにアクセスしてください。
するとms4wのページが表示されますが、ページの下部にtestというリンクが追加されていますので、これをクリックしてください。
すると国土地理院提供の地理院地図が、あなたの作成したサーバページの中に参照表示されます。ドラッグでの地図移動、スワイプやマウスホイールでの拡大縮小に対応しています。
※国土地理院提供のサンプルと同等
２回目は駆け足ですがOpenLayersの上に地理院地図を載せてみたところまでとなります。
３回目はGISの技術的な話からは少々脱線する話となりますが、
地理院地図の細かな利用規約と
地理院地図を使うメリット・デメリット、
地理院地図の代替案といったところをお話しする予定です。