openlayer geoserver 实现wfs 的更新

最新推荐文章于 2024-01-04 10:41:36 发布
最新推荐文章于 2024-01-04 10:41:36 发布
阅读量348 收藏 2
点赞数
原文链接：http://www.cnblogs.com/HuangDaDa/p/10384003.html
版权

跨域问题：https://blog.csdn.net/neimeng0/article/details/80094333

关于线的wfs 更新：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="ol-debug.js"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            margin: 0 0 0 0;
        }

        .map {
            width: 100%;
            height: 92%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
    <label>Geometry type  </label>
    <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
    </select>
</form>
 <input type="button" value="查询" οnclick="queryWfs();" />
  <input id="add" type="checkbox" value="add" />新增
  <input id="saveNew" type="button" value="保存" οnclick="onSaveNew();" />

  <div id="map" style="width:100%;height:100%;"></div>

</body>
</html>
<script>
          var newId = 1;
    var wfsVectorLayer = null;
    var drawedFeature = null;

    // 创建用于新绘制feature的layer
    var drawLayer = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 5
        })
      })
    });

    // 添加绘制新图形的interaction，用于添加新的线条
    var drawInteraction = new ol.interaction.Draw({
      type: 'LineString', // 设定为线条
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 10
        })
      }),
      source: drawLayer.getSource()
    });
    drawInteraction.on('drawend', function(e) {
      // 绘制结束时暂存绘制的feature
      drawedFeature = e.feature;
    });

    var map = new ol.Map({
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      }), drawLayer],
      target: 'map',
      view: new ol.View({
        center: [126.23967989932228,48.036040730554284],
        maxZoom: 19,
        zoom: 13,
        projection: 'EPSG:4326'
      })
    });

    function queryWfs() {
      if (wfsVectorLayer) {
        map.removeLayer(wfsVectorLayer);
      }

      wfsVectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON({
            geometryName: 'the_geom'
          }),
          url: 'http://192.168.20.80:8085/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=KD:WH_0217&outputFormat=application/json&srsname=EPSG:4326'
        }),
        style: function(feature, resolution) {
          return new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 5
            })
          });
        }
      });
      map.addLayer(wfsVectorLayer);
    }

    $('#add').change(function() {
      if (this.checked) {
        // 勾选新增复选框时，添加绘制的Interaction
        map.removeInteraction(drawInteraction);
        map.addInteraction(drawInteraction);
      } else {
        // 取消勾选新增复选框时，移出绘制的Interaction，删除已经绘制的feature
        map.removeInteraction(drawInteraction);
        if (drawedFeature) {
          drawLayer.getSource().removeFeature(drawedFeature);
        }
        drawedFeature = null;
      }
    });

    // 保存新绘制的feature
    function onSaveNew() {
      // 转换坐标
      var geometry = drawedFeature.getGeometry().clone();
      geometry.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;
        }
      });

      // 设置feature对应的属性，这些属性是根据数据源的字段来设置的
      var newFeature = new ol.Feature({
	  THE_GEOM: new ol.geom.MultiLineString([geometry.getCoordinates()]),
	  });
      newFeature.setId('WH_0217.' + newId);
     //newFeature.setGeometryName('the_geom');
    // newFeature.set('the_geom', null);
     newFeature.set('name', newFeature.getId());
     newFeature.set('modified', newFeature.getId());
     newFeature.set('OBJID', '2333');
     newFeature.set('OBJNAME', '');
     newFeature.set('DEPTCODE1', '');
     newFeature.set('DEPTNAME1', newId);
     newFeature.set('DEPTCODE2', '1');
     newFeature.set('DEPTNAME2', '2');
     newFeature.set('DEPTCODE3', null);
     newFeature.set('DEPTNAME3', '');
     newFeature.set('BGID', null);
     newFeature.set('ORDATE', null);
     newFeature.set('CHDATE', null);
	 newFeature.set('NOTE_', null);
	 newFeature.set('PICTURE', null);
	 newFeature.set('SHAPE_LENG', null);
	 newFeature.set('SHAPE_LE_1', null);
	 newFeature.set('SHAPE_LE_2', null);
	 newFeature.set('DLMC', null);
    // newFeature.setGeometry(new ol.geom.MultiLineString([geometry.getCoordinates()]));

      addWfs([newFeature]);
      // 更新id
      newId = newId + 1;
      // 3秒后，自动刷新页面上的feature
      setTimeout(function() {
        drawLayer.getSource().clear();
        queryWfs();
      }, 3000);
    }

    // 添加到服务器端
    function addWfs(features) {
      var WFSTSerializer = new ol.format.WFS();
      var featObject = WFSTSerializer.writeTransaction(features,
        null, null, {
          featureType: 'WH_0217',                    //layerName
          featureNS: 'http://geoserver.KD.netKD',   //设置kd工作空间的时候填写的连接
          srsName: 'EPSG:4326'
        });
      var serializer = new XMLSerializer();
      var featString = serializer.serializeToString(featObject);
      var request = new XMLHttpRequest();
      request.open('POST', 'http://192.168.20.80:8085/geoserver/wfs?service=wfs');
      request.setRequestHeader('Content-Type', 'text/xml');
      request.send(featString);
    }


