使用 OpenLayers 从 GeoServer 编辑 WFS 的 Javascript

在阅读了非常好的 tutorial on how to edit WFS with OpenLayers 之后，我尝试使用我自己的来自 Geoserver 的 WFS 层复制它。需要一些 Javascript 帮助来找出它的问题所在。

我设法成功加载了 WFS 和我的 basemap ，并设法让按钮显示出来。这些按钮像在 working example from that page 中一样正确显示，但是由于某种原因几何数据没有被保存。每次用户绘制一些东西时，都会在表格上创建一个新的 id，但其关联的几何列是空的

发布的位是:

var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
featureNS: 'http://geoserver.org/bftchamber',
featureType: 'bft',
srsName: 'EPSG:27700'
});
var transactWFS = function(p,f) {
switch(p) {
case 'insert':
    node = formatWFS.writeTransaction([f],null,null,formatGML);
    break;
case 'update':
    node = formatWFS.writeTransaction(null,[f],null,formatGML);
    break;
case 'delete':
    node = formatWFS.writeTransaction(null,null,[f],formatGML);
    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();
}

摆弄整个代码(如果看起来很乱，请道歉，其中大部分来自工作示例 2 )
https://jsfiddle.net/Luffydude/ex06jr1e/6/

该应用程序如下所示:

使用 OpenLayers 从 GeoServer 编辑 WFS 的 Javascript-LMLPHP

此外，即使我在 QGIS 中加载时我的 WFS 沿着泰晤士河正确显示，但在我的应用程序中，即使我指定了 EPSG 27700，它也会出现在海洋中的其他地方(尽管目前这只是一个小烦恼)。

我现在的主要问题是如何让编辑按钮将用户编辑保存到 WFS 图层？

最佳答案

我已经有一段时间没有真正生气地看着 OpenLayers 了，我有点不小心更新了我的工作示例。我只是将一个新的 JSFiddle 与用于多边形的简单 WFS-T 插入组合在一起。

我在生产中使用 Geoserver 2.8(在开发和测试中使用 2.9)。

数据库后端是生产中的 PostGIS 2.1 (2.2 dev)。

fiddle 使用 OpenLayers 3.16。

关于我的设置的一些注意事项。我倾向于在 EPSG:3857 中拥有所有几何图形，并且我没有在 PostGIS 中指定 SRS。讨厌的人会讨厌，但我只是将几何列设置为几何。这样我就可以在同一个表中得到线、点和多边形。我在 QGIS 中看不到混合几何，但这是一个简单的测试设置。几何字段称为几何非常重要。这可能是可能的，但我无法使用名为 the_geom 或 geom 的字段来完成这项工作。在这种情况下，会插入一条记录，但几何字段为空，如帖子中所述。我相信这就是问题所在。

CREATE TABLE wfs_geom
(
  id bigint NOT NULL,
  geometry geometry,
  CONSTRAINT wfs_geom_pkey PRIMARY KEY (id)
)
WITH (
  OIDS=FALSE
);
ALTER TABLE wfs_geom
  OWNER TO geoserver;

这是来自 jsfiddle 的代码位。

var formatWFS = new ol.format.WFS();

var formatGML = new ol.format.GML({
    featureNS: 'https://geolytix.net/wfs',
    featureType: 'wfs_geom',
    srsName: 'EPSG:3857'
});

var s = new XMLSerializer();

var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax('https://maps.geolytix.net/geoserver/geolytix.wfs/wfs', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'wfs_geom',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }
        }).done(function (response) {
            sourceWFS.addFeatures(formatWFS.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857'
});

var layerWFS = new ol.layer.Vector({
    source: sourceWFS
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png',
                opaque: false,
                attributions: []
            })
        }),
        layerWFS
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-0.1, 51.50]),
        zoom: 13
    })
});

var interaction = new ol.interaction.Draw({
    type: 'Polygon',
    source: layerWFS.getSource()
});

map.addInteraction(interaction);

interaction.on('drawend', function (e) {
    $.ajax('https://maps.geolytix.net/geoserver/geolytix.wfs/wfs', {
        type: 'POST',
        dataType: 'xml',
        contentType: 'text/xml',
        data: s.serializeToString(formatWFS.writeTransaction([e.feature], null, null, formatGML))
    }).done();
});

关于使用 OpenLayers 从 GeoServer 编辑 WFS 的 Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37615490/

WFs

使用 OpenLayers 从 GeoServer 编辑 WFS 的 Javascript