leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

前言

leaflet 入门开发系列环境知识点了解:

内容概览

leaflet结合geoserver利用WFS服务实现图层新增
源代码demo下载

效果图如下:

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

  • 用leaflet插件绘制图形工具draw的新增图形以及回调函数获取绘制图形空间信息,绘制工具的github地址:
    https://github.com/geoman-io/leaflet-geoman
  • geoserver默认WFS服务是没有编辑操作权限的,所以需要在geoserver设置权限,允许编辑操作才行,截图如下:



  • 部分核心代码:
//绘制工具draw
map.pm.addControls({
position: ‘topleft‘,
drawCircle: false,
drawMarker:false,
drawCircleMarker:false,
drawPolyline:false,
drawRectangle:false,
cutPolygon:false,
removalMode:false
});

//绘制图形之前
map.on(‘pm:drawstart‘, e => {
if(geojsonLayer){
map.removeLayer(geojsonLayer);
geojsonLayer = null;
}
});

map.on(‘pm:create‘, e => {
//console.log(e);
geojsonLayer = e.layer;
geojsonLayer.addTo(map);
e.layer.unbindPopup();
var elements = ‘<span>名称:</span><input type="text" id="estate_num" /></br><span>备注:</span><input type="text" id="holder_nam" /></br><button type="button" id="addBtn">新增</button>‘;
e.layer.on(‘popupopen‘, function(e){
$("#addBtn").click(function(){
if(geojsonLayer){
//构造polygon
var polygon = ‘‘;
var data = geojsonLayer.toGeoJSON().geometry.coordinates[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];
addLayers(polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackAddLayersWFSService);
}
});
});
e.layer.bindPopup(elements).openPopup(e.latlng);
});
  • 图层新增函数
/*图层新增
*@method addLayers
*@param polygon 图形
*@param fieldValue1 字段1值
*@param fieldValue2 字段2值
*@return callback
*/
function addLayers(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:Insert handle="WebGIS">‘;
xml += ‘<opengis:testLayer>‘;
xml += ‘<opengis:the_geom>‘;
xml += ‘<gml:MultiPolygon srsName="EPSG:4326">‘;
xml += ‘<gml:polygonMember>‘;
xml += ‘<gml:Polygon>‘;
xml += ‘<gml:outerBoundaryIs>‘;
xml += ‘<gml:LinearRing>‘;
xml += ‘<gml:coordinates decimal="." cs="," ts=" ">‘ + polygon + ‘</gml:coordinates>‘;
xml += ‘</gml:LinearRing>‘;
xml += ‘</gml:outerBoundaryIs>‘;
xml += ‘</gml:Polygon>‘;
xml += ‘</gml:polygonMember>‘;
xml += ‘</gml:MultiPolygon>‘;
xml += ‘</opengis:the_geom>‘;
xml += ‘<opengis:estate_num>‘ + fieldValue1 + ‘</opengis:estate_num>‘;
xml += ‘<opengis:holder_nam>‘ + fieldValue2 + ‘</opengis:holder_nam>‘;
xml += ‘</opengis:testLayer>‘;
xml += ‘</wfs:Insert>‘;
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);
}
})
}

几点说明:
1.xmlns:opengis="http://webgis.com",geoserver工作区的url;

完整demo源码见小专栏文章尾部小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

原文地址:https://www.cnblogs.com/giserhome/p/12268132.html

时间: 2024-11-03 01:05:55

leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)的相关文章

leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet 的插件库,非常有用 内容概览 leaflet结合geoserver利用WFS服务实现图层删除源代码demo下载 效果图如下: 本篇主要是在上一篇leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,leaflet通过调用geoserver发布的地图服务WFS来

openlayers6结合geoserver利用WFS服务实现图层删除功能(附源码下载)

内容概览 1.openlayers6结合geoserver利用WFS服务实现图层删除功能2.源代码demo下载 效果图如下: 本篇主要是在上一篇openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,openlayers6通过调用geoserver发布的地图服务WFS来达到图层删除记录的目的.与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送.查询可以采用json,但增加,删除,修改都只能

cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium结合geoserver利用WFS服务实现图层编辑功能2.源代码demo下载 效果图如下: 本篇主要是在上一篇cesium结合geoserver利用WFS服务实现图层新增(附源码下载)基础上实现的,cesium通过调用geoserver发布的地图服务WFS来达到图层编辑记录的目

leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)

前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet 的插件库,非常有用 内容概览 leaflet 实现地形剖面分析源代码 demo 下载 本篇 demo 利用 leaflet api 实现地形剖面分析,效果图如下: 完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏 文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波 原文地址:h

openlayers6实现webgl点图层渲染效果(附源码下载)

前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同渲染器类型的图层.以前,地图只使用一种渲染策略,并且地图中的所有图层都必须实施该策略.现在,可以使用包含使用不同渲染技术的图层的地图.例如,这使得可以在同一地图中将Canvas(2D)图层与基于WebGL的图层组合在一起.也可以使用自定义渲染器创建图层.因此,您可以拥有一个使用另一个库(例如d3)的

leaflet地图全图以及框选截图导出功能(附源码下载)

前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet 的插件库,非常有用 内容概览 leaflet地图截图导出功能源代码demo下载 效果图如下: 本篇主要参考截图插件domtoimage:https://github.com/tsayen/dom-to-image地图全图导出直接用上面的domtoimage插件,然后矩形框选截图导出也是在domtoi

cesium 结合 geoserver 实现地图属性查询(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium 结合 geoserver 实现地图属性查询2.源代码 demo 下载 效果图如下: 实现思路:首先利用 geoserver 发布的图斑 WFS 服务,通过 url 的 rest 请求,构造属性查询形式,获取 geojson 数据源:然后调用cesium api 的 Cesi

cesium结合geoserver实现地图空间查询(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium 结合 geoserver 实现地图空间查询2.源代码 demo 下载 效果图如下: 实现思路:首先利用 geoserver 发布的图斑 WFS 服务,通过 url 的 rest 请求,构造空间查询形式,获取 geojson 数据源:然后调用cesium api 的 Cesi

openlayers6结合geoserver实现地图矢量瓦片(附源码下载)

内容概览 1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载 效果图如下: 实现思路:利用Geoserver发布矢量切片服务,然后openlayers调用矢量瓦片服务渲染加载,geoserver发布矢量服务步骤自行百度搜索相关教程,网上很多.最后,通过地图点击事件交互,实现图形高亮以及气泡窗口显示信息详情效果. 具体实现过程 利用geoserver发布好的矢量瓦片服务预览效果,直接F12看源码,来对应整合到demo var geojsonLayer = n