Openlayers的空间查询，下面主要包括三种查询，分别是点击地图查询，过滤条件查询，多边形查询等。说明的文字不是很多，直接看代码，最后提供一份完整的代码，直接复制到html中就可以运行。

1.点击查询

点击查询主要是使用map的forEachFeatureAtPixel进行查询，首先需要给地图添加一个点击事件，如下所示：

//点击查询map.on('singleclick',function(evt){var pixel = map.getEventPixel(evt.originalEvent);map.forEachFeatureAtPixel(pixel, function (feature, layer) {if (feature != undefined) {console.log(feature);}})})

2.条件过滤查询

条件过滤查询使用的是ol.format.filter，可以添加过滤条件，过滤条件全部都在ol.format.filter里面，包括Or,Not,Bbox,Within,IsNull,IsLike,During,EqualTo,LessThan,Contains,IsBetWeen,NotEqualTo,Instresects,GreaterThan,LessThanOrEqualTo,greaterThanOrEqualTo等。如下所示：

function filterQuery(){var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:3857',featureNS: 'http://openstreemap.org',featurePrefix: 'osm',featureTypes: ['water_areas'],outputFormat: 'application/json',filter: ol.format.filter.and(ol.format.filter.like('name', 'Mississippi*'),ol.format.filter.equalTo('waterway', 'riverbank'))});fetch('https://ahocevar.com/geoserver/wfs', {method: 'POST',body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features = new ol.format.GeoJSON().readFeatures(json);vectorSource.addFeatures(features);map.getView().fit(vectorSource.getExtent());});}

3.空间查询

空间查询其实就是过滤查询，只是传递的过滤条件是几何体，这里使用intersects来查询相交的数据，其中第一个参数geometryName需要跟数据库中的空间字段对应，这里使用的是the_geom。如下所示：

//多边形查询function query(){var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:3857',featureNS: 'http://openstreemap.org',featurePrefix: 'osm',featureTypes: ['water_areas'],outputFormat: 'application/json',filter: ol.format.filter.intersects("the_geom", feature.getGeometry(), 'EPSG:3857')});fetch('https://ahocevar.com/geoserver/wfs', {method: 'POST',body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features = new ol.format.GeoJSON().readFeatures(json);if(features.length == 0){alert('没有数据')}else{spaceSource.addFeatures(features);map.getView().fit(spaceSource.getExtent());}});}

以下为完整代码，并且包含了多边形绘制，代码可能有点乱，demo嘛，知识怎么用就行了。

<!DOCTYPE html>
<html><head><title>WFS - GetFeature</title><link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script></head><body><div id="map" class="map"></div><div style="position: absolute;top:30px;left: 100px;"><button onclick="addInteraction()">多边形</button><button onclick="query()">查询</button></div><script>var vectorSource = new ol.source.Vector();var vector = new ol.layer.Vector({source: vectorSource,style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgba(0, 0, 255, 1.0)',width: 2})})});var spaceSource = new ol.source.Vector();var spaceVector = new ol.layer.Vector({source: spaceSource,style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgba(255, 0, 0, 1.0)',width: 2})})});var drawSource = new ol.source.Vector({wrapX: false});var drawVector = new ol.layer.Vector({source: drawSource});var map = new ol.Map({layers: [vector,drawVector,spaceVector],target: document.getElementById('map'),view: new ol.View({center: [-8908887.277395891, 5381918.072437216],maxZoom: 19,zoom: 12})});var feature;function addInteraction() {var draw = new ol.interaction.Draw({source: drawSource,type: 'Polygon'});map.addInteraction(draw);draw.on('drawend',function(evt){feature = evt.feature;map.removeInteraction(draw);})}//多边形查询function query(){var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:3857',featureNS: 'http://openstreemap.org',featurePrefix: 'osm',featureTypes: ['water_areas'],outputFormat: 'application/json',filter: ol.format.filter.intersects("the_geom", feature.getGeometry(), 'EPSG:3857')});fetch('https://ahocevar.com/geoserver/wfs', {method: 'POST',body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features = new ol.format.GeoJSON().readFeatures(json);if(features.length == 0){alert('没有数据')}else{spaceSource.addFeatures(features);map.getView().fit(spaceSource.getExtent());}});}// 过滤查询filterQuery();function filterQuery(){var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:3857',featureNS: 'http://openstreemap.org',featurePrefix: 'osm',featureTypes: ['water_areas'],outputFormat: 'application/json',filter: ol.format.filter.and(ol.format.filter.like('name', 'Mississippi*'),ol.format.filter.equalTo('waterway', 'riverbank'))});fetch('https://ahocevar.com/geoserver/wfs', {method: 'POST',body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {return response.json();}).then(function(json) {var features = new ol.format.GeoJSON().readFeatures(json);vectorSource.addFeatures(features);map.getView().fit(vectorSource.getExtent());});}//点击查询map.on('singleclick',function(evt){var pixel = map.getEventPixel(evt.originalEvent);map.forEachFeatureAtPixel(pixel, function (feature, layer) {if (feature != undefined) {console.log(feature);}})})</script></body>
</html>

Openlayers的空间查询wfs相关推荐

openlayers实现wfs属性查询和空间查询
概述: 一直在寻求openlayers中wfs加载和属性查询的相关操作,功夫不负有心人,蓦然回首,那人却在灯火阑珊处,找到了这篇博文:http://blog.csdn.net/longshengguo ...
openlayers+geoserver+wms实现空间查询，属性查询
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/gisdoer/article/details/81530228 openlayers+geoserv ...
Openlayers5 + Geoserver 实现wfs的属性查询与空间查询
简介:使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询参考官方例子:https://openlayers.org/en/latest/examples/vector-w ...
geoserver三维_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
OL3实现空间查询的代码示例
前言:在左开发的时候我们会用到空间查询,尤其在poi范围内的查询,该功能在arcgis api中有专门的类封装该功能,OL3和OL4中针对WFS服务,也可以实现该功能,需要结合WFS 和Filter共 ...
Oracle表空间查询及扩充表空间
oralce 表空间查询 SQL> select a.tablespace_name,a.bytes / 1024 / 1024 "sum MB",(a.bytes - b ...
oracle数据类型查询,Oracle 空间查询, 数据类型为 sdo_geometry
数据:通过arcgis直连数据库,导入测试数据,导入时数据类型选择SDO_GEOMETRY. 测试数据包含点线面,点数据MAP_USER_POINT, 线数据MAP_USER_LINE,面数据MAP_ ...
mongodb空间查询之查询单位
1.建立空间索引 db.collection.ensureIndex({'geom.coordinates':'2d'}) 2.空间查询这里遇到的问题是查询的时候会涉及到范围,那么这个范围的单位是什 ...

Openlayers的空间查询wfs

1.点击查询

2.条件过滤查询

3.空间查询

Openlayers的空间查询wfs相关推荐

最新文章

热门文章