21 - OpenLayers で東京都の地図を表示 2 - HTML ファイルの作成

21-2 東京都の HTML ファイルの作成
「OpenLayers 7units metersのWMS」を参考に 確認のため OpenLayers で東京都の国土数値地情報を表示します。

Eclipse を起動して Example フォルダ内の wms.html をコピーして nippon_nlni_tokyo_pgis.html ファイルを作成します。

a メニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「example」->「wms.html」をクリックして選択し、「OK」ボタンをクリックします。

c メニューの「ファイル」->「新規」 -> 「その他」をクリックします。

d 「ウィザードを選択」ウィンドウで、「Web」（複数あるときは展開して探してください。）->「HTMLファイル」をクリックして選択し、「次へ」ボタンをクリックします。

e 「HTML」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol001-nippon_nlni_tokyo_pgis.html」と入力し、「完了」ボタンをクリックします。







f 「wms.html」の内容をコピーして「ol001-nippon_nlni_tokyo_pgis.html」ファイルに貼り付けます。
g <title>を「Nippon NLNI TOKYO PGIS Map」にします。
h javascript の一部を次のように修正します。style.css と OpenLayers.js のパスを変えます。
緯度、経度、倍率の宣言をします。
OpenLayers.Map のオプションを削除します。

---
<!-- ここを修正
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
-->
<link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">

<title>Nippon NLNI TOKYO PGIS Map</title>
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>

<script type="text/javascript">
 var lon = 139.5;
 var lat = 35.7;
 var zoom = 9;
 var map, layer1, layer2;

 function init(){
  map = new OpenLayers.Map('map'); 

  layer1 = new OpenLayers.Layer.WMS( "Tokyo Kuiki WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/user/mapfile/nippon_nlni_tokyo_pgis.map',
    layers: 'tokyo_kuiki',
    format: 'image/png'
   });

  layer2 = new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS",
   "http://localhost/cgi-bin/mapserv?",
   {
    map: '/home/user/mapfile/nippon_nlni_tokyo_pgis.map',
    layers: 'tokyo_pf',
    transparent: true,
    format: 'image/png'
  });

  map.addLayers([layer1, layer2]);
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
 }
</script>

---

表示された地図の投影法は正距円筒図法で、縦方向が少しつぶれたようになっています。

地図を拡大するため、コントロールパネルの "+" を7回クリックすると、公共施設の位置が表示されました。