</script>

　　点更新：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="ol-debug.js"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            margin: 0 0 0 0;
        }

        .map {
            width: 100%;
            height: 92%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
    <label>Geometry type  </label>
    <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle</option>
    </select>
</form>
 <input type="button" value="查询" οnclick="queryWfs();" />
  <input id="add" type="checkbox" value="add" />新增
  <input id="saveNew" type="button" value="保存" οnclick="onSaveNew();" />

  <div id="map" style="width:100%;height:100%;"></div>

</body>
</html>
<script>
          var newId = 1;
    var wfsVectorLayer = null;
    var drawedFeature = null;

    // 创建用于新绘制feature的layer
    var drawLayer = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: new ol.style.Style({
            //填充色
        fill: new ol.style.Fill({
        color: 'red'
        }),
        //边线颜色
        stroke: new ol.style.Stroke({
        color: 'black',
        width: 3
        }),
        //形状
       image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
        color: 'red'
            })
            })
        })
    });

    // 添加绘制新图形的interaction，用于添加新的线条
    var drawInteraction = new ol.interaction.Draw({
      type: 'Point', // 设定为线条
      style:		new ol.style.Style({
            //填充色
        fill: new ol.style.Fill({
        color: 'red'
        }),
        //边线颜色
        stroke: new ol.style.Stroke({
        color: 'black',
        width: 3
        }),
        //形状
       image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
        color: 'red'
            })
            })
        }),
      source: drawLayer.getSource()
    });
    drawInteraction.on('drawend', function(e) {
      // 绘制结束时暂存绘制的feature
      drawedFeature = e.feature;
    });

    var map = new ol.Map({
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      }), drawLayer],
      target: 'map',
      view: new ol.View({
        center: [126.23967989932228,48.036040730554284],
        maxZoom: 19,
        zoom: 13,
        projection: 'EPSG:4326'
      })
    });

    function queryWfs() {
      if (wfsVectorLayer) {
        map.removeLayer(wfsVectorLayer);
      }

      wfsVectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON({
            geometryName: 'THE_GEOM'
          }),
          url: 'http://192.168.20.80:8085/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=KD:WH_0101&outputFormat=application/json&srsname=EPSG:4326'
        }),
        style: function(feature, resolution) {
          return new ol.style.Style({
            //填充色
        fill: new ol.style.Fill({
        color: 'red'
        }),
        //边线颜色
        stroke: new ol.style.Stroke({
        color: 'black',
        width: 3
        }),
        //形状
       image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
        color: 'red'
            })
            })
        });
        }
      });
      map.addLayer(wfsVectorLayer);
    }

    $('#add').change(function() {
      if (this.checked) {
        // 勾选新增复选框时，添加绘制的Interaction
        map.removeInteraction(drawInteraction);
        map.addInteraction(drawInteraction);
      } else {
        // 取消勾选新增复选框时，移出绘制的Interaction，删除已经绘制的feature
        map.removeInteraction(drawInteraction);
        if (drawedFeature) {
          drawLayer.getSource().removeFeature(drawedFeature);
        }
        drawedFeature = null;
      }
    });

    // 保存新绘制的feature
    function onSaveNew() {
      // 转换坐标
      var geometry = drawedFeature.getGeometry().clone();
      geometry.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;
        }
      });

      // 设置feature对应的属性，这些属性是根据数据源的字段来设置的
      var newFeature = new ol.Feature({
	  THE_GEOM: new ol.geom.Point(geometry.getCoordinates()),
	  });
      newFeature.setId('WH_0101.' + newId);
     //newFeature.setGeometryName('the_geom');
    // newFeature.set('the_geom', null);
     //newFeature.set('name', newFeature.getId());
     //newFeature.set('modified', newFeature.getId());
     //newFeature.set('OBJID', '2333');
     //newFeature.set('OBJNAME', '');
     //newFeature.set('DEPTCODE1', '');
     //newFeature.set('DEPTNAME1', newId);
     //newFeature.set('DEPTCODE2', '1');
     //newFeature.set('DEPTNAME2', '2');
     //newFeature.set('DEPTCODE3', null);
     //newFeature.set('DEPTNAME3', '');
     //newFeature.set('BGID', null);
     //newFeature.set('ORDATE', null);
     //newFeature.set('CHDATE', null);
	 //newFeature.set('NOTE_', null);
	 //newFeature.set('PICTURE', null);
	 //newFeature.set('SHAPE_LENG', null);
	 //newFeature.set('SHAPE_LE_1', null);
	 //newFeature.set('SHAPE_LE_2', null);
	 //newFeature.set('DLMC', null);
    // newFeature.setGeometry(new ol.geom.MultiLineString([geometry.getCoordinates()]));

      addWfs([newFeature]);
      // 更新id
      newId = newId + 1;
      // 3秒后，自动刷新页面上的feature
      setTimeout(function() {
        drawLayer.getSource().clear();
        queryWfs();
      }, 3000);
    }

    // 添加到服务器端
    function addWfs(features) {
      var WFSTSerializer = new ol.format.WFS();
      var featObject = WFSTSerializer.writeTransaction(features,
        null, null, {
          featureType: 'WH_0101',
          featureNS: 'http://geoserver.KD.netKD',
          srsName: 'EPSG:4326'
        });
      var serializer = new XMLSerializer();
      var featString = serializer.serializeToString(featObject);
      var request = new XMLHttpRequest();
      request.open('POST', 'http://192.168.20.80:8085/geoserver/wfs?service=wfs');
      request.setRequestHeader('Content-Type', 'text/xml');
      request.send(featString);
    }


