Untitled

<!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 &nbsp;</label>
        <button name="modifier" id="mod" value="Edit"></button>
        <label >Creer &nbsp;</label>
        <button name="Creer" id="creer" value="creer"></button>
        <label >Stop Edition &nbsp;</label>
        <button name="stop_modif" id="stop_mod" value="stop_Edit"></button>
        <script>
          var map, wfsSource
          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 raster= new ol.layer.Tile({
            source: new ol.source.OSM()
          });
          var map = new ol.Map({
           controls: ol.control.defaults().extend([
             new ol.control.MousePosition({
              coordinateFormat: ol.coordinate.createStringXY(4),
              projection: 'EPSG:4326',
              className: 'custom-mouse-position',
              target: document.getElementById('map'),
              undefinedHTML:'&nbsp;'
             }),
           new ol.control.ScaleLine()
           ]),
           target: 'map',
           layers: [raster, vector ],
           view: new ol.View({
            center: [2.5,46],
            maxZoom:20,
            zoom: 4
           })
          });
          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 formatGML =  new ol.format.GML3({
            version:'1.1.0',
            srsName:'EPSG:4326',
            url:'http://127.0.0.1/cgi-bin/tinyows.exe',
            featureNS: 'http://www.tinyows.org/',
            featureType:'demo_tyny',
            geometryName: 'geometry',
            SchemaLocation: 'http://127.0.0.1/cgi-bin/tinyows.exe?service=wfs&request=DescribeFeatureType&version=1.1.0&typename=tows:demo_tyny'
          });
          var xs = new XMLSerializer();
          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);
            const response = fetch("http://127.0.0.1/cgi-bin/tinyows.exe?service=wfs",{
              method: 'POST',
              body: xml_data
            }).then(function() {
              wfsSource.clear();
            })
          };
          function add_snap() {
            snap = new ol.interaction.Snap({source: wfsSource});
            map.addInteraction(snap);
          };
          function add_modify(){
            stopInteractions();
            add_snap();
            modify = new ol.interaction.Modify({source: wfsSource});
            map.addInteraction(modify)
          };
          function add_creer(){
            stopInteractions();
            add_snap();
            draw = new ol.interaction.Draw({
                source: wfsSource,
                type:"MultiPolygon",
                geometryName:'geometry'
            });
            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>