前言：WFS服务，可以通过OL进行加载，加载有简单方式也有GetFeature方式，该种方式自由度更大，可以结合一些过滤条件，这样一方面可以提高加载数据的效率，也是业务的一种。来张图效果图：
红色是通过GetFeature加载，轮廓线是简单加载的，北京市的道路也是简单方式加载的。
一、GetFeature方式（核心代码）
// 创建一个请求
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',
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',
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',
5
})
});
}
});
var selectInteraction = new ol.interaction.Select({
wrapX: false,
//style: new ol.style.Style({
// stroke: new ol.style.Stroke({
// color: 'red',
// 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>