要达到的效果显示geoserver中发布的wfs图层,数据使用geoserver自带的示例数据。安装后geoserver后就有的数据poi图层
官网示例:https://openlayers.org/en/latest/examples/vector-wfs.html
1、创建vector
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
});
2、创建图层
//方法一 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 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' });
3、添加到map中
map.addLayer(v);
效果如下
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加wfs图层</title> <script src="../lib/openlayerv6.4.3/build/ol.js"></script> <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css"> <style> .map { width: 100%; height: 600px; } </style> </head> <script> var map; var typeSelect; var draw; // global so we can remove it later var source; function init() { var rootLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' }) //加载谷歌影像地图 }); var view = new ol.View({ center: [-74.0087, 40.7122], projection: 'EPSG:4326', zoom: 10 }); map = new ol.Map({ layers: [rootLayer], target: 'map', view: view }); } var feature; 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); } </script> <body οnlοad="init()"> <div id="map" class="map" tabindex="0"></div> <button οnclick="addwms()">方法一</button> <button οnclick="addwms2()">方法二</button> </body> </html>