OpenLayer向postgresql数据库添加数据

使用openlayer 编辑点线面图元，通过geoserver服务向postgresql数据库添加图元数据(这里只贴操作中核心的代码，相关变量有说明，其他的根据实际情况添加相关代码)

声明选择图元方法，声明相关的简易样式(该方法用于选中地图中的图元)

// 交互图元选择器 var selectInteraction = new ol.interaction.Select({ tolerance:100, //鼠标选中范围,给定位置周围半径内的像素 style: new ol.style.Style({ //Style 图层样式 fill: new ol.style.Fill({ color: "rgba(0,0,255,0.8)" // 颜色，渐变或图案 }), stroke: new ol.style.Stroke({ //为向量特征设置笔划样式。 color: "rgba(255,0,0,1.0)", width: 4 }), image: new ol.style.Circle({ //Circle设置矢量特征的圆形样式。 radius: 7, snapToPixel: false, fill: new ol.style.Fill({color: "red"}), stroke: new ol.style.Stroke({ color: "white", width: 4 }) }) }) }); map.addInteraction(modifyInteraction); //将交互加入地图

map：添加的地图变量

添加图元

// 保存wfs矢量图 // 发送 WFS 请求 function addWfs(features, url, workspacename, layername) { var WFSTSerializer = new ol.format.WFS(); var featObject = WFSTSerializer.writeTransaction(features, null, null, {featureNS: url, featurePrefix: workspacename, featureType: layername}); var serializer = new XMLSerializer(); var featString = serializer.serializeToString(featObject); $.ajax({ url: "http://localhost:8082/geoserver/cgzy/wfs", type: "POST", data: featString, contentType: "text/xml", success: function (data) { //设置一个定时器，用于刷新wfs图层 setTimeout(function () { selectInteraction.getFeatures().clear(); sportsWFS(); }, 1000); // console.log("Ajax request success"); }, error: function (e) { console.log("Ajax request error"); } }); }

features：[newFeature ] url：geoserver 图层所在的工作空间的url workspacename：图层所在的工作空间名 layername：图层的名称 sportsWFS()：该方法是添加WFS面图层时的方法

var newFeature = [new ol.Feature({ geom: new ol.geom.MultiPolygon([feature.getGeometry().getCoordinates()]), name: "我是新加的Polygon" })]

删除图元

//使用request发送删除请求 function deleteWfs(features, layername) { var WFSTSerializer = new ol.format.WFS(); var featObject = WFSTSerializer.writeTransaction(null, null, features, { featureType: layername, //feature对应的图层 featureNS: 'http://www.cgzy.com', //创建工作区时的工作空间 srsName: 'EPSG:4326' //坐标系 }); var serializer = new XMLSerializer(); var featString = serializer.serializeToString(featObject); var request = new XMLHttpRequest(); request.open('POST', 'http://localhost:8082/geoserver/cgzy/wfs'); request.setRequestHeader('Content-Type', 'text/xml'); request.send(featString); selectInteraction.getFeatures().clear(); //设置一个定时器，用于刷新wfs图层 setTimeout(function () { sportsWFS(); }, 1000); // console.log("delete ok") }

features：[newFeature ] （同上） layername：图层的名称 sportsWFS()：该方法是添加WFS面图层时的方法

编辑图元

// 加入编辑控件 用于修改特性几何图形的交互 modifyInteraction = new ol.interaction.Modify({ features: selectInteraction.getFeatures() }); map.addInteraction(modifyInteraction); //给modifyInteraction绑定modifyend编辑结束方法 // 把修改完成的 feature 暂存起来 modifyInteraction.on("modifyend", function (e) { //放置编辑后结束后的功能代码 modifywfs(feature, "http://www.cgzy.com", "cgzy", "sports"); }); // 修改矢量图元 //提交修改后的数据 function modifywfs(modifyfeatures, url, workspacename, layername) { if (modifyfeatures && modifyfeatures.getLength() > 0) { var stride = 2; // 调整经纬度位置 modifyfeatures.item(0).getGeometry().applyTransform(function (flatCoordinates, flatCoordinates2, stride) { for (var j = 0; j < flatCoordinates.length; j += stride) { var y = flatCoordinates[j]; var x = flatCoordinates[j + 1]; flatCoordinates[j] = x; flatCoordinates[j + 1] = y; } }); // 克隆一个 feature var modifyFeature = modifyfeatures.item(0).clone(); // 重新设置一个 id modifyFeature.setId(modifyfeatures.item(0).getId()); modifyFeature.setGeometryName("geom"); if (layername == "sports") { modifyFeature.set('name', '修改过的面Polygon'); modifyFeature.geom = new ol.geom.MultiPolygon([modifyfeatures.item(0).getGeometry().getCoordinates()]); } var format = new ol.format.WFS(); var xml = format.writeTransaction(null, [modifyFeature], null, { featureNS: url, featurePrefix: workspacename, featureType: layername, }); var serializer = new XMLSerializer(); var featString = serializer.serializeToString(xml); $.ajax({ url: "http://localhost:8082/geoserver/cgzy/wfs", type: "POST", data: featString, contentType: "text/xml", success: function (req) { // console.log(req); }, error:function (e) { console.log("Ajax request error") } }); // 最后显示要转换回来显示 modifyfeatures.item(0).getGeometry().applyTransform(function (flatCoordinates, flatCoordinates2, stride) { for (var j = 0; j < flatCoordinates.length; j += stride) { var y = flatCoordinates[j]; var x = flatCoordinates[j + 1]; flatCoordinates[j] = x; flatCoordinates[j + 1] = y; } }); } }

features：[newFeature ] url：geoserver 图层所在的工作空间的url workspacename：图层所在的工作空间名 layername：图层的名称 sportsWFS()：该方法是添加WFS面图层时的方法

MultiPolygon()该方法指向面图层，这里所做的所有操作都是指向面图层的，点(MultiPoint)、线(MultiLineString)图元操作方法不同，其他基本无异，代码中关于wfs数据URL（http://localhost:8082/geoserver/cgzy/wfs）路径的请求，除工作空间(这里使用的是cgzy)需修改为对应的工作空间，其他基本不变