openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)
内容概览
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服务实现图层新增功能(附源码下载)的更多相关文章
- leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- cesium结合geoserver利用WFS服务实现图层删除(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- openlayers6实现webgl点图层渲染效果(附源码下载)
前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- PHP——foreach
一.foreach 在PHP中foreach循环语句,常用于遍历数组,一般有两种使用方式:不取下标.取下标 (一)只取值,不取下标 <?php foreach (数组 as 值){ //执行的任 ...
- IO系统-标准C的I/O和文件I/O
1.标准C的I/O 1.1常用函数和结构体 char *fgets(char *s, int size, FILE *stream); //整行输入 int printf(const char *fo ...
- Python3基础之初识Python
Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序, 作为ABC语 ...
- jdk for centos7
https://www.cnblogs.com/chy123/p/6750351.html
- SMB信息泄露
开门见山 1. 用netdiscover -r 扫描与攻击机同一网段的靶机,发现PCS 2. 扫描靶场开放信息 3. 挖掘靶场全部信息 4. 针对SMB协议,使用空口令,若口令尝试登录,并查看敏感文件 ...
- C语言博客作业5
本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 作业链接 我在这个课程的目标是 学会函数函数的编写与自定义函数 这个作业在那个具体方面帮助我实现目标 通过pta作业练习 参考 ...
- sys model 常见用法
import sys #与python解释器 交互 print(sys.argv) #是一个列表 解释器执行文件名后面可以增加字符串 以列表元素形式添加进去def foo(): print('ok') ...
- SOAP与REST API的爱恨情仇
之前一直想写些RESTful相关的文章,却一直未付诸行动.直到最近接手一个新的项目,对这块重新温习,乘此机会写些相关帖子.欢迎大家评论留言,如有错漏之处,也望各位大佬不令赐教. 话不多说,干活顶上. ...
- js中函数this的指向
this 在面试中,js指向也常常被问到,在开发过程中也是一个需要注意的问题,严格模式下的this指向undefined,这里就不讨论. 普通函数 记住一句话哪个对象调用函数,该函数的this就指向该 ...
- pymysql连接提示format: a number is required, not str
最近想随手写一个简单的员工管理系统,第一次使用python连接数据库,在这个过程中就遇到了一些问题,遂记录 遇到问题习惯性百度一下,很多教程都不适合新手,有些还不知道是不是瞎写的,所以我觉得有必要自己 ...