openlayers学习（五）wfs图层的过滤条件filter

要达到的效果通过多边形或者要素属性过滤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 wmsLayer = new ol.layer.Tile({
source: wmsSource,
});
map.addLayer(wmsLayer);
2、创建绘制多边形的对象

source = new ol.source.Vector({wrapX: false});

//空间过滤
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

})
});
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 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 οnlοad=”init()”>
<div id=”map” class=”map” tabindex=”0″></div>
<button οnclick=”drawGraphic()”>绘制多边形</button>
<button οnclick=”addwms2()”>空间过滤</button>
<button οnclick=”addwms1()”>属性过滤</button>
<button οnclick=”remove()”>清除过滤</button>

</body>
</html>

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

openlayers学习（五）wfs图层的过滤条件filter

相关文章

归档