オープンソースWebGISを構築してみよう その5

久しぶりのWebGIS構築の説明です。
今回は準備したESRI Shape形式のデータを
ms4wで表示するための設定の作成となります。

まずはその2で作った環境を再利用します。

データのうちサンプルとして利用するのは
道路構成線データのみとします。
前回作成したESRI Shape形式のデータのうち
道路構成線という名前が含まれるファイル4種
(拡張子はdbf,prj,shp,shxの4種)を
それぞれリネームして拡張子はそのままで
roadという名前に変換してください。
変換した4ファイルを
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ファイルについて詳細を説明します。

コメントを残す

メールアドレスが公開されることはありません。