openlayers加载geoserver发布的wfs图层

加载wfs图层，和wms不一样，样式需要自己在前端代码进行设置。

此例中为加在的geojson格式数据

function addwms() {
var vs = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return ('http://localhost:8080/geoserver/tiger/ows?service=WFS&' +
'version=1.1.0&request=GetFeature&typeName=tiger:poi&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326');
},
strategy: ol.loadingstrategy.bbox
});
var v = new ol.layer.Vector({
source: vs,
style: new ol.style.Style({//添加显示的样式
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
radius: 15,
fill: new ol.style.Fill({
color: '#cc3352'
}),
})

})
});
map.addLayer(v);
}

function addwms2() {
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) { //加载函数
var proj = projection.getCode();
var url = 'http://localhost:8080/geoserver/tiger/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&typename=tiger:poi&' +
'outputFormat=application/json&srsname=' + proj + '&' +
'bbox=' + extent.join(',') + ',' + proj;
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',//坐标系
featureNS: 'http://www.census.gov',// 注意这个值必须为创建工作区时的命名空间URI
featurePrefix: 'tiger',//工作区的命名
featureTypes: ['poi'],//所要访问的图层
maxFeatures: 5000,
outputFormat: 'application/json'
});
fetch(url, {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function (response) {
return response.json();
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
console.log(features.length);
if (features.length > 0) {
vectorSource.clear();
vectorSource.addFeatures(features);
}
});
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 25
})),
projection: 'EPSG:4326'
});
var v = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({//添加显示的样式
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
radius: 15,
fill: new ol.style.Fill({
color: '#cc3352'
}),
})

})
});
map.addLayer(v);
}