内容概览

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

效果图如下:

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

  • geoserver默认WFS服务是没有编辑操作权限的,所以需要在geoserver设置权限,允许编辑操作才行,截图如下:



  • 部分核心代码:
import {Map, View} from 'ol';
import {Draw} from 'ol/interaction';
import {Vector as VectorLayer} from 'ol/layer';
import XYZ from 'ol/source/XYZ';
import {Vector as VectorSource} from 'ol/source';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import Overlay from 'ol/Overlay';
import {getCenter} from 'ol/extent';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS'; var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer'); var overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}); closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
}; var polygon = null;
var showpopup = false;
//绘制工具
var draw = null;
//绘制工具图形
var drawsource = new VectorSource();
var drawlayer = new VectorLayer({
source: drawsource
}); //叠加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,
drawlayer
],
overlays: [overlay],
view: view
}); //绘制多边形
$("#rect_btn").click(function(){
clearMap();
showpopup = false;
addInteraction("Polygon");
});
//清空
$("#clear_btn").click(function(){
clearMap();
}); function addInteraction(value){
var geometryFunction;
switch (value) {
case "Box":
value = 'Circle';
geometryFunction = Draw.createBox();
break;
case "Polygon":
value = 'Polygon';
break;
}
draw = new Draw({
source: drawsource,
type: value,
geometryFunction: geometryFunction
});
map.addInteraction(draw);
draw.on('drawend',function(evt){
//clearMap();
showpopup = true;
map.removeInteraction(draw);
var feature = evt.feature;
console.log('geometry',feature.getGeometry().flatCoordinates);
var coordinates = feature.getGeometry().flatCoordinates;
if(coordinates && coordinates.length>0){
//构造polygon
polygon = '';
for(var i=0;i<coordinates.length;i++){
polygon += coordinates[i] + ',' + coordinates[i+1] + ' ' ;
i++;
}
//polygon += coordinates[0] + ',' + coordinates[1];
}
console.log('polygon',polygon);
//绘制多边形结束弹出气泡窗口
var extent = feature.getGeometry().getExtent();
console.log('extent',extent);
var coordinate = [(extent[0]+extent[2])/2,(extent[1]+extent[3])/2];
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>';
content.innerHTML = elements;
overlay.setPosition(coordinate); $("#addBtn").click(function(){
if(polygon){
addLayers(polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackAddLayersWFSService);
}
}); }); }
function clearMap(){
map.removeInteraction(draw);
if (drawlayer && drawlayer.getSource()) {
drawlayer.getSource().clear();
}
//隐藏气泡窗口
overlay.setPosition(undefined);
closer.blur();
}
  • 图层新增函数
/*图层新增
*@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">';
……

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

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

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

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

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

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

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. cesium结合geoserver利用WFS服务实现图层新增(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

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

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  5. cesium结合geoserver利用WFS服务实现图层删除(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

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

    前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...

  7. openlayers4 入门开发系列之图层控制(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. Nmap使用教程(一)

    基本扫描技术 扫描单个网络 nmap 192.168.1.1/www.baidu.com 扫描多个网络/目标 nmap 192.168.1.1 192.168.1.2 #将扫描同个网段内不同的ip地址 ...

  2. 从零开始ming的多人联机游戏(3)为socket通讯添加mysql数据库

    macOS下visual studio C#加载mySql 本文在上一节的基础上,添加了mysql数据库的功能.client发送信息给服务器后,服务器将收到的消息保存在数据库中. 如果client发送 ...

  3. hihoCoder 1387 A Research on "The Hundred Family Surnames"

    搬家一个月,庆祝一下 啪啪啪啪啪啪啪啪啪啪❀❀❀❀ 题目传送门 分析: 这什么奇奇怪怪的OJ,以前从来不知道的2333 以前只知道合并两个连通块时,其中一边直径端点为A,B,另一边为C,D D=max ...

  4. C#中Equals和GetHashCode

    Equals和GetHashCode Equals每个实现都必须遵循以下约定: 自反性(Reflexive): x.equals(x)必须返回true. 对称性(Symmetric): x.equal ...

  5. 优雅写Java之三(IO与文本解析)

    一.资源相关 二.路径与文件 读文件: String fileName = "str.txt"; Files.lines(Paths.get(fileName), Standard ...

  6. Miniio对象储存服务器安装教程

    #创建minio专用文件目录 mkdir -p /app/minio/data mkdir -p /app/minio/config chmod -R 777 /app/minio/data chmo ...

  7. iOS--->运行程序屏幕上下有黑边

    iOS--->运行程序屏幕上下有黑边 原因是LaunchImage没有设置好,图片等尺寸没有和对应的手机屏幕大小适配导致. 解决方法 就是要增加启动图片,把屏幕拉伸,匹配好每个机型的屏幕大小,这 ...

  8. JMeter入门 | 第一个并发测试

    JMeter入门 | 第一个并发测试 背景 近期我们组新来了一些新同事,之前从来没有用过JMeter做个并发测试,于是准备了一系列小教程去指引新同事,本章主要是新人入门体验教程,快速实现第一个接口并发 ...

  9. TypeScript躬行记(4)——泛型

    泛型是程序设计语言中的一种风格或范式,相当于类型模板,允许在声明类.接口或函数等成员时忽略类型,而在未来使用时再指定类型,其主要目的是为它们提供有意义的约束,提升代码的可重用性. 一.泛型参数 当一个 ...

  10. ORACLE ITL事务槽

    讲到ITL(事务槽)必定先说数据块,那么什么是数据块呢?先给大家上一个数据块结构图 数据块分别由块头.ITL(事务槽).表信息区.行信息区.块空闲区.行数据区组成,其中ITL用来记录在数据块发生的所有 ...