OpenLayer向postgresql数据库添加数据

桃扇骨 2023-06-12 04:24 9阅读 0赞

使用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;
                }
            });
        }
    }

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