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

最新推荐文章于 2024-05-17 13:58:02 发布

mylove10086

最新推荐文章于 2024-05-17 13:58:02 发布

阅读量5.1k

点赞数 2

分类专栏： geoserver 文章标签： openlayers

本文链接：https://blog.csdn.net/u014572215/article/details/109056230

版权

geoserver 专栏收录该内容

14 篇文章 16 订阅

订阅专栏

要达到的效果通过多边形或者要素属性过滤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() {

        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 format = 'image/png';
        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,
        });
        var view = new ol.View({
            center: [-74.0087, 40.7122],
            projection: 'EPSG:4326',
            zoom: 10
        });
        map = new ol.Map({
            layers: [rootLayer, wmsLayer],
            target: 'map',
            view: view
        });
    }
    function upParam() {
        wmsSource.updateParams({
            CQL_FILTER: "INTERSECTS(the_geom, POLYGON((-74.01256 40.70726, -74.00782 40.70749, -74.01031 40.71075,-74.01256 40.70726)))"
        });
    }
    function upatrParam() {
        var str = "NAME ='museam'";
        wmsSource.updateParams({
            CQL_FILTER: str
        });
    }
    function removeupatrParam() {
        wmsSource.updateParams({
            CQL_FILTER: null
        });
    }


</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>

mylove10086

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
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',//端口号要改成自己的 para
复制链接

扫一扫