OL3实现空间查询的代码示例

前言：在左开发的时候我们会用到空间查询，尤其在poi范围内的查询，该功能在arcgis api中有专门的类封装该功能，OL3和OL4中针对WFS服务，也可以实现该功能，需要结合WFS 和Filter共同完成。先看张图片：

空间查询示例：青海、西藏、新疆

一、代码示例

            $("#boxQuery").on("click", function () {Draw();});function getQuery(geometry) {// 创建一个请求var featureRequest = new ol.format.WFS().writeGetFeature({srsName: 'EPSG:4326',//坐标系featureNS: 'http://www.opengeospatial.net/cite',// 注意这个值必须为创建工作区时的命名空间URIfeaturePrefix: 'cite',//工作区的命名featureTypes: ['bou2_4p '],//所要访问的图层maxFeatures: 5000,outputFormat: 'application/json',filter: new ol.format.filter.Intersects('geom',geometry)});// 发送请求fetch('http://localhost:8080/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);});}function Draw() {draw = new ol.interaction.Draw({type: "Polygon",wrapX: false,active: true,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new ol.style.Stroke({color: '#ffcc33',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ffcc33'})})})});map.addInteraction(draw);draw.on("drawend", function (evt) {var feture = evt.feature;var inputGeometry = feture.getGeometry();getQuery(inputGeometry);});}

用的过滤条件是 ol.format.filter.Intersects

二、可能出现的错误

一直出现错误：“org.geoserver.wfs.WFSException: Illegal property name: geometry for feature type”。后来经过仔细研究接口，发现查询参数设置中，ol.format.filter.intersects接口中的"geometryName"中的属性名称不能任意填写，而是必须填写WFS相关数据源中空间属性字段名称，故将 ol.format.filter.intersects接口中的geometryName设置成空间字段名称“geom”则查询正常

OL3实现空间查询的代码示例相关推荐

mysql一对多前端实现_MySQL实现一对多查询的代码示例
本篇文章给大家带来的内容是关于MySQL实现一对多查询的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 这次要实现的是一对多查询,使用 MySQL 的 group_conca ...
mysql一对多代码_MySQL实现一对多查询的代码示例
本篇文章给大家带来的内容是关于MySQL实现一对多查询的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 这次要实现的是一对多查询,使用 MySQL 的 group_conca ...
交通违章查询接口代码示例
交通违章查询接口可以查询支持城市及查询条件,多省份直连查询,目前支持广东.北京.上海.江苏.湖北.山东.重庆.贵州.海南.云南.青海,并且查询违章,违章列表.违章时间.违章地点.违章行为.违章代码.违 ...
支持城市及查询条件车行易车辆违章查询sdk代码示例
车行易车辆违章查询sdk可以查询支持城市及查询条件,并且查询违章,违章列表.违章时间.违章地点.违章行为.违章代码.违章扣分.违章罚款等等. 注意:目前大部分省份的交警系统数据已全省联网,指定一个省份 ...
Oracle Spatial的空间查询，代码操作
oracle的sdo_geometry中内置get_wkt和get_wkb两个方法. 以数据库表geoms为例,此表中有id和geometry两列 try { OracleConnection con ...
pdo mysql limit_PHP mysql中limit用法详解（代码示例）
在MySQL中,LIMIT子句与SELECT语句一起使用,以限制结果集中的行数.LIMIT子句接受一个或两个offset和count的参数.这两个参数的值都可以是零或正整数. offset:用于指定要 ...
Openlayers5 + Geoserver 实现wfs的属性查询与空间查询
简介:使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询参考官方例子:https://openlayers.org/en/latest/examples/vector-w ...
JVM - 结合代码示例彻底搞懂Java内存区域_对象在堆-栈-方法区(元空间)之间的关系
文章目录 Pre 示例demo 总体关系代码示例论证反汇编 Pre JVM - 结合代码示例彻底搞懂Java内存区域_线程栈 | 本地方法栈 | 程序计数器中我们探讨了线程栈中的内部结构 ,大家 ...
2019-nCoV肺炎疫情同程查询-完整提供 Demo 代码示例及数据专业且全面的 API 查询接口
更多资料请参考:www.woyaocha.net/product/trip2019ncov 手机查询链接(已开发好的):www.woyaocha.net/trip2019ncov 接口使用我要查询 ...

OL3实现空间查询的代码示例

OL3实现空间查询的代码示例相关推荐

最新文章

热门文章