Skip to content

Instantly share code, notes, and snippets.

@tiara265

tiara265/wfs.html

Created January 14, 2018 08:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tiara265/371ac2b631fe87f72b04f1092612a01c to your computer and use it in GitHub Desktop.
Save tiara265/371ac2b631fe87f72b04f1092612a01c to your computer and use it in GitHub Desktop.
Download ZIP
(WFS-T) How to edit and save vecto layer. I use openlayer 3.5, geoserver and postgis
Raw
wfs.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en>
<head>
<meta charset="utf-8">
<title>TreeStore Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://localhost/TA/ol3-google-maps-master/css/ol3gm.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/TA/ol3-google-maps-master/examples/resources/layout.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v4.3.2/css/ol.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
<script src="geoext3-3.1.0/ol-3.5/apidoc/scripts/jquery.min.js"></script>
<script src="geoext3-3.1.0/ol-3.5/apidoc/scripts/bootstrap.min.js"></script>
<script src="geoext3-3.1.0/ol-3.5/build/ol.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://localhost/TA/ol3-google-maps-master/css/ol3gm.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/TA/ol3-google-maps-master/examples/resources/layout.css" type="text/css" />
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
<body>
<div id="map" class="map"></div>
<div id='button' class="btn-group btn-group-sm" role="group" aria-label="Draw">
<button id="pan" type="button" class="btn btn-primary">Pan</button>
<button id="Draw" type="button" class="btn btn-success">Draw</button>
<button id="Modify" type="button" class="btn btn-danger">Modify</button>
<button id="Delete" type="button" class="btn btn-success">Delete</button>
<button id="Save" type="button" class="btn btn-success">Save</button>
</div>
<div class="ol-overlaycontainer"></div>
<div class="ol-overlaycontainer-stopevent"><div style="position: absolute; display: none;" class="ol-overlay-container"><div id="popup" class="ol-popup">
<div id="popup-closer" class="ol-popup-closer"><i class="mdi-navigation-close"></i></div>
<div>status</div>
<div id="popup-status">n/a</div>
<div>tienda</div>
<div id="popup-tiendas">n/a</div>
</div></div><div class="ol-mouse-position"></div>
<div id='description'>
</div>
<script src="geoext3-3.1.0/ol-3.5/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhqLB9Je1yf_LjvVW6CGxr1jyKT8PdrEg"></script>
<script>
Ext.Loader.setConfig({
enabled: true,
paths: {
//'GeoExt': '../../src'
'GeoExt':'geoext3-3.1.0/src'
}
});
</script>
<script src="wfs.js"></script>
</body>
</html>
Raw
wfs.js
Ext.require([
'GeoExt.component.Map',
'GeoExt.data.store.LayersTree',
'Ext.tree.Panel',
'GeoExt.data.store.LayersTree'
]);
var mapComponent;
var mapPanel;
var treePanel;
Ext.application({
name: 'BasicTree',
launch: function() {
var group;
var olMap;
var treeStore;
var vectorSource = new ol.source.Vector({
loader: function (extent, resolution, projection) {
var url = "http://localhost:8080/geoserver/Bireuen/wfs?service=WFS"
+ "&version=1.0.0&request=GetFeature"
+ '&outputFormat=text/javascript'
+ "&typename=Bireuen:sawahb"
+ "&format_options=callback:loadFeatures"
+ '&srsname=EPSG:3857';
// use jsonp: false to prevent jQuery from adding the "callback"
$.ajax({url: url, dataType: 'jsonp', jsonp: false});
}
});
/**
* JSONP WFS callback function.
* @param {Object} response The response object.
*/
window.loadFeatures = function (response) {
vectorSource.addFeatures(new ol.format.GeoJSON().readFeatures(response));
};
var lyrSawah = new ol.layer.Vector({
source: vectorSource,
name: 'Sawah'
/*style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})*/
});
var BaseLyr = new ol.layer.Tile({
name: 'Bing Maps',
source: new ol.source.BingMaps({
imagerySet: 'AerialWithLabels',
key: 'LFumxMm3JPJacq62C4sl~vRKSfXoG8Oo2kqhWOdZR_w~AqdRiyGAmgoIpIGkcntps5dft9pXuTf0K1F3Lv7Udn5L-fpOoOw7pf_ziXhqFvXd'
})
});
group = new ol.layer.Group({
name: 'Batas Kecamatan',
layers: [BaseLyr],
visible: true
});
olMap = new ol.Map({
layers: [group, layerkab, lyrSawah],
view: new ol.View({
center: [10765773.290253,581647.580395],
maxZoom: 19,
zoom: 11
})
});
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: lyrSawah.getSource()
});
mapComponent = Ext.create('GeoExt.component.Map', {
map: olMap
});
var mapPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
border: false,
layout: 'fit',
items: [mapComponent]
});
var treeStore = Ext.create('GeoExt.data.store.LayersTree', {
layerGroup: olMap.getLayerGroup()
});
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Layer',
viewConfig: {
plugins: {ptype: 'treeviewdragdrop'}
},
store: treeStore,
rootVisible: false,
flex: 1,
border: false
});
var button = Ext.create('Ext.panel.Panel', {
contentEl: 'button',
title: 'Editor',
height: 200,
border: false,
bodyPadding: 5
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [
mapPanel,
{
xtype: 'panel',
region: 'west',
width: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
treePanel,
//description,
button
]
}
]
});
var overlayStyle = (function() {
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 255, 0.5]
})
})
});
var button = $('#pan').button('toggle');
var interaction;
$('div.btn-group button').on('click', function(event) {
var id = event.target.id;
// Toggle buttons
button.button('toggle');
button = $('#'+id).button('toggle');
// Remove previous interaction
olMap.removeInteraction(interaction);
// Update active interaction
switch(event.target.id) {
case "Draw": //untuk membuat sawah baru dgn informasi harus sesuai dgn yg ada di DB
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: lyrSawah.getSource()
});
olMap.addInteraction(interaction);
break;
case "Modify": //untuk edit data sawah (lyrSawah), yg harus diubah luas dari sawah.
interaction = new ol.interaction.Modify({
features: new ol.Collection(lyrSawah.getSource().getFeatures())
});
olMap.addInteraction(interaction);
break;
default:
break;
}
});
var selectFeat = new ol.interaction.Select();
olMap.addInteraction(selectFeat);
var selectedFeat = selectFeat.getFeatures();
function deleteFeatures() {
if (selectedFeat.getLength() > 0) {
var toDeleteFeat = selectFeat.getFeatures().getArray()[0];
vectorSource.removeFeature(toDeleteFeat);
selectFeat.getFeatures().remove(toDeleteFeat);
}
else
window.alert("Please select a layer first :" + selectedFeat.getLength());
}
$('#Delete').on('click', function () {
deleteFeatures();
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment