Публикация wfs через геосервер, доступ к нему через openlayers3, редактирование WFS и автоматическое сохранение его в базе данных postgres - PullRequest
Новая
       31

Публикация wfs через геосервер, доступ к нему через openlayers3, редактирование WFS и автоматическое сохранение его в базе данных postgres

0 голосов
/ 19 апреля 2019

Я пытаюсь получить доступ к шейп-файлу из геосервера как WFS и редактировать его онлайн, и в то же время он должен быть сохранен в таблице wfs_geom в базе данных postgres. Я создал таблицу геометрии "wfs_geom" (колонки - id, геометрия) в postgres и опубликовал ее через геосервер. Теперь пытаемся добавить точку на веб-странице openlayers онлайн и сохранить ее в таблице wfs_geom, но не можем этого сделать.

Я пытаюсь добавить очки к wfs_geom с кодом ниже. Это мой файл .js - 

var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
    featureNS: 'vishal',
    featureType: 'wfs_geom',
    srsName: 'EPSG:3857'
});
var xs = new XMLSerializer();
var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax('http://localhost:8080/geoserver/haryana/ows?', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.0.0',
                request: 'GetFeature',
                typename: 'wfs_geom',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }

        }).done(function (response) {
            sourceWFS.addFeatures(formatWFS.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857'
});

var layerWFS = new ol.layer.Vector({
    source: sourceWFS
});

var interaction;

var interactionSelectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
});

var interactionSelect = new ol.interaction.Select({
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#FF2828'
        })
    })
});

var interactionSnap = new ol.interaction.Snap({
    source: layerWFS.getSource()
});

var map = new ol.Map({
    target: 'map',
    controls: [],
    interactions: [
        interactionSelectPointerMove,
        new ol.interaction.MouseWheelZoom(),
        new ol.interaction.DragPan()
    ],
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://{1-4}.aerial.maps.cit.api.here.com' +
                '/maptile//2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png' +
                '?app_id=TFzZOKyEry5cavZxVoe7&app_code=PLrOWVHdpxyVR_Dy0RLbnw',
                opaque: false,
                attributions: []
            })
        }),
        layerWFS
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-1.7, 53.2]),
        zoom: 12
    })
});

//wfs-t
var dirty = {};
var transactWFS = function (mode, f) {
    var node;
    switch (mode) {
        case 'insert':
            node = formatWFS.writeTransaction([f], null, null, formatGML);
            break;
        case 'update':
            node = formatWFS.writeTransaction(null, [f], null, formatGML);
            break;
        case 'delete':
            node = formatWFS.writeTransaction(null, null, [f], formatGML);
            break;
    }
    var payload = xs.serializeToString(node);
    $.ajax('http://localhost:8080/geoserver/haryana/ows?', {
        type: 'POST',
        dataType: 'xml',
        processData: false,
        contentType: 'text/xml',
        data: payload
    }).done(function() {
        sourceWFS.clear();
    });
};

$('button').click(function () {
    $(this).siblings().removeClass('btn-active');
    $(this).addClass('btn-active');
    map.removeInteraction(interaction);
    interactionSelect.getFeatures().clear();
    map.removeInteraction(interactionSelect);

    switch ($(this).attr('id')) {

        case 'btnEdit':
            map.addInteraction(interactionSelect);
            interaction = new ol.interaction.Modify({
                features: interactionSelect.getFeatures()
            });
            map.addInteraction(interaction);
            map.addInteraction(interactionSnap);
            dirty = {};
            interactionSelect.getFeatures().on('add', function (e) {
                e.element.on('change', function (e) {
                    dirty[e.target.getId()] = true;
                });
            });
            interactionSelect.getFeatures().on('remove', function (e) {
                var f = e.element;
                if (dirty[f.getId()]) {
                    delete dirty[f.getId()];
                    var featureProperties = f.getProperties();
                    delete featureProperties.boundedBy;
                    var clone = new ol.Feature(featureProperties);
                    clone.setId(f.getId());
                    transactWFS('update', clone);
                }
            });
            break;

        case 'btnPoint':
            interaction = new ol.interaction.Draw({
                type: 'Point',
                source: layerWFS.getSource()
            });
            map.addInteraction(interaction);
            interaction.on('drawend', function (e) {
                transactWFS('insert', e.feature);
            });
            break;

        case 'btnLine':
            interaction = new ol.interaction.Draw({
                type: 'LineString',
                source: layerWFS.getSource()
            });
            map.addInteraction(interaction);
            interaction.on('drawend', function (e) {
                transactWFS('insert', e.feature);
            });
            break;

        case 'btnArea':
            interaction = new ol.interaction.Draw({
                type: 'Polygon',
                source: layerWFS.getSource()
            });
            interaction.on('drawend', function (e) {
                transactWFS('insert', e.feature);
            });
            map.addInteraction(interaction);
            break;

        case 'btnDelete':
            interaction = new ol.interaction.Select();
            interaction.getFeatures().on('add', function (e) {
                transactWFS('delete', e.target.item(0));
                interactionSelectPointerMove.getFeatures().clear();
                interaction.getFeatures().clear();
            });
            map.addInteraction(interaction);
            break;

        default:
            break;
    }
});
$('#btnZoomIn').on('click', function() {
    var view = map.getView();
    var newResolution = view.constrainResolution(view.getResolution(), 1);
    view.setResolution(newResolution);
});

$('#btnZoomOut').on('click', function() {
    var view = map.getView();
    var newResolution = view.constrainResolution(view.getResolution(), -1);
    view.setResolution(newResolution);
});

это моя HTML-страница - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>openlayers</title>

    <title>ol3-wfs-t</title>
    <link type="text/css" rel="stylesheet" href="css/ol3-wfs-t-main.css" />
    <link type="text/css" rel="stylesheet" href="css/ol3-wfs-t-button-material.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"></script>
</head>

<body>

<div id="map" class="map"></div>
<div id="thenode" style="position: absolute; top: 60px; left: 0px; width: 150px; background-color: white; z-index: 9999;">&nbsp;</div>


<button id="btnPoint" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--accent">
    <i class="material-icons">add_location</i>
</button>

<button id="btnLine" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">timeline</i>
</button>
<button id="btnArea" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">signal_cellular_null</i>
</button>
<button id="btnEdit" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">build</i>
</button>
<button id="btnDelete" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">delete</i>
</button>
<button id="btnZoomIn" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">zoom_in</i>
</button>
<button id="btnZoomOut" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
    <i class="material-icons">zoom_out</i>
</button>
<script type="text/javascript" src="js/index3.js"></script>
</body>
</html>

набранные очки не обновляются в таблице postgres.

...