</script>

　　重点：需要注意的是我初始化feature几何字段使用了the_geom，这里一定要和geoserver中的集合字段对应，不然可以添加成功，但是没有geometry；

 

转载于:https://www.cnblogs.com/HuangDaDa/p/10384003.html

geoserver中wfs-t 编辑demo
05-25
geoserver中wfs-t 编辑demo 包含添加 更新 删除 简单sample code
openlayer3 加载geoserver发布的WFS服务
weixin_34101229的博客
02-08 216
转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题，需要用jsonp解决，而jsonp需要用script加载，但加载有误，如图所示，读取cite:bou2_4p图层的GeoJSON 载入地址是这样的http://localhost:808...
前端调用geoserver服务，数据视图不能实时更新
最新发布
qq_44100149的博客
01-04 630
leaflet、openlayer加载地图服务，数据改变，视图未实时更新问题
openlayers4+geoserver wfs实现空间分析、属性查询
weixin_34208185的博客
03-09 560
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79500449 openlayers4，geoserver wfs实现空间分析、属性查询 ...
开源GIS（十四）——openlayers通过geoserver中WFS更改要素
xcymorningsun的专栏
11-30 4678
目录 一、引言 二、WFS更改要素实现 三、WFS更改要素原理 1、请求xml 2、postman使用 3、要素修改 4、返回xml 四、总结 一、引言          上文介绍了通过WFS服务进行添加，在很多情况下我们会对当前添加的要素进行修改，本篇将进行介绍，与添加大同小异，不过还是要有细节需要关注。     二、WFS更改要素实现         代码前提是使...
openlayer3加载geoserver发布的WFS服务
05-28
openlayer3加载geoserver发布的WFS服务,并通过openlayers中的line string实现人/车辆移动的轨迹信息
openlayer访问geoserver完整Demo
03-15
在"openlayer访问geoserver完整Demo"中，我们主要会涉及以下几个关键知识点： 1. **OpenLayers 3**: OpenLayers 3是这个示例的核心，它是一个强大的JavaScript库，允许开发者在网页上显示地图，控制地图交互，以及...
Geoserver+openlayer+postGis要素增删改查
02-18
"Geoserver+openlayer+postGis要素增删改查"是一个综合性的项目，它结合了三个关键组件：PostGIS、GeoServer和OpenLayers，来实现这一目标。下面将详细介绍这三个组件及其相互作用。 1. **PostGIS**： PostGIS 是 ...
Openlayer通过WFS按属性模糊查询geoserver发布的数据
a1771744344的博客
07-20 1027
function SearchLike() { let featureRequest = new ol.format.WFS().writeGetFeature({ //坐标系统 srsName:'EPSG:4326', //命名空间 featureNS:'http://www.openplans.org/spearfish', ...
openlayers 加载Geoserver wfs服务
01-06
利用openlayers加载geoserver wfs服务发布的矢量图层。
webGIS实践（geoserver+openlayer+django）3_6_openlayer与geoserver交互增删改查
吴道简的博客
05-17 792
一、效果 操作方式选择 查看，在图面上点选，可以渲染对应的矢量要素，表格中有要素的属性，点击 提交，会提示只支持insert、update、delete。 操作方式选择 增加，切换到绘制，可以在图面上绘制几何对象，完成绘制后，在属性表中修改属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 修改，可以修改矢量要素的几何和属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 删除，可以将选中的要素删除。 二、代码 增加...
WFS1.1.0协议（增删改查）+openlayers4.3.1前端构建+geoserver2.15.1安装部署+shpfile数据源配置
08-26 730
WFS简介 1.WFS即，Web要素服务，全称WebFeatureService。GIS下，支持对地理要素的插入，更新，删除，检索和发现服务。 2.属于OGC标准下的通信协议。OGC标准下的GIS服务还有：WMS、WMTS、WCS等。 3.服务根据HTTP客户请求返回GML(Geography Markup Language、地理标识语言)数据。 WFS对应于常见桌面程序中的条件查询功能，WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关...
OpenLayer加载geoserver发布的切片服务
孙霸天的专栏
03-25 525
TMS方式 栅格 <!DOCTYPE html> <html> <head> <title>openLayers使用TMS方式加载栅格切片服务</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.or
OpenLayer3通过wfs修改Geoserver中图层要素，并出现图层只读问题解决（is read-only</ows:ExceptionText>）
wo_buzhidao的博客
02-06 5052
最近在学习OpenLayer教程，通过OpenLayer加载geoserver中图层，其中遇到的问题并解决在此做下记录； 一、参考文件： 1.学习的教程为‘扯淡大叔’的OpenLayer教程，非常好，非常详细，在学习过程中遇到不懂的也请教过作者的帮助，很适合初学者学习，地址为：通过wfs修改要素 2.在遇到修改的图层提交后，network显示200，Context length：0，is r
Openlayer加载GeoServer的WFS服务
qq_40098572的博客
07-27 771
openlayer加载geoserver的wfs图层
Openlayers 通过WFS服务修改geoserver上的要素（已支持多个要素修改）
a1771744344的博客
07-14 1835
以geoserver所包含的的USA Population图层为示例， 先贴上ol获取geoserver服务 let geoMap = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON({ geometryName:'the_geom' }), url: 'ht
Openlayers加载Geoserver WFS
weixin_30344131的博客
07-24 303
1、环境说明： 操作系统：Window 7 64位 GeoServer：GeoServer 2.1.2，端口8090 Openlayers：OpenLayers-2.12 Tomcat：apache-tomcat-7.0.22，端口8080 2、数据准备及发布 本文用到的数据为一面状数据，本地shapefile文件（Continents.shp），预览图如下： 2.1、...
213：vue+openlayers 通过WFS服务加载geoserver发布的geojson矢量数据
大剑师兰特的GIS世界
03-10 658
第213个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的矢量数据，这里是加载geojson数据方法，具体的加载方式参考源代码。
openlayer编辑geoserver
09-02
你可以使用OpenLayers的`ol.layer.Tile`或`ol.layer.Image`来加载GeoServer发布的地图图层。例如，使用`ol.layer.Tile`加载一个WMS图层： ``` const wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值