[英]Getting map in json format coming from a geoserver using wms or wfs
[英]Javascript editing WFS from GeoServer using OpenLayers
在阅读了关于如何使用OpenLayers编辑WFS的非常好的教程之后,我尝试使用Geoserver自己的WFS层复制它。 需要一些Javascript帮助找出它的错误。
我成功地加载了WFS和我的底图,并设法让按钮显示出来。 按钮显示正确,就像在该页面的工作示例中一样,但由于某种原因,几何数据未被保存。 每次用户绘制某些内容时,都会在表上创建一个新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/
该应用程序如下所示:
即使我在TMS中将WFS正确地显示在我在TGIS中正确显示时,在我的应用程序中,即使我指定了EPSG 27700(尽管这只是一个小麻烦),它仍会出现在海洋中的其他地方。
我现在的主要问题是如何使编辑按钮将用户编辑保存到WFS层?
我暂时没有真正看到OpenLayers愤怒,我有点放松更新我的工作示例。 我只是将一个新的JSFiddle与简单的WFS-T插入多边形组合在一起。
我在生产中使用Geoserver 2.8(开发和测试中的2.9)。
数据库后端是PostGIS 2.1的生产版(2.2 dev)。
小提琴使用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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.