Openlayers在线编辑

Openlayers提供对WFS数据进行修改的方法

在Openlayers中提供了ol.interaction方法对矢量瓦片进行修改。对于矢量服务，主要用于feature选中（点击、鼠标悬浮等），做出相应的操作，例如高亮显示什么的，改变渲染样式。看一下其中的方法：

• ol.interaction.Select
  

  

• ol.interaction.Modify
  

  

  
  ol.interaction.Modify提供对矢量要素的修改方法。

实现思路

（一）因为是实现在线编辑，不是用GeoJSON数据。在PostGIS将自己的数据进行发布。发布的格式是WFS的矢量格式的地图服务；
（二）记录发布的工作区的URL地址和名称（这个两个参数尤为重要，保证了数据修改提交是否成功）：

（三）编写代码进行修改和编辑。

代码思路

（一）使用Openlayers方法进行加载发布的矢量图层；
（二）使用interaction方法选择、修改矢量要素；

//选择要素
var selectInteraction=new ol.interaction.Select({
        style:new ol.style.Style({
            stroke:new ol.style.Stroke({
                color: 'red',
                width: 2
            })
        })
    });
//修改要素
    var modifyInteraction = new ol.interaction.Modify({
        style:new ol.style.Style({
            stroke:new ol.style.Stroke({
                color: 'black',
                width: 2
            })
        }),
        features: selectInteraction.getFeatures()
    });

（三）对修改的要素提交到GeoServer进行保存，相当于重新发布（实质是通过XML进行数据的重新提交）

 function queryWfs() {
        // 支持重新查询
        if (wfsVectorLayer) {
            map.removeLayer(wfsVectorLayer);
        }

        // 创建新的图层来加载wfs的要素
        wfsVectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON({
                    geometryName: 'geom' // 将shp格式矢量文件导入PostgreGIS数据库中，对应的表中增加了一个字段名为geom的字段，所有这里的名称就是数据库表中增加的那个字段名称
                }),                                                                                              //PostgreGIS:xian_polygon为工作空间：图层名
         
                url:''//图层地址
          }),
            style: function(feature, resolution) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width:2
                    })
                });
            }
        });
        map.addLayer(wfsVectorLayer);
    }

// 保存已经编辑的要素
    function onSave() {
        if (modifiedFeatures && modifiedFeatures.getLength() > 0) {

            // 转换坐标
            var modifiedFeature = modifiedFeatures.item(0).clone();
            // 注意ID是必须，通过ID才能找到对应修改的feature
            modifiedFeature.setId(modifiedFeatures.item(0).getId());
            // 调换经纬度坐标，以符合wfs协议中经纬度的位置
            modifiedFeature.getGeometry().applyTransform(function(flatCoordinates, flatCoordinates2, stride) {
                for (var j = 0; j < flatCoordinates.length; j += stride) {
                    var y = flatCoordinates[j];
                    var x = flatCoordinates[j + 1];
                    flatCoordinates[j] = x;
                    flatCoordinates[j + 1] = y;
                }
            });
            modifyWfs([modifiedFeature]);
        }
    }

    // 把修改提交到服务器端
    function modifyWfs(features) {
    
        var WFSTSerializer = new ol.format.WFS();
        var featObject = WFSTSerializer.writeTransaction(null,
            features, null, {
                featureType: '',  //图层名
                featureNS: '',  // 注意这个值必须为创建工作区时的命名空间URI
                srsName: 'EPSG:4326'
            });
        // 转换为xml内容发送到服务器端
        var serializer = new XMLSerializer();
        var featString = serializer.serializeToString(featObject);
        var request = new XMLHttpRequest();
        request.open('POST', '');//URL地址
        // 指定内容为xml类型
        request.setRequestHeader('Content-Type', 'text/xml');
        request.send(featString);
    }
// 在服务器端删除feature
    function deleteWfs(features) {
      var WFSTSerializer = new ol.format.WFS();
      var featObject = WFSTSerializer.writeTransaction(null,
        null, features, {
          featureType: '',  //图层名
                featureNS: '',  // 注意这个值必须为创建工作区时的命名空间URI
                srsName: 'EPSG:4326'
        });
      var serializer = new XMLSerializer();
      var featString = serializer.serializeToString(featObject);
      var request = new XMLHttpRequest();
      request.open('POST', '');
      request.setRequestHeader('Content-Type', 'text/xml');
      request.send(featString);
    }

最后即可完成在BS端完成矢量要素的在线编辑操作。