36 - GeoEXT を使用した WFS-T 9 - WFS レイヤの表示

36-9 WFS レイヤの表示
Developing OGC Compliant Web Applications with GeoExt の
3.1. Creating a Synchronized Grid and Map View of WFS Features（http://workshops.boundlessgeo.com/geoext/wfs/grid.html）を参考に WFS レイヤを表示します。
続けて「ol017-nippon_bmi_akiruno_pgis.html」を使います。

属性の一部を表示するようにしました。

user@debian7-vmw:~$ psql nippon_bmi
psql (9.1.11)
"help" でヘルプを表示します.

                                 テーブル "public.akiruno_kukaku"
  カラム   |          型           |                            修飾語                            
-----------+-----------------------+--------------------------------------------------------------
 gid       | integer               | not null default nextval('akiruno_kukaku_gid_seq'::regclass)
 id        | character varying(6)  | 
 uuid      | character varying(28) | 
 presences | double precision      | 
 presencef | double precision      | 
 finished  | double precision      | 
 orggilvl  | character varying(4)  | 
 orgmdid   | character varying(7)  | 
 category  | character varying(4)  | 
 flag      | character varying(4)  | 
 type      | character varying(16) | 
 name      | character varying(12) | 
 code      | character varying(5)  | 
 the_geom  | geometry              | 

インデックス:
    "akiruno_kukaku_pkey" PRIMARY KEY, btree (gid)
CHECK 制約:
    "enforce_dims_the_geom" CHECK (st_ndims(the_geom) = 2)
    "enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTIPOLYGON'::text OR the_geom IS NULL)
    "enforce_srid_the_geom" CHECK (st_srid(the_geom) = (-1))

nippon_bmi=> SELECT gid, id, uuid, orggilvl, orgmdid, category, flag, type, name, code from akiruno_kukaku where gid = '1';

 gid |  id  |             uuid             | orggilvl | orgmdid | category | flag |       type       |    name    | code  
-----+------+------------------------------+----------+---------+----------+------+------------------+------------+-------
   1 | K4_1 | fgoid:10-00200-11-6572-94188 | 2500     |         | 表示     | 既存 | 郡市・東京都の区 | あきる野市 | 13228
(1 行)

---
// ここから追加

items.push({
 xtype: "grid",
 ref: "featureGrid",
 title: "Feature Table",
 region: "south",
 height: 150,
 sm: new GeoExt.grid.FeatureSelectionModel(),

 store: new GeoExt.data.FeatureStore({
  fields: [
   {name: "gid", type: "int"},
   {name: "id", type: "string"},
   {name: "orggilvl", type: "string"},
   {name: "orgmdid", type: "string"}, 
   {name: "category", type: "string"},
   {name: "flag", type: "string"},
   {name: "type", type: "string"},
   {name: "name", type: "string"},
   {name: "code", type: "string"}
  ],

  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.WFS({
    url: "/geoserver/ows",
    version: "1.1.0",
    featureType: "akiruno_kukaku",
    featureNS: "http://www.myhome.net/npn",
    srsName: "EPSG:2451"
   }),
  })
  autoLoad: true
 }),

 columns: [
  {header: "gid", dataIndex: "gid"},
  {header: "id", dataIndex: "id"},
  {header: "orggilvl", dataIndex: "orggilvl"},
  {header: "orgmdid", dataIndex: "orgmdid"},
  {header: "category", dataIndex: "category"},
  {header: "flag", dataIndex: "flag"},
  {header: "type", dataIndex: "type"},
  {header: "name", dataIndex: "name"},
  {header: "code", dataIndex: "code"}
 ],
 bbar: []
});

var vectorLayer = new OpenLayers.Layer.Vector("Editable features");

Ext.onReady(function() {
 app.mapPanel.map.addLayer(vectorLayer);
 app.featureGrid.store.bind(vectorLayer);
 app.featureGrid.getSelectionModel().bind(vectorLayer);
});

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

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 レイヤを追加

GeoExt10 Grid with Feature - フィーチャデータのグリッド表示

Grid Panel configured with a GeoExt.data.FeatureStore

GeoJSONドキュメント（mapserver_tokyo.json）から読み込んだフィーチャを読み込んだ Ext グリッドを表示します。

tokyo_pf_pgis.map の gyoseikai レイヤに東京都の人口を追加して GeoJSON データを作成します。
tokyo_pf_pgis.map をつぎのように修正します。

---
  DATA "the_geom from (
   SELECT gyoseikai.gid AS gid,
   gyoseikai.con AS con,
   gyoseikai.cn2 AS cn2,
   gyoseikai.aac AS aac,
   gyoseikai.the_geom AS the_geom,
   population.total AS total,
   population.male AS male,
   population.female AS female,
   population.foreigner AS foreigner
    FROM gyoseikai LEFT OUTER JOIN population ON gyoseikai.aac = population.aac
  )
  AS gyosei_pop USING UNIQUE gid USING SRID=-1"
---

次に gyoseikai レイヤの WFS データを出力します。
（データ量が多いので２３区だけ出力します。）

///// 参考 /////
MapServer の WFS Filter Encoding サイト
http://mapserver.org/ogc/filter_encoding.html

の検索文字列のフィルタの例より次のコマンドを実行しました。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&Filter=<Filter><PropertyIsLessThan><PropertyName>aac</PropertyName><Literal>13124</Literal></PropertyIsLessThan></Filter>"

