Debianでka-MapのメモプラスOpenLayers とGeoExt: 16 pgRouting in Debian6 10

9. GeoExt Browser Client
http://workshop.pgrouting.org/chapters/geoext_client.html

を参考に Web ブラウザでルーティングを表示してみます。
Synaptic パッケージマネージャで php5-pgaql をインストールしておきます。
Eclipse でマップ製作のためのプロジェクトを作成します。

1 Eclipse を起動し、Aptana Web パースペクティブで、ファイル->新規->新規プロジェクトをクリックします。
2 「プロジェクト」ウィンドウの「プロジェクト名」に「routingproj」と入力し「次へ」ボタンをクリックします。
3 「Project Template」で「完了」ボタンをクリックします。

Eclipse に OpenLayers、Ext、GeoExt、Proj4js ライブラリをインポートします。

OpenLayers 2.10
OpenLayers
http://openlayers.org/

Ext JS 3.3.0
Ext Japan
http://www.extjs.co.jp/

GeoExt 1.0
GeoExt
http://www.geoext.org/

Proj4js 1.0.1
Proj4js Wiki/Trac
http://trac.osgeo.org/proj4js/

解凍したフォルダをファイル -> インポートをクリックします。
インポートの「選択」ウィンドウで一般 -> ファイルシステムを選択して「次へ」ボタンをクリックします。
「ファイルシステム」ウィンドウで「次のディレクトリから」に解凍したフォルダに一つ上のディレクトリを指定し、「ダウンロード」を展開して各フォルダにチェックをつけ、「宛て先フォルダ」が「routingproj」なの絵お確認し「完了」ボタンをクリックします。

Aptana unified Builder が表示されて動作が進まないときは、プロジェクト -> 自動ビルドのチェックを外して Eclipse を再起動してください。

シンプル GeoExt サンプルを東京都用にかえてみます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>A Basic GeoExt Page</title>
  <script src="ext/libraries/lib/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
  <script src="ext/libraries/lib/ext/ext-all.js"  type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="ext/libraries/lib/ext/resources/css/ext-all.css" />
  <script src="OpenLayers-2.10/lib/OpenLayers.js" type="text/javascript"></script>
  <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css" />
  <!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="proj4js/lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="proj4js/lib/proj4js/lib/defs/EPSG2456.js"></script>
  <script type="text/javascript" src="proj4js/lib/proj4js/lib/defs/EPSG900913.js"></script>

  <script type="text/javascript">
   Ext.onReady(function() {
 // 東京都用マップ設定
    var map = new OpenLayers.Map('map', {
     controls: [
      new OpenLayers.Control.PanZoom(),
      new OpenLayers.Control.LayerSwitcher(),
      new OpenLayers.Control.MousePosition(),
      new OpenLayers.Control.ScaleLine()
    ],
    projection: new OpenLayers.Projection("EPSG:2456"),
    maxResolution: 'auto',
    maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
    units: 'meters',
    displayProjection: new OpenLayers.Projection("EPSG:4326")
   });
   var panel = new GeoExt.MapPanel({
    renderTo: 'gxmap',
/*
   map: {
    layers: [new OpenLayers.Layer.OSM("Simple OSM Map")]
   },
   center: [245300, 5070600],
   zoom: 11,
*/
    map: map,
    layers: [new OpenLayers.Layer.WMS( "Tokyo Height WMS",
      "http://192.168.1.141/cgi-bin/mapserv?",
//      "http://localhost/cgi-bin/mapserv?",
      {
       map: '/home/user/mapfile/nippon_bmi_tokyo_pgis2.map',
       layers: 'tokyo_tokosen',
       format: 'image/png'
     }),
     new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
      "http://192.168.1.141/cgi-bin/mapserv?",
//      "http://localhost/cgi-bin/mapserv?",
      {
       map: '/home/user/mapfile/nippon_bmi_tokyo_pgis2.map', 
       layers: 'tokyo_kukaku',
       transparent: true,
       format: 'image/png'
     }),
     new OpenLayers.Layer.WMS( "OpenStreetMap WMS",
      "http://192.168.1.141:8080/geoserver/wms?",
      {
       layers: 'japan_highway',
       transparent: true,
       format: 'image/png'
     },{
     projection: new OpenLayers.Projection("EPSG:900913")
  })
    ],
     height: 400,
     width: 600,
     title: 'A Simple GeoExt Map'
    });
   });
  </script>
 </head>
 <body>
  <div id="gxmap"></div>
 </body>
</html>

最初、web ブラウザで表示できませんでした。
調べてみるとEclipsw にインストールした JavaScript ライブラリのパーミッションが mod で 600 になっていたので 755 にしました。

user@deb6-vmw:~/mapsite/routingproj$ ls -l
合計 56
drw------- 7 user user 4096 2011-04-05 11:23 GeoExt
drw------- 13 user user 4096 2011-04-05 11:23 OpenLayers-2.10
-rw-r--r-- 1 user user 2916 2011-04-09 22:31 basic_geoext_page.html
drw------- 10 user user 4096 2011-04-10 10:46 ext-3.3.0
-rw-r--r-- 1 user user 356 2011-04-04 14:33 index.html
drw------- 8 user user 4096 2011-04-05 11:23 proj4js

user@deb6-vmw:~/mapsite/routingproj$ chmod -R 755 GeoExt
user@deb6-vmw:~/mapsite/routingproj$ chmod -R 755 OpenLayers-2.10
user@deb6-vmw:~/mapsite/routingproj$ chmod -R 755 ext-3.3.0
user@deb6-vmw:~/mapsite/routingproj$ chmod -R 755 proj4js

user@deb6-vmw:~/mapsite/routingproj$ ls -l
合計 56
drwxr-xr-x 7 user user 4096 2011-04-05 11:23 GeoExt
drwxr-xr-x 13 user user 4096 2011-04-05 11:23 OpenLayers-2.10
-rw-r--r-- 1 user user 2916 2011-04-09 22:31 basic_geoext_page.html
drwxr-xr-x 10 user user 4096 2011-04-10 10:46 ext-3.3.0
-rw-r--r-- 1 user user 4226 2011-04-10 11:44 geoext01_basic-ex.html
-rw-r--r-- 1 user user 356 2011-04-04 14:33 index.html
drwxr-xr-x 8 user user 4096 2011-04-05 11:23 proj4js

内容を試しに訳してコードをみます。
*****
ヘッダには、アプリケーションに必要なすべての JavaScript と CSS のが含まれています。また、ページがが読み込まれる（Ext.onReady）ときに実行される関数を定義しています。
この関数は、バルセロナ（作成しているのは東京）が中心の OpenStreetMap のレイヤで GeoExt.MapPanel を作成します。このコードには、OpenLayers.Map が（今回はあります）明示的に作成されていません。GeoExt.MapPanel が、hood の下にこれを行うには：それはマップのオプション、center と zoom を設定し、それに応じてマップのインスタンスを作成します。

ユーザーが方向を取得できるようにするには、次のものを提供する必要があります：

*　ルーティングアルゴリズム（Shortest path Dijkstra, A* or Shooting*）を選択する方法、
*　始点と終点を選択する方法です。

注意

この章では、コードスニペットを示すだけで、ページの完全なソースコードは、あなたのデスクトップにある pgrouting-workshop/web/routing-final.html で見つけることができます。完全なリストは、この章の最後に記載しています。
*****
続く ...

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2011年4月27日水曜日

16 pgRouting in Debian6 10 - ルーティングをブラウザで表示1

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