openlayersでwmsサーバから地図を表示

http://d.hatena.ne.jp/end0tknr/20110411/1302532996

以前のエントリからしばらく経ちますが、今回はmapserverによるwmsサーバの準備が完了したので、openlayersでwmsサーバから地図を表示します。といっても、行政区画データを表示するだけでは面白くないので、www.????.jp で公開されていた震災写真も重ねて表示します。

表示例とsrc

html src

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css" />
<style>h2 { font-size: large; font-weight: normal; }</style>
<script src="openlayers/OpenLayers.js"></script>
<script>
function init() {
  var options = {
      maxExtent: new OpenLayers.Bounds(135,36,142,40),
      controls: [
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.LayerSwitcher(),
          new OpenLayers.Control.Navigation(),
        ],
      numZoomLevels: 18,
      allOverlays: true
    }

  var map = new OpenLayers.Map('map',options);
  map.div.style.backgroundColor = 'rgb(221,238,255)';

  var gyosei = new OpenLayers.Layer.WMS(
      "GYOSEI",
      "http://colinux:8081/smap/mapserv?map=test_wms.map&request=getmap&service=WMS&version=1.1.1&SRS=EPSG:4326&",
      {
        layers: "gyosei",
        format: "image/png",
        transparent: true
      },
      {
      }
    );

  var p_sendai = new OpenLayers.Layer.WMS(
      "ishinomaki",
      "http://www.????.jp/＜ないしょ＞?",
      {
        layers: "sendai",
        format: "image/jpeg",
        transparent: true
      },
      {
      }
    );
    var text_info = new OpenLayers.Layer.Text( "text", {location: "./textfile.txt"} );

  map.addLayers([p_sendai,gyosei,text_info]);
  map.setCenter(new OpenLayers.LonLat(140.9,38.2), 12);
}
</script>

</head>
<body onload="init()">

<h1>mapserver + openlayerts test</h1>
<div id="map" style="width: 600px; height: 400px; border: solid 1px #999;"></div>
</body>
</html>

textfile.txt

point	title	description	icon
38.2,140.9	TEI001	テスト001様 <a href="#">&gt;更に</a><br><img src='user_p.gif'>	
38.21,140.91	TEI002	テスト邸002 
38.195,140.898	TEI003	テスト邸001

map file

MAP
  NAME wms_test
  SIZE 500 500           #画像size
  EXTENT 135 36 142 40   #出力範囲の座標
  STATUS ON              #地図を表示するか
  UNITS DD               #地図の単位(DD は緯度経度)
  IMAGECOLOR 255 255 255 #背景色R G B
  IMAGETYPE PNG
  TRANSPARENT ON
  WEB
    IMAGEPATH "/home/endo/dev/smap/tmp/"
    IMAGEURL "/smap/tmp/"
    METADATA
      "wms_title" "wms2500"
      "wms_onlineresource" "http://colinux:8081/map/mapserv?map=test_wms.map&"
      "wms_srs" "EPSG:2448 EPSG:4326 EPSG:54004 EPSG:4612"
    END
  END
  PROJECTION
    "init=epsg:4326"
  END
  LAYER
    NAME "gyosei"
    METADATA
      "DESCRIPTION" "gyosei"
      "wms_title" "gyosei"
      "wms_srs" "EPSG:2448 EPSG:4326 EPSG:54004"
    END
    CONNECTIONTYPE POSTGIS
    CONNECTION "user=postgres password='' dbname=smap host=localhost"
    DATA "the_geom FROM gyosei" #select文
    TYPE LINE
    CLASS
      COLOR 255 0 0
    END
  END
END