OpenLayers 2 WFS – How to Edit Feature Attributes with OpenLayers

openlayers-2wfs

I want to edit object's attributes on WFS layer. I see this example http://gis.ibbeck.de/ginfo/apps/OLExamples/OL26/examples/styles_unique_with_group_wfs.html but popup is horrible. I want to use ExtJs form to editing.
So how to edit attributes in this case?

Best Answer

At first need to create store

                          st = new GeoExt.data.FeatureStore({
                                    layer: myVecLayer,
                                    fields: [
                                        {name: 'id', type: 'int'}
                                    ],
                                     proxy: new GeoExt.data.ProtocolProxy({
                                        protocol: new OpenLayers.Protocol.WFS({
                                            version: "1.0.0",
                                            srsName:"EPSG:900913",
                                            url: "http://localhost:8080/geoserver/wfs",
                                            featureType: "filedata_temp",
                                            featureNS: "http://www.opengeospatial.net/cite",
                                            filter:Ffilter
                                        })
                                    }),
                                    autoLoad: true
                                });

Then EditorGrid

    var cm = new Ext.grid.ColumnModel({
                columns: [
                    {header: "id", 
                     dataIndex:"id",
                     editor: new Ext.form.TextField({allowBlank: false})
                    }]
    })


var ed_tab = new Ext.grid.EditorGridPanel({
                store: st,
                region: 'center',
                    cm: cm,
                height: 200,
                title:'Аттрибуты',
                    autoScroll: true,
                bbar:[{
                     xtype: 'tbbutton',
                     cls: 'x-btn-icon',
                     tooltip: "Сделать что то",
                     id: "something",
                     icon: url_servlet+'externals/gxp/src/theme/img/silk/delete.png',
                     handler: function(){
                                        ed_tab.store.proxy.protocol.commit(
                                               myVecLayer.features
                                          );
                                        ed_tab.store.reload();
                                    }
                    }]
                })


var x = new Ext.Window({
        title:'Аттрибуты',
        items:[ed_tab]  
        })
 x.show();

That all about attributes. To modifity geometry htere: Modify WFS with OpenLayers

Related Solutions

OpenLayers – How to Modify WFS

OK. I find answer to my question. Just need to use filters.

//WFS
                            var myStyle = OpenLayers.Util.extend({},
                                OpenLayers.Feature.Vector.style['default']);
                            myStyle.strokeWidth = 1.5;
                            myStyle.strokeColor = "#ff0000";
                            myStyle.fillOpacity = 0.1;
                            OpenLayers.ProxyHost = "proxy.cgi?url=";
                            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
                            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;           
                            myVecLayer = new OpenLayers.Layer.Vector("Редактируемый участок", {
                                strategies: [new OpenLayers.Strategy.BBOX(), SS],
                                style: myStyle,
                                protocol: new OpenLayers.Protocol.WFS({
                                    version: "1.0.0",
                                    srsName:"EPSG:900913",
                                    url: "http://localhost:8080/geoserver/wfs",
                                    featureType: "filedata",
                                    featureNS: "http://www.opengeospatial.net/cite",
                                    defaultFilter : filter
                                }),
                                renderers: renderer
                            })

Filters+Editing

if(counter==0){
                    if(ppp==null){
                                if (edit==null){
                                    edit = new OpenLayers.Control.ModifyFeature(myVecLayer);
                                    map.addControl(edit);
                                    ppp=map.getControlsByClass("OpenLayers.Control.ModifyFeature");
                                }
                            }

                                map.addLayers([myVecLayer]);
                                Ffilter = new OpenLayers.Filter.Comparison({
                                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                                        property: 'id',
                                        value: '170',
                                    })
                                myVecLayer.filter=Ffilter;
                                myVecLayer.refresh({force: true});
                            for(var i=0;i<ppp.length;i++){
                                ppp[i].activate();
                            }
                            counter=1;

                }
                else {
                    //FS.deactivate();
                //  SS.save();
                    //myVecLayer.destroyFeatures(); 
                    map.removeLayer(myVecLayer); 
                    for(var i=0;i<ppp.length;i++){
                                ppp[i].deactivate();
                            }
                    //ppp.deactivate();
                    counter=0;
                }

WFS Data Collection – How to Collect Data via WFS and Popup

To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):

function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();

//empty map, bounds are test-layer bounds (EPSG:32647)  
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    maxExtent: new OpenLayers.Bounds(
    653237.69439077,1519879.063165,655229.57939001,1520825.6733868
    )
    });

//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
    strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],    
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://..../wfs",
    featurePrefix: 'testkf',
    featureNS: "http://.../testkf",
    extractAttributes: true,
    featureType: "test",
    geometryName: "geom",
    })
});

map.addLayer(test);

//add Popup
        var select = new OpenLayers.Control.SelectFeature(test);
            map.addControl(select);
            select.activate();

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

        <!-- crucial part is form within popup. careful with linebreaks-->  
        test.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                feature.popup = new OpenLayers.Popup.FramedCloud
                ("pop",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                '<form action="http://.../myphp.php" method="post" target="new">'+                  
                '<p><div class="label"> entry by:</div> <input name="entryname" type="text" size="30" maxlength="30"  value="'+feature.attributes.entryname+'" ></p><br>'+
                '<input type="submit" name="schreiben" value="Submit" onClick="window.location.reload()"></form>',
                null,
                true 
                );
             map.addPopup(feature.popup);  
            },

            <!-- destroy popup when feature is no longer selected. Prevents showing 2 Popups at the same time-->
            featureunselected: function(event) {
                var feature = event.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        });

//Toolbar:
    var panel = new OpenLayers.Control.Panel(
    {'displayClass': 'customEditingToolbar'}
    );

    var select = new OpenLayers.Control.SelectFeature(test, {
    title: "Select Field",
    displayClass: "olControlSelectFeature"
    });

    var draw = new OpenLayers.Control.DrawFeature(
    test, OpenLayers.Handler.Polygon,
    {
    title: "Draw Feature",
    displayClass: "olControlDrawFeaturePolygon",
    multi: true
    });

    var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
    if(edit.feature) {
    edit.selectControl.unselectAll();
    }
    saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
    });


panel.addControls([save, draw, select]);
map.addControl(panel);  
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

For the form within the popup, a separate php-script is needed. Here, the crucial part is:

$res = pg_query ("UPDATE $tabelle SET entryname = '".pg_escape_string ($entryname)."' WHERE gid = '$gid'");

Hope that helps!

Best Answer

Related Solutions

OpenLayers – How to Modify WFS

WFS Data Collection – How to Collect Data via WFS and Popup

Related Question