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 was not working fine.
i.e. I am able to edit the polygon or line, but it is not saved and whenever I refresh the page it is showing the previous polygon not the edited one.
The bit of my code for posting is:
<script type="text/javascript">
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
featureNS: 'http://localhost:8080/geoserver/web/Peru',
featureType: 'Buildings',
srsName: 'EPSG:4326',
});
var sourceWFS = new ol.source.Vector({
//format: new ol.format.GeoJSON(),
format: new ol.format.GeoJSON({ extractGeometryName: true }),
url: function (extent) {
return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
'version=1.0.0&request=GetFeature&typename=Peru:Buildings&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.bbox,
projection: proj
});
window.loadFeatures = function (response) {
vectorSource.addFeatures(new ol.format.GeoJSON().readFeatures(response));
};
var vectorLayerWFS = new ol.layer.Vector({
source: sourceWFS
});
var interaction;
var interactionSelectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var interactionSelect = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF2828'
})
})
});
var interactionSnap = new ol.interaction.Snap({
source: vectorLayerWFS.getSource()
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var proj = 'EPSG:4326';
var map = new ol.Map({
layers: [raster, vectorLayerWFS],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([74.2543165420606, 22.844272350403696], 'EPSG:4326', proj),
maxZoom: 19,
zoom: 14,
projection: proj
})
});
//wfs-t
var dirty = {};
var transactWFS = function (mode, f) {
var node;
function removeNodeForWfsUpdate(node, valueToRemove) {
var propNodes = node.getElementsByTagName("Property");
for (var i = 0; i < propNodes.length; i++) {
var propNode = propNodes[i];
var propNameNode = propNode.firstElementChild;
var propNameNodeValue = propNameNode.firstChild;
if (propNameNodeValue.nodeValue === valueToRemove) {
propNode.parentNode.removeChild(propNode);
break;
}
}
}
switch (mode) {
case 'update':
// Update Parameter for new GEOMETRY NODE
f.set('geometry', f.getGeometry());
node = formatWFS.writeTransaction(null, [f], null, formatGML);
// Remove lower case geometry node which will cause update to fail
removeNodeForWfsUpdate(node, "geometry");
break;
case 'delete':
node = formatWFS.writeTransaction(null, null, [f], formatGML);
break;
}
var xs = new XMLSerializer();
var payload = xs.serializeToString(node);
console.log(payload);
$.ajax('http://localhost:8080/geoserver/Peru/wfs',
{
service: 'WFS',
type: 'POST',
dataType: 'xml',
processData: false,
contentType: 'text/xml',
data: payload,
error: function (e) {
var errorMsg = e ? (e.status + ' ' + e.statusText) : "";
alert('Error saving this feature to GeoServer. \n\n'
+ errorMsg);
}
}).done(function (data) {
console.log((new XMLSerializer()).serializeToString(data));
sourceWFS.clear();
});
};
$('button').click(function () {
$(this).siblings().removeClass('btn-active');
$(this).addClass('btn-active');
map.removeInteraction(interaction);
interactionSelect.getFeatures().clear();
map.removeInteraction(interactionSelect);
switch ($(this).attr('id')) {
case 'btnEdit':
map.addInteraction(interactionSelect);
interaction = new ol.interaction.Modify({
features: interactionSelect.getFeatures()
});
map.addInteraction(interaction);
map.addInteraction(interactionSnap);
dirty = {};
interactionSelect.getFeatures().on('add', function (e) {
e.element.on('change', function (e) {
dirty[e.target.getId()] = true;
});
});
interactionSelect.getFeatures().on('remove', function (e) {
var f = e.element;
if (dirty[f.getId()]) {
delete dirty[f.getId()];
var featureProperties = f.getProperties();
delete featureProperties.boundedBy;
var clone = new ol.Feature(featureProperties);
clone.setId(f.getId());
transactWFS('update', clone);
}
});
break;
case 'btnDelete':
interaction = new ol.interaction.Select();
interaction.getFeatures().on('add', function (e) {
transactWFS('delete', e.target.item(0));
interactionSelectPointerMove.getFeatures().clear();
interaction.getFeatures().clear();
});
map.addInteraction(interaction);
break;
default:
break;
}
});
</script>
The XML request that I have sent:
<Transaction
xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Update typeName="feature:Buildings"
xmlns:feature="http://localhost:8080/geoserver/web/Peru">
<Property>
<Name>OBJECTID</Name>
<Value>21348</Value>
</Property>
<Property>
<Name>BUILDINGNA</Name>
</Property>
<Property>
<Name>BUILDINGAD</Name>
</Property>
<Property>
<Name>SHAPE_Leng</Name>
<Value>70.10207871120306</Value>
</Property>
<Property>
<Name>SHAPE_Area</Name>
<Value>272.00550843505323</Value>
</Property>
<Property>
<Name>height</Name>
<Value>7000</Value>
</Property>
<Filter
xmlns="http://www.opengis.net/ogc">
<FeatureId fid="Buildings.21342"/>
</Filter>
</Update>
</Transaction>
The Response that I have got is:
<?xml version="1.0" encoding="UTF-8"?>
<wfs:TransactionResponse
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:gml="http://www.opengis.net/gml"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:ows="http://www.opengis.net/ows"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd">
<wfs:TransactionSummary>
<wfs:totalInserted>0</wfs:totalInserted>
<wfs:totalUpdated>1</wfs:totalUpdated>
<wfs:totalDeleted>0</wfs:totalDeleted>
</wfs:TransactionSummary>
<wfs:TransactionResults/>
<wfs:InsertResults>
<wfs:Feature>
<ogc:FeatureId fid="none"/>
</wfs:Feature>
</wfs:InsertResults>
</wfs:TransactionResponse>
The Geoserver log:
2021-10-07 14:13:06,097 INFO [geoserver.wfs] -
Request: getServiceInfo
2021-10-07 14:13:06,103 INFO [geoserver.wfs] -
Request: getFeature
service = WFS
version = 1.0.0
baseUrl = http://localhost:8080/geoserver/
query[0]:
filter = [ bbox ReferencedEnvelope[74.2591192884007 : 74.26333035655408, 22.81705553923211 : 22.82107885275445] ]
srsName = EPSG:4326
typeName[0] = {Peru}Buildings
outputFormat = application/json
resultType = results
2021-10-07 14:13:06,108 INFO [wfs.json] - about to encode JSON
2021-10-07 14:13:09,296 INFO [geoserver.wfs] -
Request: getServiceInfo
2021-10-07 14:13:09,299 INFO [geoserver.wfs] -
Request: getFeature
service = WFS
version = 1.0.0
baseUrl = http://localhost:8080/geoserver/
query[0]:
filter = [ bbox ReferencedEnvelope[74.22062799683354 : 74.28800508728764, 22.812085842224985 : 22.876458858582406] ]
srsName = EPSG:4326
typeName[0] = {Peru}Buildings
outputFormat = application/json
resultType = results
2021-10-07 14:13:09,302 INFO [wfs.json] - about to encode JSON
2021-10-07 14:13:11,114 INFO [geoserver.wfs] -
Request: getServiceInfo
2021-10-07 14:13:11,124 INFO [geoserver.wfs] -
Request: getFeature
service = WFS
version = 1.0.0
baseUrl = http://localhost:8080/geoserver/
query[0]:
filter = [ bbox ReferencedEnvelope[74.22772333549383 : 74.29510042594794, 22.797780728352006 : 22.862153744709428] ]
srsName = EPSG:4326
typeName[0] = {Peru}Buildings
outputFormat = application/json
resultType = results
2021-10-07 14:13:11,126 INFO [wfs.json] - about to encode JSON
2021-10-07 14:13:50,577 INFO [geoserver.wfs] -
Request: getServiceInfo
2021-10-07 14:13:50,602 INFO [geoserver.gwc] - DataStoreChange: {Peru}Buildings TransactionEventType[PreUpdate]
2021-10-07 14:13:50,649 INFO [geoserver.gwc] - DataStoreChange: {Peru}Buildings TransactionEventType[PostUpdate]
2021-10-07 14:13:50,682 INFO [seed.GWCTask] - Thread group finished TRUNCATE task after 0.0 seconds
2021-10-07 14:13:50,688 INFO [seed.GWCTask] - Thread group finished TRUNCATE task after 0.001 seconds
2021-10-07 14:13:50,687 INFO [seed.GWCTask] - Thread group finished TRUNCATE task after 0.005 seconds
2021-10-07 14:13:50,687 INFO [geoserver.wfs] -
Request: transaction
service = WFS
version = 1.1.0
baseUrl = http://localhost:8080/geoserver/
group[0] = wfs:update=net.opengis.wfs.impl.UpdateElementTypeImpl@19a11626 (filter: [ Buildings.21342 ], handle: null, inputFormat: <unset>, srsName: null, typeName: {Peru}Buildings)
update[0]:
property[0]:
name = OBJECTID
value = 21348property[0]:
name = BUILDINGNAproperty[0]:
name = BUILDINGADproperty[0]:
name = SHAPE_Leng
value = 70.10207871120306property[0]:
name = SHAPE_Area
value = 272.00550843505323property[0]:
name = height
value = 7000
filter = [ Buildings.21342 ]
inputFormat = x-application/gml:3
typeName = {Peru}Buildings
releaseAction = ALL
2021-10-07 14:13:50,682 INFO [seed.GWCTask] - Thread group finished TRUNCATE task after 0.0 seconds
2021-10-07 14:13:51,204 INFO [geoserver.wfs] -
Request: getServiceInfo
2021-10-07 14:13:51,226 INFO [geoserver.wfs] -
Request: getFeature
service = WFS
version = 1.0.0
baseUrl = http://localhost:8080/geoserver/
query[0]:
filter = [ bbox ReferencedEnvelope[74.26142619629152 : 74.26353173036821, 22.81927679566077 : 22.82128845242194] ]
srsName = EPSG:4326
typeName[0] = {Peru}Buildings
outputFormat = application/json
resultType = results
2021-10-07 14:13:51,236 INFO [wfs.json] - about to encode JSON
