利用Geoerver+Mysql+openlayers实现gis空间数据线段、多边形的存储、编辑、平移等功能

Geoerver+Mysql+openlayers实现gis空间数据线段、多边形的存储、编辑、平移
本人新手一枚，本篇文章是对自己遇到的问题进行简单梳理，错误的地方还望不吝赐教，本篇实现内容主要参考‘扯淡大叔’写的文章，因不同的环境，实现效果需自己调整，大叔的链接：http://weilin.me/ol3-primer/ch12/12-01-05.html。
1
首先，原来我用的是Geoerver+postgis+mysql，后来为了使用方便，索性将空间数据和业务数据统一保存到mysql，实现方法如下：https://blog.csdn.net/GISuuser/article/details/80728267
因为涉及到空间数据的编辑保存，所以在做保存操作的时候会接触到基础性问题先理一下:
1、‘readonly’只读。保存数据的时提示无法保存，提示只读，这是需要在geoserver的data内设置一下权限，具体操作可查看（测试可行）：
https://blog.csdn.net/shaxiaozilove/article/details/61619388
2、跨域问题。跨域问题经常会碰到，访问被拒，解决办法：
https://www.cnblogs.com/ytwy/p/6823955.html
https://blog.csdn.net/mengdong_zy/article/details/51784781
Mysql数据库–数据类型一致：保存几何数据的字段‘SHAPE’（实际情况名称可能略有不同），其数据类型最好设置成geomtry类型，这样可以在同一个表内保存任意类型的数据，包括多段线，多边形，点，圆等，如果设置的数据类型是Polygon或者其他的指定单一类型，就无法保存其他数据类型Line，Circle的数据。

前端代码
<button type="submit " class="btn btn-primary">图形新增</button>
<input id="addLayer" type="checkbox" value="add" />新增
<input id="saveNew" type="button" value="保存" onclick="onSaveNew();" />
<input type="button" value="刷新" onclick="queryWfs();" />
<button type="submit " class="btn btn-primary">图形删除</button>
<input id="selectDelete" type="checkbox" value="select" />选择
<input id="delete" type="button" value="删除选中Feature" onclick="onDeleteFeature();" />
<button type="submit " class="btn btn-primary">图形编辑</button>
<input id="select" type="checkbox" value="select" />选择
<input id="modify" type="checkbox" value="modify" />编辑
<input id="save" type="button" value="保存" onclick="onSave();" />
<input id="moveInteraction" type="checkbox" value="moveInteraction"/>平移
<input id="addLayer1" type="checkbox" value="add" />新增多边形
<input id="saveNew1" type="button" value="保存" onclick="onSaveNew1();" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
新增要素
var onSaveNew;//保存函数
var queryWfs;
var modifiedFeatures = null;
var onDeleteFeature;
var onSave;
var onSaveNew1;//多边形测试
var onSaveNew2;//圆测试

//因为要进行编辑修改，因为选用wfs类型图层
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'SHAPE' // 因为数据源里面字段'SHAPE'存储的是几何图形数据，所以需要指定
}),
url: 'http://locahost:7777/geoserver/degao_mysql/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=degao_mysql:zhuguanduan_line&srsname=EPSG:4326'
}),
style: function(feature, resolution) {//两个参数暂时没用的上
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
2
})
});
}
});

// 底图这里我选用的是天地图
var layers = [new ol.layer.Tile(
{
title: "tianditu",
source: new ol.source.XYZ(
{
url: "http://t1.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
})
})
]
;

//图层主入口
var map = new ol.Map({
layers: layers,
target: 'editData',
view: new ol.View({
projection: 'EPSG:4326',
//center: [13172306.74073, 4074323.92117], //4326的视角入口
center: [118.34589, 34.34524], //3857的视角入口
zoom: 14
})
});
map.addLayer(vectorLayer);

//天地图文字标注
var tian_di_tu_annotation = new ol.layer.Tile(
{
title: "天地图文字标注",
source: new ol.source.XYZ(
{
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
})
});
map.addLayer(tian_di_tu_annotation);

// 创建用于新绘制feature的layer
var drawLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
5
})
})
});
map.addLayer(drawLayer);

// 添加绘制新图形的interaction，用于添加新的线条
var newId = 1;
var drawedFeature = null;
var drawInteraction = new ol.interaction.Draw({
type: 'LineString', // 设定为线条
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
10
})
}),
source: drawLayer.getSource()
});

drawInteraction.on('drawend', function(e) {
// 绘制结束时暂存绘制的feature
drawedFeature = e.feature;
});

/* drawInteraction.on('drawstart', function(e) {
//清除先前未保存的图形
if (drawedFeature) {
drawLayer.getSource().removeFeature(drawedFeature);
}
drawedFeature = null;
});*/

$('#addLayer').change(function() {
if (this.checked) {
document.getElementById('selectDelete').checked=false;
document.getElementById('select').checked=false;
document.getElementById('modify').checked=false;
// 勾选新增复选框时，添加绘制的Interaction
map.removeInteraction(drawInteraction);
map.addInteraction(drawInteraction);
} else {
// 取消勾选新增复选框时，移出绘制的Interaction，删除已经绘制的feature
map.removeInteraction(drawInteraction);
if (drawedFeature) {
drawLayer.getSource().removeFeature(drawedFeature);
}
drawedFeature = null;
}
});

queryWfs=function() {
window.location.reload();
}

// 保存新绘制的feature
onSaveNew = 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 ol.Feature();
newFeature.setGeometryName('SHAPE');
newFeature.set('SHAPE', null);
newFeature.setGeometry(new ol.geom.LineString(geometry.getCoordinates()));//获取几何图形的坐标数组
addWfs([newFeature]);
// 3秒后，自动刷新页面上的feature
setTimeout(function() {
drawLayer.getSource().clear();
// queryWfs();
}, 1000);
}

