36 - GeoEXT を使用した WFS-T 4 - Grid の表示

36-4 Grid の表示
Developing OGC Compliant Web Applications with GeoExt の
2.1. Creating a Grid View of WMS Capabilities（http://workshops.boundlessgeo.com/geoext/stores/capabilities.html）を参考に WMS レイヤ一覧を Grid で表示します。
続けて「ol017-nippon_bmi_akiruno_pgis.html」を使います。

最初、GeServer の WMS レイヤのリストが表示されませんでした。

store: new GeoExt.data.WMSCapabilitiesStore({

の url に

"http://192.168.1.200:8080/geoserver/wms?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.1.1&TILED=true"

など、試しましたが表示されなかったので、Web ブラウザのアドレスバーに上記アドレスを入力して、ダウンロードしたファイルを読み込みました。

---
// ここから追加

 items.push({
  xtype: "grid",
  ref: "capsGrid", // makes the grid available as app.capsGrid
  title: "Available Layers",
  region: "north",
  height: 150,
  viewConfig: {forceFit: true},
  store: new GeoExt.data.WMSCapabilitiesStore({

   url: "getcapabilities_1.1.1.xml", 下記の url では表示できませんでした
//     url: "/geoserver/wms?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.1.1&TILED=true",
//     url: "http://192.168.1.200:8080/geoserver/wms?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.1.1&TILED=true",

   autoLoad: true
  }),

  columns: [
   {header: "Name", dataIndex: "name", sortable: true},
   {header: "Title", dataIndex: "title", sortable: true},
   {header: "Abstract", dataIndex: "abstract"}
  ],

  bbar: [{
   text: "Add to Map",
   handler: function() {
    app.capsGrid.getSelectionModel().each(function(record) {
     var clone = record.clone();
     clone.getLayer().mergeNewParams({
      format: "image/png",
      transparent: true
     });
     app.mapPanel.layers.add(clone);
     app.mapPanel.map.zoomToExtent(
      OpenLayers.Bounds.fromArray(clone.get("llbbox"))
      );
    });
   }
  }]
 });

// ここまで
</script>
---

レイヤを追加すると倍率が変わってしまいました。
（元の倍率に戻すボタン｛地球儀？｝をクリックします。）

akiruno_kidou レイヤを追加

GeoExt14 WMS Capabilities Tree - WMS Capabilities のツリー表示

WMS Capabilities Loader Example

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

「WMS Capabilities Tree」リンクをクリックすると WMS Capabilities Loader Example が表示されます。
wms-tree.js. を参考にします。

説明を意訳すると、WMS の getCapabilities レスポンスの階層構造を持つツリーを設定するために GeoExt.tree.WMSCapabilitiesLoader を使用する方法を示します。

var tree, mapPanel;

Ext.onReady(function() {

 var root = new Ext.tree.AsyncTreeNode({
  text: 'GeoServer Demo WMS',
  loader: new GeoExt.tree.WMSCapabilitiesLoader({ // WMS のすべてのレイヤーのツリーを作成するローダ。
// url: 'data/wmscap.xml',
   url: './geoserver_wms_gc.xml',
   layerOptions: {buffer: 0, singleTile: true, ratio: 1}, // オブジェクトオプションオプション
   layerParams: {'TRANSPARENT': 'TRUE'}, // オブジェクトオプションパラメータ
   // customize the createNode method to add a checkbox to nodes
   createNode: function(attr) {
    attr.checked = attr.leaf ? false : undefined;
    return GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this, [attr]);
   }
  })
 });

 tree = new Ext.tree.TreePanel({
  root: root,
  region: 'west',
  width: 250,
  listeners: {
   // Add layers to the map when ckecked, remove when unchecked.
   // Note that this does not take care of maintaining the layer
   // order on the map.
   'checkchange': function(node, checked) { 
    if (checked === true) {
     mapPanel.map.addLayer(node.attributes.layer); 
    } else {
     mapPanel.map.removeLayer(node.attributes.layer);
    }
   }
  }
 });

 mapPanel = new GeoExt.MapPanel({
//zoom: 2,
  zoom: 9,
  center: [139.4, 35.7],
  layers: [
/* new OpenLayers.Layer.WMS("Global Imagery",
   "http://maps.opengeo.org/geowebcache/service/wms", 
   {layers: "bluemarble"},
   {buffer: 0}
   )
*/
   new OpenLayers.Layer.WMS("Tokyo Gyoseikai mlit WMS",
   "http://192.168.1.6:8080/geoserver/wms?", 
   {layers: "sde:gyoseikai"},
   {buffer: 0}
   )

  ],
  region: 'center'
 });

 new Ext.Viewport({
  layout: "fit",
  hideBorders: true,
  items: {
   layout: "border",
   deferredRender: false,
   items: [mapPanel, tree, {
    contentEl: "desc",
    region: "east",
    bodyStyle: {"padding": "5px"},
    collapsible: true,
    collapseMode: "mini",
    split: true,
    width: 200,
    title: "Description"
   }]
  }
 });

});

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext14_wms-tree.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext13_wms-capabilities.html をコピーし、外部 JavaScript 読み込みファイルを修正し body タグ内に <div id="desc"></div> を設定します。

---
  <title>GeoExt14 WMS Capabilities Tree</title>
---
<!-- wms-tree.js 追加 -->
  <script type="text/javascript" src="./wms-tree.js"></script>

 </head>
 <body>
  <div id="desc">
   <h1 id="title">GeoExt 14 - WMS Capabilities Tree</h1>
   <p id="shortdesc">
    WMS Capabilities Loader Example
   </p>
   <p>This example shows how to use GeoExt.tree.WMSCapabilitiesLoader to populate 
    a tree with the hierarchical structure of a WMS GetCapabilities response.
    The example also shows how to customize the loader's createNode method to add
    a checkbox with a checkchange listener that adds and removes layers to and
    from the map.</p>

   <p>この例では、WMS の getCapabilities レスポンスの階層構造を持つツリーを設定するために
    GeoExt.tree.WMSCapabilitiesLoader を使用する方法を示します。また、この例では、
    マップからレイヤーを追加と削除する checkchange リスナーでチェックボックスを追加する
    ローダーの createNode メソッドをカスタマイズする方法を示しています。</p>

  </div>
 </body>
</html>

GeoExt13 WMS Capabilities Store - WMS capabilities ドキュメントのデータの読み込み

WMS Capabilities Example

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

「WMS Capabilities Store」リンクをクリックすると WMS Capabilities Example が表示されます。
wms-capabilities.js. を参考にします。

説明を意訳すると、WMS capabilities ドキュメントからデータでグリッドを読み込む方法を示します。

GeoServer の Stores 設定で東京に関するレイヤだけ有効にして WMS Capabilities のデータを次のコマンドで取得します。

$ wget -O geoserver_wms_gc.xml "http://localhost:8080/geoserver/wms?&request=GetCapabilities&version=1.1.1&service=WMS"

geoserver_wms_gc.xml を Eclipse にインポートします。

var store;
Ext.onReady(function() {

 // create a new WMS capabilities store
 // リモートの WMS レイヤデータストアを簡単に作成
 store = new GeoExt.data.WMSCapabilitiesStore({
//  url: "data/wmscap.xml"
  url: "./geoserver_wms_gc.xml"
 });
 // 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,
  columns: [
   {header: "Title", dataIndex: "title", sortable: true},
   {header: "Name", dataIndex: "name", sortable: true},
   {header: "Queryable", dataIndex: "queryable", sortable: true, width: 70},
   {id: "description", header: "Description", dataIndex: "abstract"}
  ],
  autoExpandColumn: "description",
  renderTo: "capgrid",
  height: 300,
  width: 650,
  listeners: {
   rowdblclick: mapPreview
  }
 });

 function mapPreview(grid, index) { // レイヤ表示
  var record = grid.getStore().getAt(index);
  var layer = record.getLayer().clone();

  var win = new Ext.Window({
   title: "Preview: " + record.get("title"),
   width: 512,
   height: 256,
   layout: "fit",
   items: [{
    xtype: "gx_mappanel",
    layers: [layer],
    extent: record.get("llbbox")
   }]
  });
  win.show();
 }

});

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext13_wms-capabilities.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext12_attributes.html をコピーし、外部 JavaScript 読み込みファイルを修正し body タグ内に <div id="capgrid"></div> を設定します。

