如何使用OpenLayers 3将属性插入WFS？

Question

所以我有一个正在运行的Web应用程序，可以通过从Geoserver获取数据来向现有的Postgis表添加多边形。我需要添加以下一个特定功能：

我想让用户也能够在地图界面上为每个多边形添加属性信息。就像在地图上绘制的每个多边形一样，需要有一些东西允许用户也将一些文本数据输入到列中。

我已经尝试过阅读这里的一些问题，但是没有一个人提供多个列来添加属性信息。 我有三列用户添加属性信息（名称，城市，区域）。

怎么做？

我加载和发布WFS多边形要素的位是：

    var vectorSource = new ol.source.Vector({
    loader: function (extent, resolution, projection) {
      var url = "http://localhost:8070/geoserver/geom_wfs/ows?service=WFS"+ "&version=1.1.0&request=GetFeature"+ '&outputFormat=text/javascript'+ "&typeName=geom_wfs:field"+ "&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 vectorSource2= new ol.layer.Vector({
        source: vectorSource
    });    
        
    var formatWFS2 = new ol.format.WFS();
    var formatGML = new ol.format.GML({
      featureNS: 'http://geoserver.org/geom_wfs',
      featureType: 'field'
    });

    var polyWFS = function(p,f) {
    switch(p) {
    case 'insert':
        node = formatWFS2.writeTransaction([f],null,null,formatGML);
        break;
    case 'update':
        node = formatWFS2.writeTransaction(null,[f],null,formatGML);
        break;
    case 'delete':
        node = formatWFS2.writeTransaction(null,null,[f],formatGML);
        break;
    }
    s = new XMLSerializer();
    str = s.serializeToString(node);
    $.ajax('http://localhost:8070/geoserver/wfs',{
        type: 'POST',
        dataType: 'xml',
        processData: false,
        contentType: 'text/xml',
        data: str
        }).done();
        console.log(" polygon features were posted to server");
    }
    case 'btnDrawPolygon':
        interaction = new ol.interaction.Draw({
            type: 'Polygon',
            source: layerVector.getSource()
        });
        map.addInteraction(interaction);
        interaction.on('drawend', function(e) {
          var myAttrValue = prompt("Enter length of area", "");
          var myFeature= e.feature;
          if (myAttrValue != null) {
            myFeature.set('area', myAttrValue);
          }
          polyWFS('insert',e.feature);
        });
        break;