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

Posted 2023-03-25

【中文标题】如何使用 OpenLayers 将属性插入 WFS？

【英文标题】：How to insert attributes into a WFS using OpenLayers?

【发布时间】：2016-06-15 14:00:52

【问题描述】：

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

【问题讨论】：

只需调用 f.set('foo', 'bar') ，其中 'bar' 是用户的输入，然后将其传递给 writeTransaction

@bartvde 你能详细说明一下吗？我是 openlayers 和 Javascript 的新手

【参考方案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 文档，了解如何在可以使用提示时执行此操作。不过我很好奇，如何使用 UI api？

这取决于你使用什么来构建你的 UI（用户 Inetrface）。例如，如果您使用 jquery，您可以添加一个对话框让用户添加他的文本。如果您不使用任何 api，那么 js promt 功能就足够了。很高兴能帮助朋友