OpenLayers 6OpenLayers Layer MapServer

OpenLayers.Layer.MapServerを使ってみました。
Eclipse を起動して Example フォルダないの mapserver.html をコピーして mapserver_global.html ファイルを作成します。
0 mapserver.htmlをダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をmapserver_global.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をMapserver Global Mapにします。
5 mapserver.html の内容ををコピーしてmapserver_global.html ファイルに貼り付けます。
6 javascriptの一部を次のように修正します。

---
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
---
<script src="./lib/OpenLayers.js"></script>
---
 layer = new OpenLayers.Layer.MapServer( "Global Map WMS",
      "http://localhost/cgi-bin/mapserv?",
 {
   map: '/home/user/ka-map/htdocs/global.map',
   layers: 'clouds'
 },
        {
          gutter: 15
        }  
 );
---

7 エディタのデフォルトタブをクリックします。



OpenLayers.Layer.MapServer で、レイヤを重ねるとき、次のようにしても地図は表示されません。

   layers: 'clouds,countries'

次のように設定してください。
1 global.map に TRANSPARENT ON を追加します。

MAP
 NAME global_map
 STATUS ON
 SIZE 600 300
 EXTENT -180 -90 180 90
 UNITS DD
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 TRANSPARENT ON #for OpenLayers.Layer.MapServer
 PROJECTION
   "init=epsg:4326"
 END
---

2 mapserver_global.html の JavaScript を次のように修正します。

---
<script type="text/javascript">
    var lon = 5;
    var lat = 40;
    var zoom = 4;
    var map, layer1, layer2;  //layer2 追加

    function init(){
        map = new OpenLayers.Map( 'map' );
        layer1 = new OpenLayers.Layer.MapServer( "Global Map Clouds MS",
             "http://localhost/cgi-bin/mapserv?",
  {
   map: '/home/nob61/ka-map/htdocs/global.map',
   layers: 'clouds'
  },
                {
   gutter: 15
  }
 );
 //layer2 追加
       layer2 = new OpenLayers.Layer.MapServer( "Global Map Countries MS",
             "http://localhost/cgi-bin/mapserv?",
  {
   map: '/home/nob61/ka-map/htdocs/global.map',
   layers: 'countries',
   transparent: true //for Overlays
  },
                {
   gutter: 15
  }
 );
       map.addLayers([layer1,layer2]); // 修正

       map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
       map.addControl( new OpenLayers.Control.LayerSwitcher() );
    }
</script>
---

3 エディタのデフォルトタブをクリックします。



*マップファイルの TRANSPARENT は　Deprecated になっています。
次のような記述が推奨されていますが、OpenLayers では透過しません。

 OUTPUTFORMAT
  TRANSPARENT ON
 END

*gutter は、画像タイルの境界のずれを修正します。
詳しくは、gutter.htmlに述べられています。（後でみる予定です。）