要达到的效果通过多边形或者要素属性过滤wfs的图形要素
使用上一节的方法二进行过滤图形
1、加载地图:
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
});
//加载wms图层
var format = 'image/png';
var wmsSource = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的
params: {
'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'tiger:poi',
"exceptions": 'application/vnd.ogc.se_inimage',
},
serverType: 'geoserver',
crossOrigin: 'anonymous',
});
var wmsLayer = new ol.layer.Tile({
source: wmsSource,
});
map.addLayer(wmsLayer);
2、创建绘制多边形的对象
source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
map.addLayer(vector);
draw = new ol.interaction.Draw({
source: source,
type: "Polygon"
});
draw.on('drawend', function (e) {
feature=e.feature;//绘制结束获取绘制的图形
});
map.addInteraction(draw);
3、添加空间过滤的wfs
//空间过滤
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',
filter: ol.format.filter.intersects("the_geom", feature.getGeometry())//相交查询
});
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);
效果如下:

添加属性过滤的wfs
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',
filter: new ol.format.filter.like('NAME', 'lo*')//属性过滤条件
});
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);
效果如下:

4、多个过滤条件可以这样写
ol.format.filter.and(
ol.format.filter.intersects("the_geom", feature.getGeometry()),
ol.format.filter.like('NAME', 'lo*')
);
5、完整代码:
<!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 source;
var draw;
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
});
//加载wms图层
var format = 'image/png';
var wmsSource = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/tiger/wms',//端口号要改成自己的
params: {
'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'tiger:poi',
"exceptions": 'application/vnd.ogc.se_inimage',
},
serverType: 'geoserver',
crossOrigin: 'anonymous',
});
var wmsLayer = new ol.layer.Tile({
source: wmsSource,
});
map.addLayer(wmsLayer);
source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
map.addLayer(vector);
}
function drawGraphic(){
draw = new ol.interaction.Draw({
source: source,
type: "Polygon"
});
draw.on('drawend', function (e) {
feature=e.feature;//绘制结束获取绘制的图形
});
map.addInteraction(draw);
}
var feature;
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',
filter: ol.format.filter.intersects("the_geom", feature.getGeometry())//相交查询
});
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);
}
function addwms1() {
//属性过滤
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',
filter: new ol.format.filter.like('NAME', 'lo*')//属性过滤条件
});
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);
}
function andfilter(){
ol.format.filter.and(
ol.format.filter.intersects("the_geom", feature.getGeometry()),
ol.format.filter.like('NAME', 'lo*')
);
}
</script>
<body onload="init()">
<div id="map" class="map" tabindex="0"></div>
<button onclick="drawGraphic()">绘制多边形</button>
<button onclick="addwms2()">空间过滤</button>
<button onclick="addwms1()">属性过滤</button>
<button onclick="remove()">清除过滤</button>
</body>
</html>
本文介绍如何使用 OpenLayers 对 WFS 图层进行空间和属性过滤,包括绘制多边形进行空间过滤及通过属性值筛选要素。
167

被折叠的 条评论
为什么被折叠?



