久しぶりのWebGIS構築の説明です。
今回は準備したESRI Shape形式のデータを
ms4wで表示するための設定の作成となります。
まずはその２で作った環境を再利用します。
データのうちサンプルとして利用するのは
道路構成線データのみとします。
前回作成したESRI Shape形式のデータのうち
道路構成線という名前が含まれるファイル４種
(拡張子はdbf,prj,shp,shxの４種)を
それぞれリネームして拡張子はそのままで
roadという名前に変換してください。
変換した４ファイルを
ms4w/OpenLayers-2.12/に設置してください。
次にms4w/OpenLayers-2.12/ にroad_test.mapという名前の
空ファイルを作成し、中身を下記の内容にします。
このときファイルの保存エンコードをUTF-8にしてください。
またcドライブにms4wフォルダがあることになっていますが、
各自の環境に合わせてドライブを修正してください。
MAP
NAME "WMS-MAP"
SIZE 600 480
UNITS dd
EXTENT 122 20.5 154 45.5
PROJECTION
"init=EPSG:4326"
END
TRANSPARENT ON
IMAGECOLOR 255 255 255
IMAGEQUALITY 95
IMAGETYPE png
OUTPUTFORMAT
NAME png
DRIVER 'GD/PNG'
MIMETYPE 'image/png'
IMAGEMODE RGBA
EXTENSION 'png'
TRANSPARENT OFF
END
WEB
IMAGEPATH "/ms4w/tmp/ms_tmp/"
IMAGEURL "/ms_tmp/"
# WMS server settings
METADATA
'ows_title' 'WMS-MAP'
'ows_onlineresource' 'http://localhost/cgi-bin/mapserv.exe?'
'ows_srs' 'EPSG:4326 EPSG:900913'
'ows_encoding' 'utf-8'
END
END
#主要道路
LAYER
NAME 'road'
TYPE LINE
DUMP true
TEMPLATE void
DATA 'C:/ms4w/OpenLayers-2.12/road.shp'
METADATA
'ows_title' 'road'
END
STATUS ON
TRANSPARENCY 100
PROJECTION
'init=EPSG:2447'
END
CLASS
NAME 'road'
STYLE
SYMBOL 0
SIZE 7.0
COLOR 162 42 42 #0 0 0
WIDTH 2
END
END
END
END
次に
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> <blockquote> <p><a href="/OpenLayers-2.12/test2.html">test2</a></p> </blockquote>
最後にms4w/OpenLayers-2.12/ にtest2.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
}));
var road_layer = new OpenLayers.Layer.WMS( "主要道路",
"http://localhost/cgi-bin/mapserv.exe?" , {
//ファイルパスは各自調整してください。
map : 'C:/ms4w/OpenLayers-2.12/road_test.map' ,
layers: 'road' ,
types: 'png',
format: 'image/png',
transparent: true //,
projection: new OpenLayers.Projection("EPSG:2447")
}, //,
{gutter: 15}
);
map.addLayer(road_layer);
map.setCenter(new OpenLayers.LonLat(138.7313889, 35.3622222) .transform(projection4326, projection3857), 5); </script> </body> </html>
準備完了後はms4w/apache-restart.batを管理者権限で実行し、その上でhttp://localhostにアクセスしてください。
するとms4wのページが表示されますが、ページの下部にtest2というリンクが追加されていますので、これをクリックしてください。
兵庫の範囲にshapeファイルのデータが追加されているのが把握できると思います。
今回は以上となります。
次回は今回取り扱ったmapファイルについて詳細を説明します。