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

因此，我有一个正在运行的web应用程序，可以通过从Geoserver获取数据向现有的Postgis表添加点和线。我需要添加以下一个特定的功能：

我想让用户也能够将属性信息添加到地图界面上的每个点。与中一样，他们在地图上绘制的每个点都需要一些东西，允许用户也向列输入一些文本数据

我试着在这里阅读一些问题，但没有一个能为点向量层提供解决方案

如何做到这一点

我用于加载和发布WFS点功能的位是：

var vectorSource2 = new ol.source.Vector({
loader: function(extent, resolution, projection) {
var url2 =    'http://localhost:8080/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=BFTchambers:chamber2&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures2' +
'&bbox=' + extent.join(',');
$.ajax({url: url2, dataType: 'jsonp', jsonp: false})
.done(function(response) {
    pointWFS = new ol.format.WFS(),
    sourceVector2.addFeatures(pointWFS.readFeatures(response))
    });
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 20
})),
});

window.loadFeatures2 = function(response) {
console.log("Point features were drawn");
vectorSource2.addFeatures(geojsonFormat.readFeatures(response));
};
var formatWFS2 = new ol.format.WFS();
var pointGML = new ol.format.GML({
featureNS: 'http://geoserver.org/bftchamber',
featureType: 'chamber2',
});

var pointWFS = function(p,f) {
switch(p) {
case 'insert':
    node = formatWFS2.writeTransaction([f],null,null,pointGML);
    break;
case 'update':
    node = formatWFS2.writeTransaction(null,[f],null,pointGML);
    break;
case 'delete':
    node = formatWFS2.writeTransaction(null,null,[f],pointGML);
    break;
}
s = new XMLSerializer();
str = s.serializeToString(node);
$.ajax('http://localhost:8080/geoserver/wfs',{
    type: 'POST',
    dataType: 'xml',
    processData: false,
    contentType: 'text/xml',
    data: str
    }).done();
    console.log(" point features were posted to server");
}
case 'btnDrawPoint':
    interaction = new ol.interaction.Draw({
        type: 'Point',
        source: layerVector.getSource()
    });
    map.addInteraction(interaction);
    interaction.on('drawend', function(e) {
        pointWFS('insert',e.feature);
    });
    break;

---

只需按照@bartvde的建议添加属性

例如，使用您自己的示例

interaction.on（'draund'，函数（e）{
//将属性传递给要素
var-featureWithAttribute=e.feature.set（'foo'，'bar'）；
pointWFS（'insert'，featureWithAttribute）；
});

因此，此修改将发送一个包含几何体的特征，以及一个列名称
foo
的属性，该属性包含
bar
的值

现在，如果希望用户输入文本：

  interaction.on('drawend', function(e) {
    //pass an attribute to the feature
    var myAttrValue = prompt("Enter Attribute", "");
    var myFeature= e.feature;
    if (myAttrValue != null) {
     myFeature.set('foo', myAttrValue);
     }

    pointWFS('insert',myFeature);
});

当然，这只是一个使用promtdefaultjs函数的示例。但是您可以使用UI api获得类似的行为
只需调用f.set（'foo'，'bar'），其中'bar'是用户的输入，然后再将其传递给writeTransaction@bartvde你能详细说明一下吗？我是一个使用openlayers和JavascriptIt的新手，它工作起来很有魅力！真不敢相信，当可以使用prompt时，我试图查看OpenLayers文档，了解如何做到这一点。不过我很好奇，如何使用UI api？这取决于您使用什么来构建UI（用户Inetrface）。例如，如果您使用jquery，您可以添加一个对话框，让用户添加文本。如果您不使用任何api，那么js promt函数就足够了。很高兴帮助朋友