openlayers学习（四）加载geoserver发布的wfs图层

要达到的效果显示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() {

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

})
});
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>

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

openlayers学习（四）加载geoserver发布的wfs图层

相关文章

归档