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

最新推荐文章于 2024-05-17 13:58:02 发布
最新推荐文章于 2024-05-17 13:58:02 发布
阅读量4.3k 收藏 13
点赞数 1
分类专栏： geoserver 文章标签： openlayer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014572215/article/details/109165423
版权

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

 

 

 

 

 

 

mylove10086
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对WFS服务进行过滤-基于cql_filter
09-26 2861
首先上传shp数据，发布出来 服务链接：http://120.76.197.111:8090/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson 可以发现，参数中version为1.0.0表示版本号，maxFeatures=50指定返回...
OpenLayers开发：WFS过滤
u013925989的博客
07-14 1971
openlayers简单教程，感谢丁少
geoserver wfs过滤查询
03-04
geoserver定义了多个协议，本例子运用wfs查询中的getFeature查询出一张表中的某条记录是否包含指定的点的集合，如果包含则返回该条记录的id。
openlayers 选中浮空效果 阴影 filter 遮罩
最新发布
qq_36287830的博客
05-17 426
openlayers 选中浮空效果 阴影 遮罩
vue+openlayers实现filter过滤查询发布的WFS服务
bless的博客
04-13 1533
在通过openlayers请求geoserver发布的WFS地图服务时，有时需要对请求的地图做一些过滤，选择需要加载的矢量数据。 在openlayers官网案例中，关于WFS的过滤只有属性过滤，缺少空间过滤，在空间过滤时，需要对构建的多边形进行投影转换，然后再引入到过滤方法中。 例如构建一个多边形： var polygon1=new Polygon([[ [117.12499999999999, 31.00586290462421], [117.12499999999999, 32.
Openlayers2图层加载（三）使用WFS方式加载矢量图层
此爱如少年
11-16 1305
加载WFS图层 上一篇加载的图层是以文件形式存在的，而实际项目应用中，矢量数据通常是存储在数据库中，通过请求来获取数据，在装载到矢量图层中。 WFS是OGC开放联盟制定的一种标准地图服务协议，支持通过WFS请求来获取矢量数据，对数据进行操作等。 以下简单介绍Openlayer加载WFS请求到的矢量数据。 示例： function initMap(){ var map,baseLayer ma...
Openlayers-OpenLayers中基于Filter的WFS查询
a18826265589的博客
07-05 503
打算实现的功能：基于OpenLayers实现对地图中城市POI模糊查询，并且能提 供基于位置的查询（GIS中就是基于圆的查询，通俗的说就是当确定用户位置后，可以查询用户周边一定范围内的POI）和基于多边形的查询（用户自己画出多 边形，实现在多边形范围内的POI查询），设定的界面如下图所示 1.界面实现 页面的body主体实现如下： [html] view...
ARCGIS SERVER WMS、WFS服务添加过滤条件
qq_39330397的博客
11-08 779
filter= mc 山海天 我们知道geoserver中的wms，wfs过滤参数为cql_filter。如果是多条件and或or ，需要使用、标签。
openlayer加载wfs服务,url中加过滤条件
胡萝卜先生的进阶之路
12-16 782
openlayer加载wfs服务,url中加过滤条件 <!DOCTYPE html> <html> <head> <title>WFS</title> <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"> <script src="https://openlayers.org/en/v5.3.0/build/ol.js
OpenLayers3中wfs的属性查询
追光者的博客
01-13 3597
OpenLayers3中wfs的属性查询
openlayers 加载Geoserver wfs服务
01-06
利用openlayers加载geoserver wfs服务发布的矢量图层。
openlayers 编辑geoserver图层
11-19
学习时，你需要理解OpenLayers的图层、控件和事件处理机制，以及GeoServer的WFS服务和数据管理。通过实践这些示例，你可以掌握如何在Web应用中实现地图的动态编辑功能。 总的来说，OpenLayers和GeoServer的结合提供...
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
OpenLayers3实现图层控件功能
10-14
在OpenLayers 3中，实现图层控件功能是一个关键的操作，这允许用户方便地查看和操作地图上的不同图层。虽然OpenLayers 3没有直接提供内置的图层控件，但通过其丰富的API，我们可以自定义实现这一功能。下面我们将...
openlayers学习（三） wms图层过滤条件filter
mylove10086
10-13 5155
要达到的效果通过多边形或者要素属性过滤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
openlayers学习（八）加载天地图各种底图
mylove10086
10-30 3445
加载天地图的各种在线地图资源 天地图在线地图资源地址：http://lbs.tianditu.gov.cn/server/MapService.html 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={
openlayers学习（七）量测距离和面积
mylove10086
10-21 3251
实现量测距离和面积 官网示例：https://openlayers.org/en/latest/examples/measure.html 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=
openlayers学习（二） 加载geoserver发布的wms图层
mylove10086
10-13 2789
要达到的效果显示geoserver中发布的wms图层，数据使用geoserver自带的示例数据。安装后geoserver后就有的数据 官网示例链接：https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html 1、创建源TileWMS var wmsSource = new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/tiger/wm
openlayers加载WFS图层
05-21
要加载WFS图层，可以使用OpenLayers的VectorLayer和WFSLayer。以下是一个简单的示例： 首先，在HTML文件中包含OpenLayers库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script> ``` 然后，创建一个地图容器： ```html <div id="map" style="width:100%;height:500px;"></div> ``` 接下来，编写JavaScript代码： ```javascript // 创建一个地图对象 var map = new OpenLayers.Map("map"); // 创建一个WFS图层 var wfsLayer = new OpenLayers.Layer.Vector( "WFS", { strategies: [new OpenLayers.Strategy.BBOX()], protocol: new OpenLayers.Protocol.WFS({ url: "http://localhost:8080/geoserver/wfs", featureType: "myWorkspace:myFeatureType", featureNS: "http://www.my-namespace.com", srsName: "EPSG:4326" }) } ); // 将WFS图层添加到地图中 map.addLayer(wfsLayer); // 设置地图中心和缩放级别 map.setCenter(new OpenLayers.LonLat(0, 0), 2); ``` 在这个例子中，我们创建了一个WFS图层，并将其添加到地图中。在WFS图层的配置中，我们指定了WFS服务的URL、要素类型和命名空间。我们还指定了坐标系为EPSG:4326。最后，我们设置了地图的中心和缩放级别。 注意，这个例子假设你已经在本地安装了GeoServer，并且已经发布了一个名为“myFeatureType”的要素类型。如果你没有安装GeoServer，或者没有发布任何WFS服务，那么你需要相应地修改代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值