T O P

[资源分享]     openlayers6结合geoserver利用WFS服务实现图层编辑功能(附源码下载)

  • By - 楼主

  • 2020-03-27 10:44:12
  • 内容概览

    1.openlayers6结合geoserver利用WFS服务实现图层编辑功能
    2.源代码demo下载

    效果图如下:

    本篇主要是参照基础上实现的,openlayers6通过调用geoserver发布的地图服务WFS来达到图层编辑记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送。查询可以采用json,但增加,删除,修改都只能采用XML形式Transaction

    • 部分核心代码,完整的见源码demo下载
    //叠加geoserver发布的wms图层
    var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
    var wmsSource = new TileWMS({
    url: geoserverUrl+'/wms',
    params: {'LAYERS': 'WebGIS:testLayer', 'TILED': true},
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
    });
     
    var wmsLayer = new TileLayer({
    source: wmsSource
    });
     
     
    var view = new View({
    projection: 'EPSG:4326',
    //center: [0, 0],
    //zoom: 2
    center: [113.90271877, 22.95186415],
    zoom: 13
    })
     
    var map = new Map({
    target: 'map',
    layers: [
    new TileLayer({
    source: new XYZ({
    //url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
    })
    }),
    wmsLayer
    ],
    overlays: [overlay],
    view: view
    });
     
    //监听地图鼠标事件
    map.on('singleclick',function(e) {
    if (e.dragging) {
    return;
    }
    var feature =map.forEachFeatureAtPixel(e.pixel,
    function(feature) {
    return feature;
    });
    //console.log('feature',feature);
    //console.log('e',e);
     
    if(feature==undefined){
    //隐藏气泡窗口
    overlay.setPosition(undefined);
    closer.blur();
    }
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wmsSource.getFeatureInfoUrl(
    e.coordinate, viewResolution, 'EPSG:4326',
    {'INFO_FORMAT': 'application/json'});
    if (url) {
    fetch(url)
    .then(function (response) { return response.json(); })
    .then(function (json) {
    //document.getElementById('info').innerHTML = html;
    console.log('json',json);
    var coordinate = e.coordinate;
    if(json.features.length>0){
    var properties = json.features[0].properties;
    var id = json.features[0].id;
    var geometry = json.features[0].geometry;
    //var elements = '名称:'+properties.estate_num+'</br>备注:'+properties.holder_nam+'</br><button type="button" id="editBtn">编辑</button>';
    var elements = '<span>名称:</span><input type="text" id="estate_num" value = "'+properties.estate_num+'" /></br><span>备注:</span><input type="text" id="holder_nam" value = "'+properties.holder_nam+'" /></br><button type="button" id="editBtn">编辑</button>';
    content.innerHTML = elements;
    overlay.setPosition(coordinate);
    $("#editBtn").unbind("click");
    $("#editBtn").click(function(){
    //console.log('编辑按钮点击事件');
    if(id)
    {
    //构造polygon
    var polygon = '';
    var data = geometry.coordinates[0][0];
    for(var i=0;i<data.length;i++){
    var item = data[i];
    polygon += item[0] + ',' + item[1] + ' ' ;
    }
    polygon += data[0][0] + ',' + data[0][1];
    //只编辑属性信息,默认图形信息不变,感兴趣的,读者你们可自行编辑图形变化信息,这里预留图形参数传值了的
    editLayers(id,polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackEditLayersWFSService);
    }
    });
    }
    });
    }
     
    })
     
    /*图层编辑
    *@method editLayers
    *@param polygon 图形
    *@param fid 记录fid值
    *@param fieldValue1 字段1值
    *@param fieldValue2 字段2值
    *@return callback
    */
    function editLayers(fid,polygon,fieldValue1,fieldValue2, callback){
    var xml = '<wfs:Transaction service="WFS" version="1.0.0" xmlns:opengis="http://webgis.com" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">';
    xml += '<wfs:Update typeName="WebGIS:testLayer">';
    xml += '<wfs:Property>';
    xml += '<wfs:Name>the_geom</wfs:Name>';
    xml += '<wfs:Value>';
    xml += '<gml:LineString>';
    xml += '<gml:coordinates decimal="." cs="," ts=" ">' + polygon + '</gml:coordinates>';
    xml += '</gml:LineString>';
    xml += '</wfs:Value>';
    xml += '</wfs:Property>';
    xml += '<wfs:Property>';
    xml += '<wfs:Name>estate_num</wfs:Name>';
    xml += '<wfs:Value>' + fieldValue1 + '</wfs:Value>';
    xml += '</wfs:Property>';
    xml += '<wfs:Property>';
    xml += '<wfs:Name>holder_nam</wfs:Name>';
    xml += '<wfs:Value>' + fieldValue2 + '</wfs:Value>';
    xml += '</wfs:Property>';
    xml += '<ogc:Filter>';
    xml += '<ogc:FeatureId fid="' + fid + '"/>';
    xml += '</ogc:Filter>';
    xml += '</wfs:Update>';
    xml += ' </wfs:Transaction>';
     
     
     
    $.ajax({
    url: geoserverUrl+'/wfs',
    async: true,
    data:xml,
    type:'Post',
    contentType: 'text/xml',
    success(result) {
    callback(result);
    },
    error(err) {
    console.log(err);
    }
    })
    }
    /*
    * 图层编辑回调函数
    */
    function callbackEditLayersWFSService(data){
    console.log('data',data);
    //刷新图层
    clearMap();
    wmsSource.refresh();
    }
     
    function clearMap(){
    //隐藏气泡窗口
    overlay.setPosition(undefined);
    closer.blur();
    }

    几点说明:
    1.WebGIS,geoserver工作区;
    2.testLayer,操作图层名称;
    3.fid,操作图层的默认固有属性字段。
    4.estate_num,holder_nam,操作图层属性字段。
    图层编辑回调函数,操作成功或者失败,可以在网页的控制台网络看请求结果

     

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册


Image

豆包 1

6666