Debianでka-MapのメモプラスOpenLayers とGeoExt: 36 - GeoEXT を使用した WFS-T 11

36-11 編集したフィーチャの保存Developing OGC Compliant Web Applications with GeoExt の
3.3. Committing Feature Modifications Over WFS-T（http://workshops.boundlessgeo.com/geoext/wfs/wfst.html）を参考に WFS レイヤの編集したフィーチャを保存します。
続けて「ol017-nippon_bmi_akiruno_pgis.html」を使います。
akiruno_kukaku レイヤでは新規に作成したフィーチャが保存できなかったので、前回使用した akiruno_polygon レイヤに設定しました。

akiruno_polygon レイヤの属性を追加します。
既存の属性
fid
the_geom
追加の属性
id charactor varying(32)
name charactor varying(32)
address charactor varying(32)
createdate charactor varying(32)
lastupdate charactor varying(32)
category1 charactor varying(32)
category2 charactor varying(32)
category3 charactor varying(32)

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

nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN id varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN name varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN address varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN createdate varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN lastupdate varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN category1 varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN category2 varchar(32);
ALTER TABLE
nippon_bmi=> ALTER TABLE akiruno_polygon ADD COLUMN category3 varchar(32);
ALTER TABLE

nippon_bmi=> \d akiruno_polygon

                                 テーブル "public.akiruno_polygon"
   カラム   |          型           |                            修飾語                             
------------+-----------------------+---------------------------------------------------------------
 fid        | integer               | not null default nextval('akiruno_polygon_fid_seq'::regclass)
 the_geom   | geometry              | 
 id         | character varying(32) | 
 name       | character varying(32) | 
 location   | character varying(32) | 
 createdate | character varying(32) | 
 lastupdate | character varying(32) | 
 category1  | character varying(32) | 
 category2  | character varying(32) | 
 category3  | character varying(32) |

インデックス:
    "akiruno_polygon_pkey" PRIMARY KEY, btree (fid)
    "spatial_akiruno_polygon_the_geom" gist (the_geom)
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) = 2451)

(stdin):q

GeoServer で　akiruno_polygon レイヤの「Feature Type Details」を確認します。表示されないときは「Reload feature type」をクリックします。
（属性の保存ができるように列を操作したので、順序が違います。詳細は後で説明します。）

コードの修正

---

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

 store: new GeoExt.data.FeatureStore({
  fields: [
// ここから修正
   {name: "fid", type: "int"},
   {name: "id", type: "string"},
   {name: "name", type: "string"},
   {name: "address", type: "string"},
   {name: "category1", type: "string"},
   {name: "category2", type: "string"},
   {name: "category3", type: "string"},
   {name: "createdate", type: "string"},
   {name: "lastupdate", type: "string"}
// ここまで
  ],

  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.WFS({
    url: "/geoserver/ows",
     version: "1.1.0",
     featureType: "akiruno_polygon",
     featureNS: "http://www.myhome.net/npn",
     srsName: "EPSG:2451",
     geometryName: "the_geom", // 追加
     schema: "http://192.168.1.200/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:akiruno_polygon" // 追加
   })
  }),
  autoLoad: true
 }),

 columns: [
// ここから修正
  {header: "fid", dataIndex: "fid"},
  {header: "id", dataIndex: "id", sortable : true, editor: {xtype: "textfield"}}, // editor: {xtype: "textfield"} 追加
  {header: "name", dataIndex: "name", sortable : true, editor: {xtype: "textfield"}},
  {header: "address", dataIndex: "address", sortable : true, editor: {xtype: "textfield"}},
  {header: "category1", dataIndex: "category1", sortable : true, editor: {xtype: "textfield"}},
  {header: "category2", dataIndex: "category2", sortable : true, editor: {xtype: "textfield"}},
  {header: "category3", dataIndex: "category3", sortable : true, editor: {xtype: "textfield"}},
  {header: "createdate", dataIndex: "createdate", sortable : true, editor: {xtype: "textfield"}},
  {header: "lastupdate", dataIndex: "lastupdate", sortable : true, editor: {xtype: "textfield"}}
// ここまで
 ],
bbar: []
});

---

Ext.onReady(function() {
 var bbar = app.featureGrid.getBottomToolbar();
 bbar.add([{
  text: "Delete",
  handler: function() {

// ここから追加
   app.featureGrid.store.featureFilter = new OpenLayers.Filter({
    evaluate: function(feature) {
     return feature.state != OpenLayers.State.DELETE;
    }
   });
// ここまで

   app.featureGrid.getSelectionModel().each(function(rec) {
    var feature = rec.getFeature();
    modifyControl.unselectFeature(feature);
    vectorLayer.removeFeatures([feature]);
// ここから追加
    if (feature.state != OpenLayers.State.INSERT) {
     feature.state = OpenLayers.State.DELETE;
     vectorLayer.addFeatures([feature]);
    }
// ここまで
   });
  }

 }, new GeoExt.Action({
    control: drawControl,
    text: "Create",
    enableToggle: true
 })

// ここから追加
  , {
  text: "Save",
  handler: function() {
   app.featureGrid.store.proxy.protocol.commit(
    vectorLayer.features, {
     callback: function() {
     var layers = app.mapPanel.map.layers;
     for (var i=layers.length-1; i>=0; --i) {
      layers[i].redraw(true);
     }
      app.featureGrid.store.reload();
     }
    });
  }
// ここまで
 }]);
 bbar.doLayout();
});

---

1)属性（attribution）を追加した後、WFS フィーチャが表示できなくなりました。
Firebug の「ネット」タブの「POST」に「Failed to get property: gid」が表示されていました。
「Geographic Information Systems Stack Exchange」の「“Failed to get property: gid” error in geoserver sql view」（http://gis.stackexchange.com/questions/83791/failed-to-get-property-gid-error-in-geoserver-sql-view）を参考に、原因を探しました。
結局、GeoServer のログに「"aki" はジオメトリではない」という意味の記述がありました。
"aki" は、追加した属性の「location」の値です。カラム名が「location」の値は、ジオメトリと判断されてしまうようです。
それで、カラム名の「location」を「address」に変更したら、WFS フィーチャが表示されるようになりました。
このサイトのコードの「new OpenLayers.Protocol.WFS」には、「geometryName」がありませんでしたが、「schema」と共に、追加しました。

---

  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.WFS({
    url: "/geoserver/ows",
     version: "1.1.0",
     featureType: "akiruno_polygon",
     featureNS: "http://www.myhome.net/npn",
     srsName: "EPSG:2451",
     geometryName: "the_geom", // 追加
     schema: "http://192.168.1.200/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:akiruno_polygon" // 追加
   })
  }),

---

2)属性の「createdate」と「lastupdate」は日付ですが、EXTJS の「editor: {xtype: "datefield"}」を使用すると追加できない（PostgresQL の型との関係だと思われます）ので、"textfield" にしました。

参考 HTML ファイル
ol017-nippon_bmi_akiruno_pgis.html

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

ブログアーカイブ

自己紹介

2014年2月20日木曜日

36 - GeoEXT を使用した WFS-T 11 - 編集したフィーチャの保存

0 件のコメント:

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

ブログ アーカイブ