prepare_database(): Query error. Error declaring cursor: ERROR: operator does not exist: character varying < integer
LINE 13: AS gyosei_pop WHERE ( (aac< 13124) ) and (the_geom && setS...
^
HINT: No operator matches the given name and argument type(s). You might need to add explicit type casts.

aac の型が文字列になっているのでエラーになったと思われます。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&Filter=<Filter><PropertyIsLike wildcard='*' singleChar='.' escape='!'><PropertyName>con</PropertyName><Literal>*区</Literal></PropertyIsLike></Filter>"
bash: !: event not found

と表示されます。

How does one escape special characters when writing SQL queries? サイトに
http://www.orafaq.com/faq/how_does_one_escape_special_characters_when_writing_sql_queries

SQL クエリのエスケープキャラクタが "_" であるとあります。
これで２３区のデータが出力されました。
///// ここまで /////

今回は範囲を限定して出力しました。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&bbox=139.62,35.53,139.90,35.80"

出力したデータを GeoJSON データに変換します。

$ ogr2ogr -f "GeoJSON" mapserver_gyoseikai.json mapserver_gyoseikai.xml

mapserver_gyoseikai.json を Eclipse にインポートします。


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

「Grid with Feature」リンクをクリックすると Grid Panel configured with a GeoExt.data.FeatureStore が表示されます。
feature-grid.js を参考にします。

説明を意訳すると、GeoJSONドキュメントから読み込んだフィーチャを読み込んだ Ext グリッドを示しています。

JS ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> JavaScript ファイル をクリック。
「JavaScript ファイル」ウィンドウの「ファイル名（任意：feature-grid.js）」に入力して「完了」ボタンをクリック。

var mapPanel, store, gridPanel, mainPanel;

Ext.onReady(function() {
 // create map instance
 // var map = new OpenLayers.Map();
 // 東京都マップ表示
  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 wmsLayer = new OpenLayers.Layer.WMS(
  "vmap0",
  "http://vmap0.tiles.osgeo.org/wms/vmap0",
  {layers: 'basic'}
 );
*/
 var 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',
   format: 'image/png'
 });
 var 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'
 });

 // create vector layer
 var vecLayer = new OpenLayers.Layer.Vector("vector");
 map.addLayers([layer1, layer2, vecLayer]);

 // create map panel
 mapPanel = new GeoExt.MapPanel({
  title: "Map",
  region: "center",
  height: 400,
  width: 600,
  map: map,
//  center: new OpenLayers.LonLat(5, 45),
//  zoom: 6
 });

 // create feature store, binding it to the vector layer
 store = new GeoExt.data.FeatureStore({
  layer: vecLayer,
  fields: [
// {name: 'name', type: 'string'},
// {name: 'elevation', type: 'float'}
   {name: 'con', type: 'string'}, // 郡、区名
   {name: 'cn2', type: 'string'}, // 市町村名
   {name: 'total', type: 'float'} // 人口
  ],
  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.HTTP({
//  url: "data/summits.json",
    url: "./mapserver_gyoseikai.json", // gyoseikai JSON ファイル
    format: new OpenLayers.Format.GeoJSON(
    {
     'internalProjection': new OpenLayers.Projection("EPSG:2456"),
     'externalProjection': new OpenLayers.Projection("EPSG:4326")
    }
    )
   }),
  }),
  autoLoad: true
 });

 // create grid panel configured with feature store
 gridPanel = new Ext.grid.GridPanel({
  title: "Feature Grid",
  region: "east",
  store: store,
  width: 320,
  columns: [{
// header: "Name",
   header: "区、郡",
// width: 200,
   width: 100,
// dataIndex: "name"
   dataIndex: "con",
   sortable: true
  },{
// header: "Elevation",
   header: "市町村",
   width: 100,
// dataIndex: "elevation"
   dataIndex: "cn2"
  },{ // ここから「人口」を追加
   header: "人口",
   width: 100,
   dataIndex: "total"
  }],
  sm: new GeoExt.grid.FeatureSelectionModel() 
 });

 // create a panel and add the map panel and grid panel
 // inside it
 mainPanel = new Ext.Panel({
  renderTo: "mainpanel",
  layout: "border",
  height: 400,
  width: 920,
  items: [mapPanel, gridPanel]
 });
});

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

---
  <title>GeoExt10 Grid with Feature</title>
---
<!-- feature-grid.js 追加 -->
  <script type="text/javascript" src="./feature-grid.js"></script>
 </head>
 <body>
  <h1 id="title">GeoExt 10 - Grid with Feature</h1>
  <p id="shortdesc">
   Grid Panel configured with a GeoExt.data.FeatureStore
  </p>
  <p>This example shows an Ext grid loaded with features read from 
   a GeoJSON document (data/summits.json).Because the layer and 
   the store are bound to each other, the features loaded into the store
   are automatically added to the layer. A GeoExt feature selection model 
   is also used so that selecting rows in the grid selects features in the
   layer, and vice-versa.<p>
  <p>この例では、GeoJSONドキュメント（data/summits.json）から読み込んだ
    フィーチャを読み込んだ Ext グリッドを示しています。レイヤとストアは、お互いに
    バインドされているので、フィーチャはレイヤを自動的に追加されたストアにロードします。 
    GeoExt フィーチャ選択モデルは、レイヤ中のフィーチャを選択するグリッド内の行を
    選択するために、もしくはその逆に使用されます。</p>

  <div id="mainpanel"></div>

 </body>
</html>