2008年9月2日火曜日

OpenLayers 3ローカル環境で使う

OpenLayersをローカル環境で使ってみます。

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

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

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

Eclipseを起動します。

プロジェクトを作成します。
0 Aptanaのパースペクティブを開きます。
パースペクティブボタンをクリック->その他をクリック->Aptanaをクリック->OKボタンをクリック
1 ファイル->新規->その他をクリックします。
2 ウィザード選択ウィンドウで Aptana->Default Web Project を選択して次へボタンをクリックします。
3 プロジェクトウィンドウで プロジェクト名を入力して次へボタンをクリックします。
4 JavaScriptライブラリのインポートウィンドウで 何も選択しないで次へボタンをクリックします。
5 Jaxer Supportウィンドウで 何も選択しないで次へボタンをクリックします。
6 HTML Preview Settingウィンドウで このままで終了ボタンをクリックします。

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

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

0 kamap.htmlをダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をkamap_sample.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をkamap sampleにします。
5 今回はスクリプトを1行ずつ入力します。
最初に、<title>下の<link ...>を入力します。
入力支援機能が動作します。
6 var jpl_wms = を自分の Global Weather のデータに合わせます。

---
var gw_ka = new OpenLayers.Layer.KaMap("Global Weather",
 "http://localhost/ka-map/index.html", {g: "countries", map: "weather"});

map.addLayer(gw_ka);
---

7 HTMLエディタの下のデフォルトタブをクリックすると地図が表示されます。

0 件のコメント: