如何使用WFS-Transaction更新某些功能的属性值？

Question

我想编辑某些功能的属性值。我已经设法使用OpenLayers从GeoServer图层向浏览器显示要素数据。当用户单击地图上的某些Point时，我还设法使用PopUp显示了某些要素的属性及其值。

注意，红点是feature，带有3个单词的弹出窗口是不同的values的attributes。现在，我只想在再次单击红点时更新属性的值（最好使用附加更新按钮）。

[按照this或this之类的教程上网冲浪后，我无法将代码很好地集成到程序中。这些教程似乎没有我可以正确遵循的完整代码和演示。

下面是我的代码，如何使用WFS-T更新某些功能的属性值？如何以及在哪里将交易代码放入我的项目中？

var mymap = new ol.Map({
    target: 'mapid',
    layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
                //Vworld Tile 변경
                url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
            })
          })
    ],
    view: new ol.View({
        projection: 'EPSG:3857',
        center: ol.proj.transform([128.1591, 36.4109], 'EPSG:4326', 'EPSG:3857'),
        zoom: 8,
        minZoom: 6,
        maxZoom: 19
    }),
    logo:false
});

var vectorSource = new ol.source.Vector({
    loader: function (extent, resolution, projection) {
        var url = "http://localhost/geoserver/visualization/ows?service=WFS"
            + "&version=1.1.0&request=GetFeature"
            + "&typeName=visualization:GPR"
            + '&outputFormat=text/javascript'
            + "&format_options=callback:loadFeatures"
            + '&srsname=EPSG:3857';
        $.ajax({ url: url, dataType: 'jsonp', jsonp: false });
    }
});

window.loadFeatures = function (response) {
    vectorSource.addFeatures(new ol.format.GeoJSON().readFeatures(response));
};

var layer = new ol.layer.Vector({
    source: vectorSource,
    visible: true,
    title: 'GPR',
    strategy: ol.loadingstrategy.bbox
    })
})

mymap.addLayer(layer);
dataViewer();  // PopUp Viewer


// PopUp 
function dataViewer() {
    var overlayContainerElement = document.querySelector('.overlay-container');
    var overlayLayer = new ol.Overlay({
        element: overlayContainerElement
    })
    mymap.addOverlay(overlayLayer);

    var overlayFeatureBranch = document.getElementById('feature-branch');
    var overlayFeatureRoute = document.getElementById('feature-route');
    var overlayFeatureMilestone = document.getElementById('feature-milestone');

    // Mouse Click Function
    mymap.on('click', function (e) {  
        overlayLayer.setPosition(undefined); // clear the printed information
        mymap.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            let clickedCoord = e.coordinate;

            let featureBranch = feature.get('지사');     // attribute to display
            let featureRoute = feature.get('노선');      // attribute to display
            let featureMilestone = feature.get('이정');  // attribute to display

            overlayLayer.setPosition(clickedCoord);
            overlayFeatureBranch.innerHTML = featureBranch;
            overlayFeatureRoute.innerHTML = featureRoute;
            overlayFeatureMilestone.innerHTML = featureMilestone;
        })
    })
}

Answer 1

您可以检查此示例。 more example

<?xml version="1.0" ?>
<wfs:Transaction
   version="2.0.0"
   service="WFS"
   xmlns:fes="http://www.opengis.net/fes/2.0"
   xmlns:wfs="http://www.opengis.net/wfs/2.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://www.opengis.net/wfs/2.0
                       http://schemas.opengis.net/wfs/2.0.0/wfs.xsd">
   <wfs:Update typeName="topp:tasmania_roads">
      <wfs:Property>
         <wfs:ValueReference>TYPE</wfs:ValueReference>
         <wfs:Value>YllwBrk</wfs:Value>
      </wfs:Property>
      <fes:Filter>
         <fes:ResourceId rid="tasmania_roads.14"/>
      </fes:Filter>
   </wfs:Update>
</wfs:Transaction>

JS代码

const bodyText = `<?xml version="1.0" ?>
    <wfs:Transaction
       version="2.0.0"
       service="WFS"
       xmlns:fes="http://www.opengis.net/fes/2.0"
       xmlns:wfs="http://www.opengis.net/wfs/2.0"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.opengis.net/wfs/2.0
                           http://schemas.opengis.net/wfs/2.0.0/wfs.xsd">
       <wfs:Update typeName="topp:tasmania_roads">
          <wfs:Property>
             <wfs:ValueReference>TYPE</wfs:ValueReference>
             <wfs:Value>YllwBrk</wfs:Value>
          </wfs:Property>
          <fes:Filter>
             <fes:ResourceId rid="tasmania_roads.14"/>
          </fes:Filter>
       </wfs:Update>
    </wfs:Transaction>`;
// here is a problem. username and password of georserver is not included here.
// you should add username and password somehow. Using FormData etc. I dont remember.
// you can test this via disabling authentication of GeoServer for development.
fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'text/xml'
    },
    body: bodyText
  }).then(x => x.text())
    .then(result => {
      console.log(result);
  })

}