Javascript使用OpenLayers从GeoServer编辑WFS [英] Javascript editing WFS from GeoServer using OpenLayers

问题描述

在阅读了非常好的有关如何进行编辑的教程之后使用OpenLayers的WFS ，我尝试使用Geoserver的WFS层对其进行复制.需要一些Javascript帮助来查找问题所在.

After reading a very good tutorial on how to edit WFS with OpenLayers, I've tried replicating it but with my own WFS layer from Geoserver. Need some Javascript help finding what's wrong with it.

我设法成功加载了WFS和底图，并设法显示了按钮.这些按钮可以正确显示，就像在该页面上的工作示例中一样，但是对于某些情况无法保存几何数据的原因.每次用户绘制东西时，都会在表上创建一个新的ID，但其关联的几何列为空

I managed to load the WFS and my basemap successfully and managed to get the buttons to show up. The buttons appear correctly like in the working example from that page but, for some reason the geometry data isn't being saved. Every time a user draws something, a new id is created on the table but its associated geometry column is left empty

要发布的位是:

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();
}

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

Fiddle with the whole code (apologies if it looks messy, most of it comes from the working example 2 ) https://jsfiddle.net/Luffydude/ex06jr1e/6/

该应用程序如下所示:

即使我将WFS加载到QGIS中时，我的WFS正确显示在泰晤士河沿岸，但在我的应用程序中，即使我指定了EPSG 27700，它也会出现在海洋的其他位置(尽管目前这只是一个小麻烦).

Also even though my WFS appears correctly along the river Thames when I load it in QGIS, in my app it appears somewhere else in the ocean even though I specified EPSG 27700 (though this is just a minor annoyance at the moment).

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

My main problem now is how to make the edit buttons save user edits to the WFS layer?

推荐答案

一段时间以来，我并没有真正地对OpenLayers感到愤怒，我有点不愿更新自己的工作示例.我只是整理了一个新的 JSFiddle 和用于多边形的简单WFS-T插入.

I haven't really looked at OpenLayers in anger for a while and I kind of let slip updating my working examples. I just put together a new JSFiddle with simple WFS-T insert for polygons.

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

I use Geoserver 2.8 in production (2.9 in dev and testing).

数据库后端是生产中的PostGIS 2.1(2.2开发).

Database backend is PostGIS 2.1 in production (2.2 dev).

小提琴使用OpenLayers 3.16.

The fiddle uses OpenLayers 3.16.

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

A few notes to my setup. I tend to have all geometries in EPSG:3857 and I do not specify the SRS in PostGIS. Haters gonna hate but I simply set my geometry column to geometry. This way I can get lines, points and polygons in the same table. I cannot see the mixed geometry in QGIS but this is a simple test setup. It's important that the geometry field is called geometry. It's probably possible but I could not make this work with the field being called the_geom or geom. In that case a record is inserted but the geometry field is empty as described in the post. I believe this is the problem.

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中的代码位.

Here is the code bit from the 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();
});

这篇关于Javascript使用OpenLayers从GeoServer编辑WFS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！