我已经有一段时间没有真正愤怒地查看 OpenLayers 了,我有点忘记更新我的工作示例。我刚刚整理了一个新的JSFiddle https://jsfiddle.net/goldrydigital/m2ugapnu/带有用于多边形的简单 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();
});