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)需修改为对应的工作空间，其他基本不变