22 - OpenLayers であきる野市の地図を表示 2 - HTML ファイルの設定

22-2 あきる野市の HTML ファイルの設定
「OpenLayers 7units metersのWMS」を参考に OpenLayers で地図を表示します。

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

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

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

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

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

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







f 「wms.html」の内容をコピーして「ol002-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。
g <title>を「Nippon BMI Akiruno PGIS Map」にします。
h javascriptの一部を次のように修正します。

style.cssとOpenLayers.jsのパスを変えます。
OpenLayers.Map のオプションに
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-63100, -34500, -45400, -24200)

 // 2014.6.11修正

を追加します。

---
<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 BMI Akiruno PGIS Map</title>
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<!-- ここを追加 -->
<script type="text/javascript">
 var map, layer1, layer2;

 function init(){
  map = new OpenLayers.Map('map',  {
   projection: new OpenLayers.Projection("EPSG:2451"),
   displayProjection: new OpenLayers.Projection("EPSG:4326"),
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-63100, -34500, -45400, -24200) // 2014.6.11修正
  });

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

  layer2 = new OpenLayers.Layer.WMS( "Akiruno Kenchiku WMS",
   "http://localhost/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
   layers: 'akiruno_kenchiku',
   transparent: true,
   format: 'image/png'
  });

 map.addLayers([layer1, layer2]);
 map.addControl(new OpenLayers.Control.LayerSwitcher());
 map.zoomToMaxExtent();
 }
</script>
---