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

Question

所以我有一个正在运行的 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;

Answer 1

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

例如使用你自己的例子

interaction.on('drawend', function(e) { //pass an attribute to the feature 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);
});

当然这只是一个使用promt默认js函数的示例。但是您可以使用您的 UI api 来获得类似的行为