Debianでka-MapのメモプラスOpenLayers とGeoExt: GeoExt 05 Layer Tree Example

Example サイト
http://www.geoext.org/examples.html

「Layer Tree」リンクをクリックすると Layer Tree Example が表示されます。
layercontainer.js を参考にします。

説明を意訳すると、GeoExt はLayerContainer や LayerNodes と ExtJS の TreePanel でツリーを作成します。

JS ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> JavaScript ファイルをクリック。
「JavaScript ファイル」ウィンドウの「ファイル名（任意：layercontainer.js）」に入力して「完了」ボタンをクリック。
GeoExt 04 で使用したレイヤの例を参考に以下のように JavaScript を作成します。


var store, tree, panel, map, layer1, layer2, layer3, layer4, layer5, layer6, layer7;

Ext.onReady(function() {
    
 // create a new WMS capabilities store
 // マップとレイヤのときは GeoExt.data.LayerStore を使用。
  map = new OpenLayers.Map('map', {
   allOverlays: true,
   projection: new OpenLayers.Projection("EPSG:2456"),
   maxResolution: 183.59375, //'367.1875', 'auto'
   maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
   units: 'meters',
   displayProjection: new OpenLayers.Projection("EPSG:4326")
  });


  layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
     layers: 'height',
//   isBaselayer: true,
     format: 'image/png'
    }
   );


  layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map', 
     layers: 'kukaku',
     transparent: true,
     format: 'image/png'
    }
   );


  layer3 = new OpenLayers.Layer.WMS( "Railroad Shinkansen WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
     layers: 'shinkansen',
     transparent: true,
     format: 'image/png'
    },{
     projection: new OpenLayers.Projection("EPSG:4326")
    }
   );


  layer4 = new OpenLayers.Layer.WMS( "Railroad JR Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
     layers: 'jrline',
     transparent: true,
     format: 'image/png'
    },{
     projection: new OpenLayers.Projection("EPSG:4326")
    }
   );


  layer5 = new OpenLayers.Layer.WMS( "Railroad Public Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
     layers: 'publicline',
     transparent: true,
     format: 'image/png'
    },{
     projection: new OpenLayers.Projection("EPSG:4326")
    }
   );


  layer6 = new OpenLayers.Layer.WMS( "Railroad Private Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
     layers: 'privateline',
     transparent: true,
     format: 'image/png'
    },{
     projection: new OpenLayers.Projection("EPSG:4326")
    }
   );


  layer7 = new OpenLayers.Layer.WMS( "Railroad Third Sector Line WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/nob61/mapfile/tokyo_pf_pgis.map',
     layers: 'thirdsec',
     transparent: true,
     format: 'image/png'
    },{
     projection: new OpenLayers.Projection("EPSG:4326")
    }
   );
   map.addLayers([layer1, layer2, layer3, layer4, layer5, layer6, layer7]);
// map.addControl(new OpenLayers.Control.MousePosition());
// map.addControl(new OpenLayers.Control.ScaleLine());
   map.zoomToMaxExtent();


/* MapServer の WMS GetCapabilities はグリッドの表示ができません。
   GeoServer ならできるのかも。
 store = new GeoExt.data.WMSCapabilitiesStore({
  url: "http://192.168.1.6/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&service=WMS&request=GetCapabilities"
*/
 store = new GeoExt.data.LayerStore({ // レイヤのデータの取得
  map: map,
  layers: map.layers
 });
 // load the store with records derived from the doc at the above url
 // store.load();


 // create a grid to display records from the store

 var grid = new Ext.grid.GridPanel({
  title: "WMS Capabilities",
  store: store,
  cm: new Ext.grid.ColumnModel([ // グリッドのカラム表示方法
   {header: "Name", dataIndex: "name", sortable: true}, // 最初のデータはレイヤ
   {id: "title", header: "Title", dataIndex: "title", sortable: true}
  ]),
  sm: new Ext.grid.RowSelectionModel({singleSelect:true}), // 列の選択
  autoExpandColumn: "title", // 内容によってカラムを伸縮
  renderTo: "capgrid",
  height: 300,
  width: 350,
  floating: true,
  x: 10,
  y: 0,
  bbar: ["->", { // bottom toolbar, テキストに合わせて伸縮
   text: "Add Layer",
   handler: function() {
    var record = grid.getSelectionModel().getSelected(); // グリッドの選択モデルを返す、最初に選択されたレコードを返す
    if(record) {
     var copy = record.copy(); // レコードのコピー
     // Ext 3.X does not allow circular references in objects passed 
     // to record.set 
/* レイヤ表示のパラメータなので必要なし。
     copy.data["layer"] = record.getLayer();
     copy.getLayer().mergeNewParams({
      format: "image/png",
      transparent: "true"
     });
*/
     panel.layers.add(copy); // コピーをパネルに追加
/* マップ表示の範囲設定なので必要なし。
   ここではレイヤごとの範囲を設定している。
     panel.map.zoomToExtent(
      OpenLayers.Bounds.fromArray(copy.get("llbbox"))
     );
*/  }
   }
  }]
 });


 // create a map panel
 panel = new GeoExt.MapPanel({
  renderTo: "mappanel",
  width: 350,
  height: 300,
//  map: map, // 追加
  floating: true,
  x: 570,
  y: 0
});


 tree = new Ext.tree.TreePanel({
  renderTo: "tree",
  root: new GeoExt.tree.LayerContainer({
   text: 'Map Layers',
   layerStore: panel.layers,
   leaf: false,
   expanded: true
  }),
  enableDD: true,
  width: 170,
  height: 300,
  floating: true,
  x: 380,
  y: 0
 });

});