// 添加到服务器端
function addWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(features,
null, null, {
featureType: 'degao_mysql:zhuguanduan_line',
featureNS: 'http://locahost/geoserver/degao_mysql',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://locahost:7777/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
修改和平移对象
// 新建openlayers选择器
var selectInteraction = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
2
})
})
});

// 修改器
var modifyInteraction = new ol.interaction.Modify({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
5
})
}),
features: selectInteraction.getFeatures()
});
modifyInteraction.on('modifyend', function(e) {
// 把修改完成的feature暂存起来
modifiedFeatures = e.features;
});

$('#select').change(function() {
if (this.checked) {
//控制其他编辑功能，防止冲突
document.getElementById('addLayer').checked=false;
document.getElementById('selectDelete').checked=false;
// 勾选选择复选框时，添加选择器到地图
map.removeInteraction(selectInteraction);
map.addInteraction(selectInteraction);
} else {
// 不勾选选择复选框的情况下，移出选择器和修改器
map.removeInteraction(selectInteraction);
document.getElementById('modify').checked = false;
map.removeInteraction(modifyInteraction);
}
});

$('#modify').change(function() {
if (this.checked) {
document.getElementById('addLayer').checked=false;
document.getElementById('selectDelete').checked=false;
// 勾选修改复选框时，添加选择器和修改器到地图
document.getElementById('select').checked = true;
map.removeInteraction(modifyInteraction);
map.addInteraction(modifyInteraction);
map.removeInteraction(selectInteraction);
map.addInteraction(selectInteraction);
} else {
// 不勾选修改复选框时，移出修改器
map.removeInteraction(modifyInteraction);
modifiedFeatures = null;
}
});

//平移功能
var translate = new ol.interaction.Translate({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
2
})
})
});

$('#moveInteraction').change(function() {
if(this.checked){
map.removeInteraction(translate);
document.getElementById('select').checked = true;
map.addInteraction(translate);
}else{
map.removeInteraction(translate);
}

});

translate.on('translateend', function(e) {
// 把修改完成的feature暂存起来
modifiedFeatures = e.features;
});

// 保存已经编辑的要素
onSave = 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]);
}
}

// 添加到服务器端
function modifyWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
features, null, {
featureType: 'zhuguanduan_line',
featureNS: 'http://locahost/geoserver/degao_mysql',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://locahost:7777/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
删除要素
// 选择器
var selectInteractionDel = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
2
})
})
});

$('#selectDelete').change(function() {
if (this.checked) {
document.getElementById('addLayer').checked=false;
document.getElementById('select').checked=false;
document.getElementById('modify').checked=false;
// 勾选选择复选框时，添加选择器到地图
map.removeInteraction(selectInteractionDel);
map.addInteraction(selectInteractionDel);
} else {
// 不勾选选择复选框的情况下，移出选择器和修改器
map.removeInteraction(selectInteractionDel);
}
});

onDeleteFeature =function() {
// 删选择器选中的feature
if (selectInteractionDel.getFeatures().getLength() > 0) {
deleteWfs([selectInteractionDel.getFeatures().item(0)]);
// 3秒后自动更新features
setTimeout(function() {
selectInteractionDel.getFeatures().clear();
queryWfs();
}, 1000);
}
}

// 添加到服务器端
function deleteWfs(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(null,
null, features, {
featureType: 'zhuguanduan_line',
featureNS: 'http://locahost/geoserver/degao_mysql',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://locahost:7777/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
多边形新增
var drawLayer1 = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
5
})
})
});
map.addLayer(drawLayer1);

// 添加绘制新图形的interaction，用于添加新的线条
var newId1 = 1;
var drawFeature1 = null;
var drawInteraction1 = new ol.interaction.Draw({
type: 'Polygon', // 设定为线条
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
10
})
}),
source: drawLayer1.getSource()
});

drawInteraction1.on('drawend', function(e) {

// 绘制结束时暂存绘制的feature
drawFeature1 = e.feature;
vectorLayer.getSource().addFeature(drawFeature1);
});

$('#addLayer1').change(function() {
if (this.checked) {

// 勾选新增复选框时，添加绘制的Interaction
map.removeInteraction(drawInteraction1);
map.addInteraction(drawInteraction1);
} else {
// 取消勾选新增复选框时，移出绘制的Interaction，删除已经绘制的feature
map.removeInteraction(drawInteraction1);
if (drawedFeature) {
drawLayer1.getSource().removeFeature(drawFeature1);
}
drawFeature1 = null;
}
});

queryWfs=function() {
window.location.reload();
}

// 保存新绘制的feature
onSaveNew1 = function() {
var geometry = drawFeature1.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 ol.Feature();
newFeature.setGeometryName('SHAPE');
newFeature.set('SHAPE', null);
newFeature.set('gid', 1);
newFeature.setGeometry(new ol.geom.Polygon(geometry.getCoordinates()));//注Polygon和MultiPolygon是有区别的
addWfs1([newFeature]);
}

// 添加到服务器端
function addWfs1(features) {
var WFSTSerializer = new ol.format.WFS();
var featObject = WFSTSerializer.writeTransaction(features,
null, null, {
featureType: 'zhuguanduan_line',
featureNS: 'http://locahost/geoserver/degao_mysql',
srsName: 'EPSG:4326'
});
var serializer = new XMLSerializer();
var featString = serializer.serializeToString(featObject);
var request = new XMLHttpRequest();
request.open('POST', 'http://locahost:7777/geoserver/wfs?service=wfs');
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);
}

————————————————
版权声明：本文为CSDN博主「丿江城子丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq190781319/article/details/81583599