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源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波