Question

所以我有一个正在运行的网络应用程序，并且能够通过从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来获得类似的行为

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

1 个答案: