2013年11月22日金曜日

20 - OpenLayers で地図を表示 2 - global.map の地図を表示

20-3 OpenLayers で global.map の地図を表示
exampleフォルダにサンプルがあるので、最初に、mapserver.htmlを参考に自分で作成した地図を表示してみました。

Eclipse を起動して example フォルダ内の mapserver.html をコピーして mapserver_global.html ファイルを作成します。
「AppExplorer」から「example」フォルダを開こうとすると Eclipse がダウンするので、次のように開きます。
a メニューの「ファイル」->「ファイルを開く」をクリックします。






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




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




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






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







f 「mapserver.html」の内容をコピーして「ol000-mapserver_global.html」ファイルに貼り付けます。
g <title>を「Mapserver Global Map」にします。
h javascriptの一部を次のように修正します。
---
<!-- ここを修正
<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">
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>
---
/*
layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS", 
 "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'},
 {gutter: 15});
*/ 
 layer = new OpenLayers.Layer.MapServer( "Global Map MapServer",
   "http://localhost/cgi-bin/mapserv?",
  {
   map: '/home/user/ka-map/htdocs/global.map',
   layers: 'countries'
  },{
   gutter: 15
  }  
     );
---
i 「実行」ボタンをクリックします。

Webブラウザが起動し、地図が表示されます。

0 件のコメント: