openlayers学习（三） wms图层过滤条件filter

要达到的效果通过多边形或者要素属性过滤wms的图形要素

过滤条件的写法参考geoserver官网的示例：https://docs.geoserver.org/2.12.2/user/tutorials/cql/cql_tutorial.html

使用上一节的示例

1、创建wms图层

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’,
//”CQL_FILTER”: “NAME =’museam'”//属性过滤
//”CQL_FILTER”: “INTERSECTS(the_geom, POLYGON((-74.01256 40.70726, -74.00782 40.70749, -74.01031 40.71075,-74.01256 40.70726)))”//空间过滤添加
/* filter: ol.format.filter.and(
ol.format.filter.like(‘NAME’, ‘museam’),
ol.format.filter.equalTo(‘waterway’, ‘riverbank’))*//多个条件联合在一起
},
serverType: ‘geoserver’,
crossOrigin: ‘anonymous’,
});
var wmsLayer = new ol.layer.Tile({
source: wmsSource,
});
显示的效果：有5个点

2、使用tilewms的updateParams方法来更新过滤条件

the_geom是geoserver发布图层的几何属性列的列名

//空间查询
wmsSource.updateParams({
CQL_FILTER: “INTERSECTS(the_geom, POLYGON((-74.01256 40.70726, -74.00782 40.70749, -74.01031 40.71075,-74.01256 40.70726)))”
});
//属性查询
var str = “NAME =’museam'”;
wmsSource.updateParams({
CQL_FILTER: str
});
3、移除过滤条件

wmsSource.updateParams({
CQL_FILTER: null
});
geoserver的属性

空间查询效果如下

属性查询效果如下：

完整代码：

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>过滤器</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;
}

a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}

#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
</head>
<script>
var map;

var wmsSource;

function init() {

</script>
<body onload=”init()”>
<div id=”map” class=”map” tabindex=”0″></div>
<button onclick=”upParam()”>更新图形过滤条件</button>
<button onclick=”upatrParam()”>更新属性过滤条件</button>
<button onclick=”removeupatrParam()”>移除过滤</button>
</body>
</html>

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

openlayers学习（三） wms图层过滤条件filter

相关文章

归档