マップ map のレゾリューション Resolution
map の設定で

maxResolution: 'auto'

としたとき、FireBug の DOM タブの Window の左の "+" をクリックし、Layer1 の左の "+" をクリックして、maxResolution をみると 94000 になっています。
resolutions の左の "+" をクリックしてみると "94000" から 16 段階（ズーム）になっています。
今回のマップの maxResolution は　

(279000-185000)/256 = 367.1875

ですが、半分の 183.59375 にするとマップが表示されます。

maxResolution: 183.59375,

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext05_layer-tree.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以前使用した OpenLayers.Layer.WMS レイヤの例を参考に以下のように HTML を作成します。
（geoext03_mappanel-window.html に layercontainer.js を追加し body タグ内を修正します。）


---
  <title>GeoExt05 Layer Tree</title>
---
<!-- layercontainer.js 追加 -->
  <script type="text/javascript" src="./layercontainer.js"></script>

 </head>
 </body>
  <h1 id="title">GeoExt 05 - Layer Tree</h1>
  <p id="shortdesc">
   Layer Tree Example
  </p>
  <div id="docs">
   <p>This is example that shows how create a TreePanel with layers from a map. 
   GeoExt does not provide a LayerTree component. 
   Instead, to create a tree with nodes that represent layers, create a tree with a LayerContainer at the root, or add LayerNodes directly. 
   See also the tree example for a more complex tree configuration.
   </p>
   <p>
   これは、マップのレイヤと TreePanel を作成する方法を示す例です。 
   GeoExt は LayerTree コンポーネントを提供していません。
   代わりに、レイヤーを表すノードを持つツリーを作成するには、root で LayerContainer 使用してツリーを作成したり、直接 LayerNodes を追加します。
   より複雑なツリー設定もツリーの例を参照してください。
   </p>
  </div>
  <div style="position: relative;">
   <div id="capgrid"></div>
   <div id="tree"></div>
   <div id="mappanel"></div>
  </div>

 </body>
</html>

このままではレイヤの表示がパネルの中心から外れてしまいました。
また、パンとズームのコントロールパネルの機能の動作に時間がかかります。
パネルとマップやレイヤの設定がうまくできていないようです。
これらは修正できませんでした。

GeoServer の WMS GetCapabilities はグリッドの表示を試してみます。
GeoServer は設定されているすべてのレイヤの WMS を出力します。
Tokyo の PostgresQLのデータベースの railroad2 が既に GeoServer の Data の Layers に設定されているので、これを使用します。
GeoServer の WMS を有効にするには、Services -> WMS をクリックして Service Metadata の Enable WMS にチェックをつけて Submit ボタンをクリックします。

次のコマンドで GeoServer の WMS GetCapabilities のデータを取得します。

wget -O geoserver_wms.xml "http://192.168.1.6:8080/geoserver/ows?service=WMS&request=GetCapabilities"

geoserver_wms.xml　ファイルを Eclipse の openlayersTokyoproj プロジェクトにインポートします。

Example サイト
http://www.geoext.org/examples.html

の「Layer Tree」リンクをクリックすると Layer Tree Example が表示されます。
layercontainer.js をコピーします。

JS ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> JavaScript ファイルをクリック。
「JavaScript ファイル」ウィンドウの「ファイル名（任意：layercontainer2.js）」に入力して「完了」ボタンをクリック。
コピーしたコードを貼り付けます。
store の部分だけ修正して geoserver_wms.xml を読み込みます。


var store, tree, panel;

Ext.onReady(function() {

 // create a new WMS capabilities store
 store = new GeoExt.data.WMSCapabilitiesStore({
  url: "./geoserver_wms.xml"
// パネルが表示されない
//  url: "http://192.168.1.6:8080/geoserver/ows?service=WMS&request=GetCapabilities"
// パネルは表示されるが地図は表示されない
//  url: "./tokyo_pf_pgis_wms.xml"
 });
 // load the store with records derived from the doc at the above url
 store.load();
---

geoext05_layer-tree.html ファイルを layercontainer2.js を読み込むように修正します。


---
<!-- layercontainer2.js に修正 -->
  <script src="./layercontainer2.js"></script>

 </head>
 <body>
---

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

ブログアーカイブ

自己紹介

2010年11月16日火曜日

GeoExt 05 Layer Tree Example - Examples 編

0 件のコメント:

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

ブログ アーカイブ