Openlayers complete code for WFS-T operation

The wfs-t operation should be noted earlier, and the following is a complete example of Openlayers wfs-t operation. The sample code comes from Openlayers3_wfs-t in GitHub.

$ (document). Ready (function () {/** Map width and height-window resize */var Mapdiv = $ (' #map ');
    Mapdiv.height ($ (window). Height ());

    Mapdiv.width ($ (window). width ());
        $ (window). Resize (function () {Mapdiv.height ($ (window). Height ());
    Mapdiv.width ($ (window). width ());
}); /**--------------------------------------------*//** Initial Map Settings */var map = new ol. Map ({target: ' map ', layers: [New Ol.layer.Tile ({source:new ol.source.Stamen ({l Ayer: ' Toner-lite '})], Controls:ol.control.defaults (). Extend ([New OL.CONTROL.SCA  Leline (), new Ol.control.MousePosition ({undefinedhtml: ' None ', Coordinateformat: Ol.coordinate.createStringXY (2), ClassName: ' Mouse-position ')]), View:new ol. View ({zoom:15, center:ol.proj.transform ([20.457680, 44.817154], ' epsg:4326 ', 'epsg:3857 ')//belgrade, Serbia}); /**--------------------------------------------*//** defining WFS sources and adding new layers to the map */var Polygonsource = new Ol.source.Vector ({url: ' Http://localhost:8080/geoserver/wfs? ' + ' Service=wfs&amp ; ' + ' version=1.1.0& ' + ' request=getfeature& ' + ' Typenames=wfst-test:polygo 
        n& ' +//here goes Your-workspace:your-layer ' outputformat=json& ' + ' srsname=epsg:3857 ',

    Format:new Ol.format.GeoJSON ()}); 
        var linesource = new Ol.source.Vector ({url: ' Http://localhost:8080/geoserver/wfs? ' + ' service=wfs& ' +  ' version=1.1.0& ' + ' request=getfeature& ' + ' typenames=wfst-test:line& ' +//here goes Your-workspace:your-layer ' outputformat=json& ' + ' srsname=epsg:3857 ', format:new ol.format.g

    Eojson ()}); var pointsource = new Ol.source.Vector ({url: ' Http://localhost:8080/geoserver/wfs? ' + ' service=wfs& ' + ' version=1. 1.0& ' + ' request=getfeature& ' + ' typenames=wfst-test:point& ' +//here goes your-workspace:you

    R-layer ' outputformat=json& ' + ' srsname=epsg:3857 ', Format:new Ol.format.GeoJSON ()});

    var polygon = new Ol.layer.Vector ({preload:infinity, source:polygonsource});

    var line = new Ol.layer.Vector ({preload:infinity, source:linesource});

    var point = new Ol.layer.Vector ({preload:infinity, source:pointsource});
    Map.addlayer (Polygon);
    Map.addlayer (line);
Map.addlayer (point); /**--------------------------------------------*//** Create custom controls for drawing features, modifying features a
    nd removing features */Window.app = {};

    var app = Window.app; Tools Panel Toggle Control button App. Panelbtn= function (opt_options) {var options = Opt_options | |
        {};
        var btn = document.createelement (' button ');
        Btn.setattribute (' type ', ' button ');
        Btn.setattribute (' id ', ' Panel-button ');
        Btn.classname = ' Panel-button ';

        btn.innerhtml = ' <span class= ' Glyphicon glyphicon-chevron-down ' ></span> ';
    Ol.control.Control.call (this, {element:btn, target:options.target});
    }; Ol.inherits (app.
    PANELBTN, Ol.control.Control); Map.addcontrol (new app).

    PANELBTN ()); Draw, modify, delete tools within Panel app. Toolspanel = function (opt_options) {var options = Opt_options | |
        {};
        var panel = document.createelement (' div ');
        Panel.setattribute (' id ', ' Panel ');

        panel.classname = ' Panel ';
        var drawbtn = document.createelement (' button ');
        Drawbtn.classname = ' tool-btn ';
        Drawbtn.setattribute (' type ', ' button '); Drawbtn.setattribute (' id ', 'Draw-tool ');

        drawbtn.innerhtml = ' <span class= ' Glyphicon glyphicon-plus ' ></span> ';
        var modifybtn = document.createelement (' button ');
        Modifybtn.classname = ' tool-btn ';
        Modifybtn.setattribute (' type ', ' button ');
        Modifybtn.setattribute (' id ', ' modify-tool ');

        modifybtn.innerhtml = ' <span class= ' Glyphicon glyphicon-pencil ' ></span> ';
        var deletebtn = document.createelement (' button ');
        Deletebtn.classname = ' tool-btn ';
        Deletebtn.setattribute (' type ', ' button ');
        Deletebtn.setattribute (' id ', ' delete-tool ');

        deletebtn.innerhtml = ' <span class= ' Glyphicon glyphicon-minus ' ></span> ';
        var selectmenu = document.createelement (' select ');
        Selectmenu.setattribute (' id ', ' selecttype ');

        Selectmenu.classname = ' Form-control ';
        var Optionpolygon = document.createelement (' option ');
        Optionpolygon.setattribute (' value ', ' polygon '); Optionpolygon.innerhtML = ' Polygon ';
        var optionline = document.createelement (' option ');
        Optionline.setattribute (' value ', ' line ');

        optionline.innerhtml = ' LineString ';
        var optionpoint = document.createelement (' option ');
        Optionpoint.setattribute (' value ', ' point ');

        optionpoint.innerhtml = ' point ';
        Selectmenu.appendchild (Optionpolygon);
        Selectmenu.appendchild (Optionline);


        Selectmenu.appendchild (Optionpoint);
        Panel.appendchild (DRAWBTN);
        Panel.appendchild (MODIFYBTN);
        Panel.appendchild (DELETEBTN);

        Panel.appendchild (Selectmenu);
    Ol.control.Control.call (this, {element:panel, target:options.target});

    }; Ol.inherits (app.
    Toolspanel, Ol.control.Control); Map.addcontrol (new app).
Toolspanel ()); /**--------------------------------------------*//** Tools Panel Toggle functionality */var Paneltools = $ (' #pane
    L '); var Panelbutton = $ (' #panel-button ');
    Panelbutton.click (function () {if (Paneltools.css (' top ') = = = ' -50px ') {panelbutton.animate ({

            Top: ' 50px '}, {duration: ' $ ', queue:false});
            Paneltools.animate ({top: ' 0 '}, {duration: ' $ ', queue:false});
        Panelbutton.html (' <span class= ' Glyphicon glyphicon-chevron-up ' ></span> ');

            } else {panelbutton.animate ({top: ' 0 '}, {duration: ' $ ', queue:false});
            Paneltools.animate ({top: ' -50px '}, {duration: ' $ ', queue:false});
        Panelbutton.html (' <span class= ' Glyphicon glyphicon-chevron-down ' ></span> ');
}
    }); /**--------------------------------------------*//** Adding functionality to our tools *///draw $ (' #selectTyp
    E '). Change (function () {map.getinteractions (). Clear ();

    }); function DefineType () {var geom_tyPe
        var Geom_source;
                Switch ($ (' #selectType '). Val ()) {case ' polygon ': geom_type = ' polygon ';
                Geom_source = Polygonsource;
            return [Geom_type, Geom_source];
                Case ' line ': Geom_type = ' LineString ';
                Geom_source = Linesource;
            return [Geom_type, Geom_source];
                Case ' point ': Geom_type = ' point ';
                Geom_source = Pointsource;
            return [Geom_type, Geom_source];
        Default:console.log (' Nothing selected!!! ');
        }} $ (' #draw-tool '). Click (function () {var type = DefineType () [0];
        var Source = DefineType () [1];
        Map.getinteractions (). Clear (); var draw = new Ol.interaction.Draw ({source:source, Type:type, Geometryname: ' GeoMet
        Ry '});

        Map.addinteraction (Draw); Draw.on (' Drawend ', functIon (e) {var geomtype = E.feature.getgeometry (). GetType (). toString (). toLowerCase ();

    Transact (' Insert ', E.feature, Geomtype)});

    });
        Modify $ (' #modify-tool '). Click (function () {map.getinteractions (). Clear ();
        var select = new Ol.interaction.Select ();
        var modify = new Ol.interaction.Modify ({features:select.getFeatures ()});
        Map.addinteraction (select);

        Map.addinteraction (Modify); Modify.on (' Modifyend ', function (e) {var geomtype = E.features.getarray () [0].getgeometry (). GetType (). Tolowerc
            ASE ();
        Transact (' Update ', E.features.getarray () [0], Geomtype);

    });

    });
        Delete $ (' #delete-tool '). Click (function () {map.getinteractions (). Clear ();
        var select = new Ol.interaction.Select ();
        Map.addinteraction (select); Select.on (' Select ', function (e) {if (Select.getfeatures (). GetArray (). Length = = 0) {Console.log (' null ');
                } else {var geomtype = E.target.getfeatures (). GetArray () [0].getgeometry (). GetType (). toLowerCase ();
                Transact (' delete ', E.target.getfeatures (). GetArray () [0], Geomtype);
                var F; Switch (geomtype) {case ' polygon ': F = Polygonsource.getfeaturebyid (e.target.g
                        Etfeatures (). GetArray () [0].getid ());
                        Polygonsource.removefeature (f);
                        E.target.getfeatures (). Clear ();
                    Break
                        Case ' linestring ': F = Linesource.getfeaturebyid (E.target.getfeatures (). GetArray () [0].getid ()];
                        Linesource.removefeature (f);
                        E.target.getfeatures (). Clear ();
                    Break Case ' point ': F = Pointsource.getfeaturebyid (E.target.getfeatures (). GetArray () [0].GEtid ());
                        Pointsource.removefeature (f);
                        E.target.getfeatures (). Clear ();
                    Break
                Default:console.log (' Type of feature unknown!!! ');
    }

            }
        });
}); /**--------------------------------------------*//** TRANSACTION function */function Transact (Transtype, feat, ge
        Omtype) {if (Geomtype = = = ' linestring ') {geomtype = ' line ';
        } var formatwfs = new Ol.format.WFS (); var formatgml = new Ol.format.GML ({featurens: ' http://lukag/wfst-test.com ',//Your namespace FEA Turetype:geomtype,//fill in the layer name here, the layer name in this program is point, line and polygon,//is obtained through the feature geometry type, has certain particularity, easy to be confused Srsna
        Me: ' epsg:3857 '}); Switch (transtype) {case ' Insert ': node = Formatwfs.writetransaction ([feat], NULL, NULL, form
                ATGML);
 Break           Case ' Update ': node = formatwfs.writetransaction (null, [feat], NULL, FORMATGML);
            Break
                Case ' Delete ': node = formatwfs.writetransaction (null, NULL, [feat], FORMATGML);
        Break
        } s = new XMLSerializer ();
        str = s.serializetostring (node);
        Console.log (str); $.ajax (' Http://localhost:8080/geoserver/wfs ', {type: ' POST ', DataType: ' xml ', PROCESSD

    Ata:false, ContentType: ' Text/xml ', data:str}). Done (); }
/** -------------------------------------------- */
});

The above is a complete example, just change the GeoServer service address to your own.