Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>WFS - GetFeature</title>
- <meta charset="utf-8"/>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">
- <style>
- .map {
- height: 400px;
- width: 100%;
- }
- </style>
- <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
- </head>
- <body>
- <div id="map" class="map"></div>
- <label >Modifier </label>
- <button name="modifier" id="mod" value="Edit"></button>
- <label >Creer </label>
- <button name="Creer" id="creer" value="creer"></button>
- <label >Stop Edition </label>
- <button name="stop_modif" id="stop_mod" value="stop_Edit"></button>
- <script>
- var draw, modify, snap;
- var maprojection= new ol.proj.Projection({
- code:'EPSG:4326',
- extent:[-20,30,20,50],
- units:'degrees',
- axisOrientation:'enu'
- });
- //surcharge de la projection EPSG:4326
- ol.proj.addEquivalentProjections([ol.proj.get('EPSG:4326'), maprojection]);
- var wfsSource = new ol.source.Vector({
- format: new ol.format.GeoJSON(),
- url: function(extent) {
- return 'http://127.0.0.1/cgi-bin/tinyows.exe?service=WFS&'+
- 'version=1.1.0&request=GetFeature&typename=tows:demo_tyny&'+
- 'outputFormat=application/json&srsname=EPSG:4326&'+
- 'bbox='+ extent.join(',')+',EPSG:4326';
- },
- strategy: ol.loadingstrategy.bbox,
- projection: maprojection
- });
- var vector = new ol.layer.Vector({
- source: wfsSource,
- style: new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'rgba(0,0,255,1.0)',
- width:4
- })
- })
- });
- var map = new ol.Map({
- layers:[vector],
- target: document.getElementById('map'),
- view: new ol.View({
- projection: maprojection,
- center: [2.5,46],
- maxZoom: 20,
- zoom: 1
- })
- });
- var etat_edition= document.getElementById('mod');
- var etat_creation= document.getElementById('creer');
- var stop_edition= document.getElementById('stop_mod');
- var draw, snap, modify; //declarees globalement pour les activers ou non a la guise
- var formatWFS = new ol.format.WFS();
- var xs = new XMLSerializer();
- var formatGML = new ol.format.GML3({
- version:'1.1.0',
- featureNS: 'http://www.mapserver.org/tinyows',
- url: 'http://127.0.0.1/cgi-bin/tinyows.exe',
- featureType:'demo_tyny',
- srsName:'EPSG:4326',
- geometryName: 'geom',
- SchemaLocation:'http://127.0.0.1/cgi-bin/tinyows.exe?service=wfs&request=DescribeFeatureType&version=1.1.0&typename=tows:demo_tyny'
- });
- 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 xml_data = xs.serializeToString(node);
- fetch('http://localhost/cgi-bin/tinyows.exe?service=wfs', {
- method:'POST',
- body: xml_data
- }).then(function() {
- wfsSource.clear();
- })
- };
- function add_snap() {
- snap = new ol.interaction.Snap({source: vector.getSource()});
- map.addInteraction(snap);
- }
- function add_modify(){
- stopInteractions();
- add_snap();
- modify = new ol.interaction.Modify({source: vector.getSource()});
- map.addInteraction(modify)
- }
- function add_creer(){
- stopInteractions();
- add_snap();
- draw = new ol.interaction.Draw({
- source: vector.getSource(),
- type:"MultiPolygon",
- geometryName:'geom'
- });
- draw.on('drawend', function(e){
- code_saisi=prompt("code_commune");
- e.feature.setProperties({'code_commune':code_saisi});
- transactWFS('insert',e.feature);
- });
- map.addInteraction(draw);
- }
- function stopInteractions() {
- map.removeInteraction(draw);
- map.removeInteraction(snap);
- map.removeInteraction(modify)
- }
- etat_edition.onclick = function() {
- add_modify();
- };
- etat_creation.onclick = function() {
- add_creer();
- };
- stop_edition.onclick = function () {
- stopInteractions();
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement