I've tried replicating tutorial on how to edit WFS with OpenLayers(https://medium.com/@goldrydigital/wfs-t-with-openlayers-3-16-6fb6a820ac58) but with my own WFS layer from Geoserver. Need some Javascript help finding what's wrong with it.
I managed to load the WFS and my basemap successfully and managed to get the buttons to show up. The buttons appear correctly like in the working example , for some reason the geometry data isn't being saved. Delete button is working fine(whenever i delete a polygon it is deleted and also in the geoserver published layer) but editing, draw polygon, line,point are not working fine ie i am able to draw or edit the polygon or line, but is not saved and whenever i refresh the page it is showing the previous polygon not the edited one nor newly inserted one
The bit of my code for posting is:
var dirty = {};
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
// featureNS: 'http://argeomatica.com',
featureNS: 'http://www.opengis.net/cite',
// featureType: 'playa_sample',
featureType: 'NARAYANGARH',
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
srsName: 'EPSG:3857'
});
var transactWFS = function(p,f) {
switch(p) {
case 'insert':
node = formatWFS.writeTransaction([f],null,null,formatGML);
break;
case 'update':
node = formatWFS.writeTransaction(null,[f],null,formatGML);
break;
case 'delete':
node = formatWFS.writeTransaction(null,null,[f],formatGML);
break;
}
s = new XMLSerializer();
str = s.serializeToString(node);
// $.ajax('http://geoserver-dbauszus.rhcloud.com/wfs',{
$.ajax('http://localhost:8080/geoserver/cite/wfs',{
type: 'POST',
dataType: 'xml',
processData: false,
contentType: 'text/xml',
data: str
}).done();
}
$('.btn-floating').hover(
function() {
$(this).addClass('darken-2');},
function() {
$(this).removeClass('darken-2');}
);
$('.btnMenu').on('click', function(event) {
$('.btnMenu').removeClass('orange');
$(this).addClass('orange');
map.removeInteraction(interaction);
select.getFeatures().clear();
map.removeInteraction(select);
switch($(this).attr('id')) {
case 'btnSelect':
interaction = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: '#f50057', width: 2})
})
});
map.addInteraction(interaction);
interaction.getFeatures().on('add', function(e) {
props = e.element.getProperties();
if (props.status){$('#popup-status').html(props.status);}else{$('#popup-status').html('n/a');}
if (props.tiendas){$('#popup-tiendas').html(props.tiendas);}else{$('#popup-tiendas').html('n/a');}
coord = $('.ol-mouse-position').html().split(',');
overlayPopup.setPosition(coord);
});
break;
case 'btnEdit':
map.addInteraction(select);
interaction = new ol.interaction.Modify({
features: select.getFeatures()
});
map.addInteraction(interaction);
snap = new ol.interaction.Snap({
source: layerVector.getSource()
});
map.addInteraction(snap);
dirty = {};
select.getFeatures().on('add', function(e) {
e.element.on('change', function(e) {
dirty[e.target.getId()] = true;
});
});
select.getFeatures().on('remove', function(e) {
f = e.element;
if (dirty[f.getId()]){
delete dirty[f.getId()];
featureProperties = f.getProperties();
delete featureProperties.boundedBy;
var clone = new ol.Feature(featureProperties);
clone.setId(f.getId());
transactWFS('update',clone);
}
});
break;
case 'btnDrawPoint':
interaction = new ol.interaction.Draw({
type: 'Point',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDrawLine':
interaction = new ol.interaction.Draw({
type: 'LineString',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDrawPoly':
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: layerVector.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function(e) {
transactWFS('insert',e.feature);
});
break;
case 'btnDelete':
interaction = new ol.interaction.Select();
map.addInteraction(interaction);
interaction.getFeatures().on('change:length', function(e) {
transactWFS('delete',e.target.item(0));
interaction.getFeatures().clear();
selectPointerMove.getFeatures().clear();
});
break;
default:
break;
}
});
This code generates the following XML:
<Transaction xmlns="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Update xmlns:feature="http://localhost:8080/geoserver/cite/wfs" typeName="feature:NARAYANGARH">
<Property>
<Name>the_geom</Name>
<Value>
<MultiPolygon xmlns="http://www.opengis.net/gml">
<polygonMember>
<Polygon>
<exterior>
<LinearRing>
<posList>8571089.53392887 3553005.14086169 ...</posList>
</LinearRing>
</exterior>
</Polygon>
</polygonMember>
</MultiPolygon>
</Value>
</Property>
<Property>
<Name>Name</Name>
<Value>153-HRAM0832-KH1716</Value>
</Property>
<Property>
<Name>Shape_Leng</Name>
<Value>554.269739142</Value>
</Property>
<Property>
<Name>Shape_Area</Name>
<Value>16820.1029665</Value>
</Property>
<Property>
<Name>WAQF_ID</Name>
<Value>HRAM0832</Value>
</Property>
....
<Property>
<Name>Longitude</Name>
<Value>76.996029</Value>
</Property>
<Filter xmlns="http://www.opengis.net/ogc">
<FeatureId fid="NARAYANGARH.164"/>
</Filter>
</Update>
</Transaction>
My main problem now is how to make the edit buttons save user edits to the WFS layer?
please tell me where the problem is
Best Answer
It looks like this line is wrong:
the URI after feature should be the same URI that you set in your workspace for the data store.
However looking at the returned error message from GeoServer should give a fuller idea of what is going wrong.