WFS—GetFeature方法

168 阅读 0 评论 111 点赞

我是靠谱客的博主柔弱红牛，这篇文章主要介绍WFS—GetFeature方法，现在分享给大家，希望可以做个参考。

前言：WFS服务，可以通过OL进行加载，加载有简单方式也有GetFeature方式，该种方式自由度更大，可以结合一些过滤条件，这样一方面可以提高加载数据的效率，也是业务的一种。来张图效果图：

红色是通过GetFeature加载，轮廓线是简单加载的，北京市的道路也是简单方式加载的。

一、GetFeature方式（核心代码）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 创建一个请求
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',//坐标系
featureNS: 'http://www.opengeospatial.net/cite',// 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: 'cite',//工作区的名称
featureTypes: ['bou2_4p '],//所要访问的图层
maxFeatures:5000,
outputFormat: 'application/json',
filter: ol.format.filter.equalTo('name', '河北省')
});
// 发送请求
fetch('http://localhost:8080/geoserver/wfs', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function (response) {
return response.json();
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
});

这里面有三个参数是必须的：featureNS、featurePrefix、featureTypes。这三个参数必须赋值否则错误。

二、完整demo

复制代码

<!DOCTYPE html>
<html>
<head>
<title>GetFeatures</title>
<link href="../script/ol4/ol.css" rel="stylesheet" />
<script src="../script/ol4/ol.js"></script>
</head>
<body>
<input id="save" type="button" value="保存" onclick="onSave();" />
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vectorSource = new ol.source.Vector();
var vecLayer = new ol.layer.Vector({
source: vectorSource,
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 5
})
});
}
});
var modifiedFeatures = null;
var wfsVectorLayer1 = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Abou2_4p&maxFeatures=5000&outputFormat=application%2Fjson'
}),
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
var wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Abeijing&maxFeatures=3100&outputFormat=application%2Fjson&srsname=EPSG:4326'
}),
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
var selectInteraction = new ol.interaction.Select({
wrapX: false,
//style: new ol.style.Style({
//
stroke: new ol.style.Stroke({
//
color: 'red',
//
width: 4
//
})
//}),
hitTolerance:10
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([selectInteraction]),
layers: [raster, wfsVectorLayer1,vecLayer,wfsVectorLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
projection: 'EPSG:4326',
zoom: 2
})
});
selectInteraction.on("select", function (evt) {
console.log(evt.selected);
});
// 创建一个请求
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',//坐标系
featureNS: 'http://www.opengeospatial.net/cite',// 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: 'cite',//工作区的命名
featureTypes: ['bou2_4p '],//所要访问的图层
maxFeatures:5000,
outputFormat: 'application/json',
filter: ol.format.filter.equalTo('name', '河北省')
});
// 发送请求
fetch('http://localhost:8080/geoserver/wfs', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function (response) {
return response.json();
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
});
</script>
</body>
</html>

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
<!DOCTYPE html>
<html>
<head>
<title>GetFeatures</title>
<link href="../script/ol4/ol.css" rel="stylesheet" />
<script src="../script/ol4/ol.js"></script>
</head>
<body>
<input id="save" type="button" value="保存" onclick="onSave();" />
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vectorSource = new ol.source.Vector();
var vecLayer = new ol.layer.Vector({
source: vectorSource,
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 5
})
});
}
});
var modifiedFeatures = null;
var wfsVectorLayer1 = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Abou2_4p&maxFeatures=5000&outputFormat=application%2Fjson'
}),
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
var wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Abeijing&maxFeatures=3100&outputFormat=application%2Fjson&srsname=EPSG:4326'
}),
style: function (feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
var selectInteraction = new ol.interaction.Select({
wrapX: false,
//style: new ol.style.Style({
//
stroke: new ol.style.Stroke({
//
color: 'red',
//
width: 4
//
})
//}),
hitTolerance:10
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([selectInteraction]),
layers: [raster, wfsVectorLayer1,vecLayer,wfsVectorLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
projection: 'EPSG:4326',
zoom: 2
})
});
selectInteraction.on("select", function (evt) {
console.log(evt.selected);
});
// 创建一个请求
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',//坐标系
featureNS: 'http://www.opengeospatial.net/cite',// 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: 'cite',//工作区的命名
featureTypes: ['bou2_4p '],//所要访问的图层
maxFeatures:5000,
outputFormat: 'application/json',
filter: ol.format.filter.equalTo('name', '河北省')
});
// 发送请求
fetch('http://localhost:8080/geoserver/wfs', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function (response) {
return response.json();
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
});
</script>
</body>
</html>