2009年12月25日金曜日

OpenLayers 41h Styled Layer Descriptor (SLD) - 鉄道 の WFS のHTML コード2

鉄道（railroad）の全部のレイヤを設定した HTML コードです。
publicline
privateline
thirdsec

openlayers41_sld.html

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers41 SLD 1</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>


  <script type="text/javascript">
   var format = new OpenLayers.Format.SLD();
   var map, sld, layerName, baselayer, layer1, layer2, layer3, layer4, layer5; // layer3-5 追加

   function init() {
    var url = "./sld_line_simple.xml";
    OpenLayers.loadURL(url, null, null, loadSuccess);
   }

// getDefaultStyle 追加
   function getDefaultStyle(sld, layerName) {
    var styles = sld.namedLayers[layerName].userStyles;
    var style;
    for(var i=0; i<styles.length; ++i) {
     style = styles[i];
     if(style.isDefault) {
      break;
     }
    }
    return style;
   }


   function loadSuccess(req) {
    OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
    sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
    options = {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    };
    map = new OpenLayers.Map("map", options);
// ここまで    
    baselayer = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
      layers: 'kukaku',
      format: 'image/png'
    });


    layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'shinkansen',　 // 修正
      transparent: true,
      format: 'image/png'
     },{
      styleMap: new OpenLayers.StyleMap(sld, "Shinkansen"),
      projection: new OpenLayers.Projection("EPSG:4326")
    });
// 「JR 在来線」レイヤ追加
    layer2 = new OpenLayers.Layer.WFS( "JR Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'jrline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false, // 表示に時間がかかるので初期表示をしない
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "JRLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });
//ここから追加
// 「公営鉄道」レイヤ追加
    layer3 = new OpenLayers.Layer.WFS( "Public Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'publicline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PublicLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// 「民営鉄道」レイヤ追加
    layer4 = new OpenLayers.Layer.WFS( "Private Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'privateline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PrivateLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// 「第３セクター」レイヤ追加
    layer5 = new OpenLayers.Layer.WFS( "Third Sector Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'thirdsec',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "ThirdSecLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// ここまで

    map.addLayers([baselayer, layer1, layer2, layer3, layer4, layer5]); // layer3-5 追加

    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.zoomToMaxExtent();
   }

  </script>
 </head>
 <body onload="init()">
  <h1 id="title">OpenLayers41 SLD 1</h1>
  <div id="map" class="smallmap"></div>
 </body>
</html>
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)