四、WFS之Transaction添加面

作者: 拜拜都不行啊 | 来源:发表于2017-07-24 17:06 被阅读68次

四、WFS之Transaction添加面
Ajax请求WFS服务进行crud操作
SQLite异常之No transaction is activ
基于openlayers6的基本地图操作--6. 拉框查询
区块的持久化之BoltDB(五、完结篇)
Spring之Transaction
二十，Geoserver xslt变换（/transforms
实习 | 19 Mar. Day 2
GeoMesa架构
geoserver wfts服务post操作测试记录

一、操作结果

没有操作前

添加后操作后

二、操作代码

   <!DOCTYPE html>
<html>

<head>
    <title></title>
    <link href="ol.css" />
    <script src="ol-debug.js"></script>
    <script src="jquery-3.1.1.js"></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="addPoint">添加面</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()
        });

        var imagewms = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/HBAJ/wms',
                params: {
                    format: "image/png",
                    version: '1.1.1',
                    layers: "HBAJ:hebei_county"
                }
            })
        });

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

        var drawInteraction = new ol.interaction.Draw({
            type: "Polygon",
            source: vector.getSource()
        });

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

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

        var key = drawInteraction.on("drawend", function (e) {
            console.log(e.feature.getGeometry().getCoordinates());
            var points = e.feature.getGeometry().getCoordinates();
            var antitone = [[]];
            points[0].map(function (val, index) {
                var point = new ol.proj.toLonLat(val);
                antitone[0].push([point[1], point[0]]);
            });
            var feature = new ol.Feature({
                geom: new ol.geom.MultiPolygon([antitone])
            });
            var xml = format.writeTransaction([feature], null, null, {
                featureNS: "www.hbaj.com",
                featurePrefix: "HBAJ",
                featureType: "hebei_county",
                srsName: "EPSG:4326"
            });
        
            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) {
                    imagewms.getSource().updateParams({style:''});
                    console.log(req);
                }
            });
        });
    </script>
</body>

</html>

三、问题
问题：插入到数据库中，查看geom字段为空；原因是因为插入类型不一致，一般为多面（MultiPolygon）插入的是面(Polygon)类型