2009年9月19日土曜日

OpenLayers で東京都の地図表示1 ダウンロードと設定

国土数値地図と基盤地図情報を同じ地図上に表示しました。
単位が、度数(degree)とメートル(meter)のデータです。
最新の OpenLayers を設定しました。(2009.9.19 現在)

OpenLayers ホームページ
http://openlayers.org/

の 2.8(stable): .tar.gz| .zip のどちらかをダウンロードします。
このファイルを解凍します。

user@debian:~$ tar xvzf OpenLayers-2.8.tar.gz

Eclipseを起動します。

プロジェクトを作成します。
0 Aptanaのパースペクティブを開きます。
パースペクティブボタンをクリック->その他をクリック->Aptanaをクリック->OKボタンをクリック
1 「マイ Aptana」ウィンドウで「Create New Project」アイコンをクリックします。
2 「Webプロジェクトウィザード」の「プロジェクト名」(例えばopenlayersTokyoproj)を入力して「次へ」ボタンをクリックします。
3 「JavaScriptライブラリのインポート」で 何も選択しないで「次へ」ボタンをクリックします。
4 「ホスティング」で何も選択しないで「完了」ボタンをクリックします。

OpenLayersライブラリをインポートします。
1 ファイル->インポートをクリックします
2 選択ウィンドウで 一般->ファイル・システム を選択して「次へ」ボタンをクリックします。
3 ファイル・システムウィンドウで 次のディレクトリからの「参照」ボタンをクリックします。
4 ディレクトリからインポートで解凍したOpenLayers-2.8フォルダを選んで「OK」ボタンをクリックします。
5 ファイル・システムウィンドウで OpenLayers-2.8をチェックして「完了」ボタンをクリックします。

インポートに成功するとプロジェクト ビューにインポートされたファイルやフォルダが表示されます。
exampleフォルダにサンプルがあるので、最初に、mapserver.htmlを参考に自分で作成した地図を表示してみましょう。
(kamap.html は地図が表示されないのでこちらで試しました。)

Eclipse を起動して Example フォルダないの mapserver.html をコピーして mapserver_global.html ファイルを作成します。
0 mapserver.htmlをダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をmapserver_global.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をMapserver Global Mapにします。
5 mapserver.html の内容ををコピーしてmapserver_global.html ファイルに貼り付けます。
6 javascriptの一部を次のように修正します。

---
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" /><!-- ここを追加 -->
<script src="./lib/OpenLayers.js"></script>
---
layer = new OpenLayers.Layer.MapServer( "Global Map WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/user/ka-map/htdocs/global.map',
layers: 'countries'
},{
gutter: 15
}
);
---

7 エディタのデフォルトタブをクリックします。

0 件のコメント: