三、Openlayers3.20.1通过Geoserver删除数

作者: 拜拜都不行啊 | 来源:发表于2017-07-18 18:35 被阅读66次

三、Openlayers3.20.1通过Geoserver删除数
二、Openlayers3.20.1通过Geoserver修改数
访问Geoserver rest跨域问题解决
GeoServer 基础教程（二）：GeoServer 的 We
geoserver 矢量切图 vector tile
学习利用Java发布geoserver 文件过程以及demo
GeoServer与ArcServer对比
Geoserver与uDig
数据保存（四）立即执行中删除
spring.jpa.hibernate.ddl-auto属性配

一、操作结果

没有操作前

操作后那个点没有啦

二、操作代码

<!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:95px;left:95px;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 format = new ol.format.WFS();

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

        var format = new ol.format.WFS();
        select.on('select', function (evt) {
            var feature = evt.selected[0];
            var point = new ol.proj.toLonLat(feature.getGeometry().getCoordinates());



            var xml = format.writeTransaction(null, null, [feature], {
                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) {
                    var all = vector.getSource().getFeatures();
                    for (var m = 0, n = all.length; m < n; m++) {
                        if (all[m].getId() === feature.getId()) {
                            vector.getSource().removeFeature(all[m]);
                        }
                    }
                    select.getFeatures().clear();
                    console.log(req);
                }
            });
        });
    </script>
</body>

</html>

三、问题
问题：实在没遇到什么问题，如果你遇到可以留言。