Javascript 使用 OpenLayers 从 GeoServer 编辑 WFS

Question

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

我成功地加载了 WFS 和我的底图，并设法让按钮显示出来。按钮显示正确，就像在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/

应用如下所示：

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

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

Answer 1

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

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

数据库后端是生产中的 PostGIS 2.1（2.2 开发版）。

小提琴使用 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();
});