Skip to content

Instantly share code, notes, and snippets.

@Manjulajntuk

Manjulajntuk/javascript

Created July 5, 2017 10:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Manjulajntuk/408dfc9af196a558850163d763eead93 to your computer and use it in GitHub Desktop.
Save Manjulajntuk/408dfc9af196a558850163d763eead93 to your computer and use it in GitHub Desktop.
Download ZIP
WFS-T
Raw
javascript
I have been trying for wfs-t from past one week. Sofar i have reached to display wfs feature on map. Now how the postgres is connected to the geoserver and how the xml will get updated every time when i add new feature on map.
My code related to it is
-----------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>WFS</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link type="text/css" rel="stylesheet" href="ol.css" />
<link type="text/css" rel="stylesheet" href="material.indigo-pink.min.css" />
<script src="ol.js"></script>
<script src="material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
.map {
height: 100%;
width: 100%;
}
#btnPoint {
position: absolute;
top: 10px;
left: 10px;
}
#btnLine {
position: absolute;
top: 10px;
left: 80px;
}
#btnArea {
position: absolute;
top: 10px;
left: 150px;
}
#btnEdit {
position: absolute;
top: 10px;
left: 220px;
}
#btnDelete {
position: absolute;
top: 10px;
left: 290px;
}
.btn-active {
background-color: #0d47a1 !important;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<button id="btnPoint" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add_location</i>
</button>
<button id="btnLine" class="mdl-button mdl-js-button mdl-button--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--colored">
<i class="material-icons">signal_cellular_null</i>
</button>
<button id="btnEdit" class="mdl-button mdl-js-button mdl-button--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--colored">
<i class="material-icons">delete</i>
</button>
<script type="text/javascript">
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
featureNS: '172.31.4.67:9999/geoserver/mywork',
featureType: 'the_geom',
srsName: 'EPSG:4326'
});
var xs = new XMLSerializer();
var sourceWFS = new ol.source.Vector({
loader: function (extent) {
var url = 'http://172.31.4.67:9999/geoserver/mywork/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&typename=mywork:maha_marge&' +
'outputFormat=text/javascript&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
alert(url);
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'callback:loadFeatures',
jsonp: 'format_options'
});
},
//strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:4326'
});
window.loadFeatures = function (response) {
layerWFS
.getSource()
.addFeatures(new ol.format.GeoJSON().readFeatures(response));
};
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({
title: 'India',
source: new ol.source.TileWMS({
url: 'http://ndem.nrsc.gov.in/geoserver_v3/ndem50k/wms',
params: {LAYERS: 'ndem50k:stateadmin50census2011'}
})
}),
layerWFS
],
view: new ol.View({
projection: 'EPSG:4326',
center: [82.491,21.899],
zoom: 5
})
});
//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);
alert(payload);
$.ajax('myfolder//loadxml.php', {
type: 'POST',
dataType: 'xml',
processData: false,
contentType: 'text/xml',
data: payload
}).done(function() {
sourceWFS.clear();
});
alert("out"+payload);
};
$('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;
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment