Openlayers和geoserver对图层进行编辑

• 1，Openlayers展示地图文件

Openlayers可以展示在线地图文件，创建一个新的Map，并设置地图展示的图层和中心点。实现代码如下：

var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: [-73.99710639567148, 40.742270050255556],
//center: [0, 0],
maxZoom: 19,
zoom: 13,
//zoom: 2,
projection: 'EPSG:4326'
}) 
});

Center：设置地图展示的中心点
MaxZoom：设置地图展示的最大图层级别
Zoom：设置地图展示的初始图层级别
Projection：设置地图展示的坐标格式

• 2，在openlayers上画点，多边形，圆形

在地图上原有图层标注点，多边形，和圆形，openlayers官网提供的有demo。HTML页面代码需要设置一个select框，选择需要绘制的图形，主要代码如下：

<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">none</option>
</select>

在HTML页面设置好之后，需要用js代码实现具体的功能，主要实现代码如下：

var draw, snap;
var typeSelect = document.getElementById('type');

function addInteractions() {
if(typeSelect.value !== 'None'){
draw = new Draw({
source: vectorSource,
type: typeSelect.value
});
draw.on('drawend', function(e) {
// 绘制结束时暂存绘制的feature
drawedFeature = e.feature;
});
map.addInteraction(draw);
snap = new Snap({source: vectorSource});
map.addInteraction(snap);
}
}

• 3，openlayers展示geoserver工作空间的地图文件

Openlayers可以导入GeoJson格式的数据文件并且可以展示出来，可以把geoserver工作空间的地图数据文件转换成GeoJson格式的文件，并在地图上显示出来，代码其实就是一个aJax的一个异步请求，这里是根据WFS查询：

var vectorSource = new VectorSource({
format: new GeoJSON({
geometryName: 'the_geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8002/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
});

vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
var vectorLayer = new VectorLayer({
source: vectorSource,
style: styleFunction
});

和一般的矢量地图加载没什么两样，对于wfs而言，需要弄明白的是ol.source.Vector的url参数 ： http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326。此处我们要获取所有的要素，所以设置request=GetFeature，typeNames的值设置为nyc_roads:nyc_roads，是因为我们之前配置的图层命名如此。

• 4，Openlayers根据WFS修改geoserver工作空间地图数据文件的数据

通过wfs协议把所有的要素查询到前端界面上显示，然后选择复选框编辑，就可以选择界面上的线段，进行编辑，比如把直线编辑成W形状，然后点击按钮保存，就可以把编辑后的线段保存下来。
修改主要部分代码如下：

var selectInteraction_1 = new Select({
style: new Style({
stroke: new Stroke({
color: 'red',
width: 2
})
})
});

// 修改器
var modifyInteraction = new Modify({
style: new Style({
stroke: new Stroke({
color: 'red',
width: 5
})
}),
features: selectInteraction_1.getFeatures()
});
modifyInteraction.on('modifyend', function(e) {
// 把修改完成的feature暂存起来
modifiedFeatures = e.features;
});
var select_1= document.getElementById('select1');
select_1.onchange=function() {
if (this.checked) {
// 勾选选择复选框时，添加选择器到地图
map.removeInteraction(selectInteraction_1);
map.addInteraction(selectInteraction_1);
} else {
// 不勾选选择复选框的情况下，移出选择器和修改器
map.removeInteraction(selectInteraction_1);
document.getElementById('modify1').checked = false;
map.removeInteraction(modifyInteraction);
modifiedFeatures = null;
}
};
var modify_1= document.getElementById('modify1');
modify_1.onchange=function() {
if (this.checked) {
// 勾选修改复选框时，添加选择器和修改器到地图
document.getElementById('select1').checked = true;
map.removeInteraction(modifyInteraction);
map.addInteraction(modifyInteraction);
map.removeInteraction(selectInteraction_1);
map.addInteraction(selectInteraction_1);
} else {
// 不勾选修改复选框时，移出修改器
map.removeInteraction(modifyInteraction);
modifiedFeatures = null;
}
};

var save_1= document.getElementById('save1');
// 保存新绘制的feature
save_1.onclick =function() {
if (modifiedFeatures && modifiedFeatures.getLength() > 0) {

// 转换坐标
var modifiedFeature = modifiedFeatures.item(0).clone();
// 注意ID是必须，通过ID才能找到对应修改的feature
modifiedFeature.setId(modifiedFeatures.item(0).getId());
// 调换经纬度坐标，以符合wfs协议中经纬度的位置
modifiedFeature.getGeometry().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;
}
});
modifyWfs([modifiedFeature]);
}
}

上面代码主要是获取原要素的属性和修改之后的属性，之后保存到服务器（geoserver），保存请求如下：
// 把修改提交到服务器端

function modifyWfs(features) {
var WFSTSerializer = new WFS();
var featObject = WFSTSerializer.writeTransaction(null,
features, null, {
featureType: 'nyc_roads', 
featureNS: 'http://localhost:8002/nyc_roads', // 注意这个值必须为创建工作区时的命名空间URI
srsName: 'EPSG:4326'
});
// 转换为xml内容发送到服务器端
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8002/geoserver/wfs?service=wfs');
// 指定内容为xml类型
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}

• 5，Openlayers根据WFS删除geoserver工作空间地图数据文件的数据

删除的主要代码如下：

var select= document.getElementById('select');
var selectInteraction = new Select({
style: new Style({
stroke: new Stroke({
color: 'red',
width: 10})})});
select.onchange = function(){
if (this.checked) {
map.removeInteraction(selectInteraction);
map.addInteraction(selectInteraction);
} else {
map.removeInteraction(selectInteraction);
}
};
var delete_1= document.getElementById('delete');
// 保存新绘制的feature
delete_1.onclick = function() {
// 删选择器选中的feature
if (selectInteraction.getFeatures().getLength() > 0) {
deleteWfs([selectInteraction.getFeatures().item(0)]);
// 3秒后自动更新features
setTimeout(function() {
selectInteraction.getFeatures().clear();
// queryWfs();
}, 3000);
}}

选择所要删除的要素，会获取到这个要素所有点的坐标并保存下来，然后上传到服务器上并删除，删除代码和修改保存服务器差不多，代码如下：

function deleteWfs(features) {
var WFSTSerializer = new WFS();
var featObject = WFSTSerializer.writeTransaction(null,
null, features, {
featureType: 'nyc_roads',
featureNS: 'http://localhost:8002/nyc_roads',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8002/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}

注意代码标红部分。

• 6，Openlayers根据WFS新增geoserver工作空间地图数据文件的数据

新增就是在地图上绘制一个新的区域，并保存各个点的坐标，主要代码如下：

var saveNew = document.getElementById('saveNew');
saveNew.onclick = function() {
// 转换坐标
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 Feature();
newFeature.setId('nyc_roads.new.' + newId);
newFeature.setGeometryName('the_geom');
newFeature.set('the_geom', null);
newFeature.set('name', newFeature.getId());
newFeature.set('modified', newFeature.getId());
newFeature.set('vsam', 0);
newFeature.set('sourcedate', '');
newFeature.set('sourcetype', '');
newFeature.set('source_id', newId);
newFeature.set('borough', '');
newFeature.set('feat_code', 0);
newFeature.set('feat_desc', '11');
newFeature.set('feat_type', 0);
newFeature.set('exported', 'true');
newFeature.setGeometry(new MultiLineString([geometry.getCoordinates()]));

addWfs([newFeature]);
// console.log()
// 更新id
newId = newId + 1;
};

新增的时候需要注意，需要把各个点的坐标添加属性，让geoserver可以顺便执行
保存方法和上面两个差不多，注意标红部分的代码，代码如下：

function addWfs(features) {
console.log(features);
var WFSTSerializer = new WFS();
var featObject = WFSTSerializer.writeTransaction(features,
null, null, {
featureType: 'nyc_roads',
featureNS: 'http://localhost:8002/nyc_roads',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8002/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}

在新增的时候注意坐标转换这部分，各个地区因为地形的不一样，所适应的坐标格式也不尽相同，所以在运用的时候，一般是运用投影坐标标注。
完整demo代码下载链接：demo下载
demo下载下来可以直接在vscode中运行，如果运行失败可以把node_modules文件夹删除掉，在重新编译运行，然后打开index.html