---
  <title>GeoExt13 WMS Capabilities Store</title>
---
<!-- wms-capabilities.js 追加 -->
  <script type="text/javascript" src="./wms-capabilities.js"></script>

 </head>
 <body>

   <h1 id="title">GeoExt 13 - WMS Capabilities Store</h1>
   <p id="shortdesc">
    WMS Capabilities Example
   </p>
   <p>This example shows how to load a grid with data from a WMS capabilities document.
    You can double-click on a row to see a map preview of the layer.</p>

   <p>この例では、WMS capabilities ドキュメントからのデータのグリッドを読み込む方法を示しています。
    レイヤのマップのプレビューを表示するには、行をダブルクリックします。</p>

   <div id="capgrid"></div>
  </body>
</html>

MapServer の tokyo_pf_pgis.map の WMS Capabilities のデータを次のコマンドで取得します。

$ wget -O mapserver_gyoseikai_wmsgc100.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetCapabilities&version=1.0.0&service=WMS"

WMS のバージョンが 1.0.0 ではパネルに何も表示されません。
次にバージョン 1.1.1 の WMS Capabilities を取得します。

$ wget -O mapserver_gyoseikai_wmsgc111.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetCapabilities&version=1.1.1&service=WMS"

マップパネルは表示されますが、マップが表示されないレイヤがありました。