I am trying to access shapefile from geoserver as WFS and edit it online and at the same time it should be saved in wfs_geom table in postgres database. I have created a geometry table "wfs_geom" (columns - id, geometry) in postgres and published it through geoserver. Now trying to add point on openlayers webpage online and saving it to wfs_geom table but failing to do so.
I am trying to add points to wfs_geom with below code. This is my .js file -
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
featureNS: 'vishal',
featureType: 'wfs_geom',
srsName: 'EPSG:3857'
});
var xs = new XMLSerializer();
var sourceWFS = new ol.source.Vector({
loader: function (extent) {
$.ajax('http://localhost:8080/geoserver/haryana/ows?', {
type: 'GET',
data: {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typename: 'wfs_geom',
srsname: 'EPSG:3857',
bbox: extent.join(',') + ',EPSG:3857'
}
}).done(function (response) {
sourceWFS.addFeatures(formatWFS.readFeatures(response));
});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:3857'
});
var layerWFS = 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: layerWFS.getSource()
});
var map = new ol.Map({
target: 'map',
controls: [],
interactions: [
interactionSelectPointerMove,
new ol.interaction.MouseWheelZoom(),
new ol.interaction.DragPan()
],
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://{1-4}.aerial.maps.cit.api.here.com' +
'/maptile//2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png' +
'?app_id=TFzZOKyEry5cavZxVoe7&app_code=PLrOWVHdpxyVR_Dy0RLbnw',
opaque: false,
attributions: []
})
}),
layerWFS
],
view: new ol.View({
center: ol.proj.fromLonLat([-1.7, 53.2]),
zoom: 12
})
});
//wfs-t
var dirty = {};
var transactWFS = function (mode, f) {
var node;
switch (mode) {
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;
}
var payload = xs.serializeToString(node);
$.ajax('http://localhost:8080/geoserver/haryana/ows?', {
type: 'POST',
dataType: 'xml',
processData: false,
contentType: 'text/xml',
data: payload
}).done(function() {
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 'btnPoint':
interaction = new ol.interaction.Draw({
type: 'Point',
source: layerWFS.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function (e) {
transactWFS('insert', e.feature);
});
break;
case 'btnLine':
interaction = new ol.interaction.Draw({
type: 'LineString',
source: layerWFS.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function (e) {
transactWFS('insert', e.feature);
});
break;
case 'btnArea':
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: layerWFS.getSource()
});
interaction.on('drawend', function (e) {
transactWFS('insert', e.feature);
});
map.addInteraction(interaction);
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;
}
});
$('#btnZoomIn').on('click', function() {
var view = map.getView();
var newResolution = view.constrainResolution(view.getResolution(), 1);
view.setResolution(newResolution);
});
$('#btnZoomOut').on('click', function() {
var view = map.getView();
var newResolution = view.constrainResolution(view.getResolution(), -1);
view.setResolution(newResolution);
});
this is my html page -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>openlayers</title>
<title>ol3-wfs-t</title>
<link type="text/css" rel="stylesheet" href="css/ol3-wfs-t-main.css" />
<link type="text/css" rel="stylesheet" href="css/ol3-wfs-t-button-material.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="thenode" style="position: absolute; top: 60px; left: 0px; width: 150px; background-color: white; z-index: 9999;"> </div>
<button id="btnPoint" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--accent">
<i class="material-icons">add_location</i>
</button>
<button id="btnLine" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">timeline</i>
</button>
<button id="btnArea" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">signal_cellular_null</i>
</button>
<button id="btnEdit" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">build</i>
</button>
<button id="btnDelete" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">delete</i>
</button>
<button id="btnZoomIn" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">zoom_in</i>
</button>
<button id="btnZoomOut" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">zoom_out</i>
</button>
<script type="text/javascript" src="js/index3.js"></script>
</body>
</html>
points drawn are not updated in postgres table.
