openlayers调起WFS服务进行增、删、改操作及相关问题汇总

前言

WFS服务是OGC联盟制定的一种用于地理信息数据传输和交换的标准，服务支持许多操作，在geoserver的官方文档中，我们了解到，如下图：

可以看到最底下的Transaction操作，支持对数据的创建、更新和删除。另外，geoserver提供的WFS服务已经实现了Transaction操作，而openlayers中，也提供了调取Transaction的方法，它就是ol.format.WFS类的writeTransaction方法。

以下通过简单示例，介绍下writeTransaction的用法。

一、简单示例

正式进入之前，这里先用wfs服务把数据加载上了。这一步并不是Transaction操作的必要步骤，只是为了方便后续的操作。

1、加载数据-writeGetFeature

这里先通过调用WFS服务的getFeature操作来加载数据，对应ol中的ol.format.WFS的writeGetFeature方法。

// 服务配置，命名空间、图层、服务地址等
var geoserverData = {
   
  wsName: 'topp',
  uri: 'http://www.openplans.org/topp',
  wfsURL: 'http://localhost:8080/geoserver/topp/ows?',
  layer: 'tasmania_roads'
}
 
// 通过wfs加载数据
function loadData() {
   
  var data = {
   
    srcName: 'EPSG:4326',
    featureNS: geoserverData.uri,
    featurePrefix: geoserverData.wsName,
    featureTypes: [geoserverData.layer],
    outputFormat: 'application/json'
  }
  var request = new ol.format.WFS().writeGetFeature(data)
  fetch(geoserverData.wfsURL, {
   
    method: 'POST',
    body: new XMLSerializer().serializeToString(request),
  }).then(function (response) {
   
    return response.json()
  }).then(function (json) {
   
    var features = new ol.format.GeoJSON({
   
        geometryName: 'geom',
    }).readFeatures(json)
    if (wfsLayer) {
   
      wfsLayer.getSource().addFeatures(features)
    }
  })
}

2、写数据-writeTransaction

ol.format.wfs的writeTransaction方法，接受4个参数，前三个参数依次分别是要插入、更新、删除操作对应的Feature对象，以数组的形式。第4个参数是一个对象，里面定义了geoserver服务的相关信息。可以在一个Transaction操作中同时执行插入、更新、和删除操作。以下为了方便示例，我分开进行。

2.1 数据添加

这里开始就要用到WFS服务的Transaction操作，对应ol中的ol.format.WFS的writeTransaction方法。先来看下使用Transaction向后台数据库添加一条数据。

function addFeature(feature) {
   
  // 1、构造Feature
  let ft = new ol