二、Openlayers3.20.1通过Geoserver修改数据库中的数据

一、操作结果

操作前，点的name属性为空，并且他们挤在一起

操作后，他们的点分散开

二、操作代码

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link href="ol.css" rel='stylesheet' />
    <script src="ol-debug.js" type="text/javascript"></script>
    <script src="jquery-3.1.1.js" type="text/javascript"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div style="position:absolute;top:25px;left:15px;z-index:20"><button id="updatePoint">修改点</button></div>
    <div id="map"></div>
    <script>
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'
            })
        });
        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: "http://localhost:8080/geoserver/HBAJ/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=HBAJ:center_point&outputFormat=application%2Fjson",
                format: new ol.format.GeoJSON()
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    fill: new ol.style.Fill({
                        color: "#ff0000"
                    }),
                    radius: 5
                })
            })
        }); 

        var view = new ol.View({
            center: new ol.proj.fromLonLat([120, 30]),
            zoom: 5
        });
        var map = new ol.Map({
            layers: [layer, vector],
            view: view,
            target: "map",
            logo: false
        })

        var select = new ol.interaction.Select();

        var modify = new ol.interaction.Modify({
            features: select.getFeatures()
        });


        var format = new ol.format.WFS();

        var add = document.getElementById("updatePoint");
        add.addEventListener("click", function () {
            map.addInteraction(select);
            map.addInteraction(modify);
        });

        var format = new ol.format.WFS();
        modify.on('modifyend', function (evt) {
            var feature = evt.features.getArray()[0].clone();
            var point = new ol.proj.toLonLat(feature.getGeometry().getCoordinates());
            feature.set('name', '修改这个点的name属性和位置1');
            feature.set('geom', new ol.geom.Point([point[1],point[0]]));
            feature.setId(evt.features.getArray()[0].getId());
            feature.unset('geometry');


            var xml = format.writeTransaction(null, [feature], null, {
                featureNS: "www.hbaj.com",
                featurePrefix: "HBAJ",
                featureType: "center_point"
            });

            var serializer = new XMLSerializer();
            var featString = serializer.serializeToString(xml);


            $.ajax({
                url: "http://localhost:8080/geoserver/HBAJ/wfs",
                type: "POST",
                data: featString,
                contentType: 'text/xml',
                success: function (req) {
                    select.getFeatures().clear();
                    console.log(req);
                }
            });
        });
    </script>
</body>

</html>

三、难点操作
问题一、为什么用clone()函数？用来复制modify交互修改后的feature对象。
问题二、需要设置feature的ID，后台才能知道修改哪一个feature。

二、Openlayers3.20.1通过Geoserver修改数据库中的数据

推荐阅读更多精彩内容