使用openlayer中的filter从后端返回满足查询条件的要素并显示属性信息

最新推荐文章于 2024-07-18 11:27:35 发布
最新推荐文章于 2024-07-18 11:27:35 发布
阅读量4.4k 收藏 8
点赞数
分类专栏： OpenLayer GIS 文章标签： OpneLayer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28418387/article/details/82824010
版权
本文介绍如何在OpenLayers中结合filter实现根据用户输入查询地图要素，并显示匹配结果的属性信息。功能基于官方示例，支持模糊查询，查询过程包括构造查询请求、处理返回的JSON数据，以及动态更新地图显示和属性信息。
摘要由CSDN通过智能技术生成

本功能主要参考官网的filter例子，地址如下

http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html?q=filter

该功能主要实现了在右上方选择需要查询要输的字段，并输入相应字段要查询的值，支持模糊查询，在点击查询之后，地图界面上显示查询出的要素并定位到这些要素，在界面的下部显示这些要素的属性值，下图是最后的结果图

所有查询过程都在查询按钮的点击事件下，

首先获取到要查询的字段和输入的查询值

如果输入的查询值不为

最低0.47元/天 解锁文章
AI学渣
关注
专栏目录
OpenLayers中图属查询及属性过滤
心如止水 宠辱不惊
01-09 1万+
var map, ctrlLyrSwitcher, measureControls; var markers; var wfs; var field = 'Linetype'; //属性名 var val = 'DASHED'; //参数值 var flag = true; function init() { format = 'image/png'; map = new OpenLa
Openlayers-OpenLayers中基于Filter的WFS查询
12-24 2418
打算实现的功能：基于OpenLayers实现对地图中城市POI模糊查询，并且能提 供基于位置的查询（GIS中就是基于圆的查询，通俗的说就是当确定用户位置后，可以查询用户周边一定范围内的POI）和基于多边形的查询（用户自己画出多 边形，实现在多边形范围内的POI查询），设定的界面如下图所示 1.      界面实现 页面的body主体实现如下：     body onload="in
Vue中openlayers使用jsts库做空间拓扑关系查询
厚积薄发.
07-18 273
目前原生的OpenLayers3并不支持空间拓扑关系查询，此类库可以作为重要的补充。通过此类库，可以判断多种空间几何的位置关系，最初建立这个工程的目的是为web地图应用提供一套完整的类库来处理和分析简单几何体，但jsts也可以作为一个独立的几何库。jsts是利用原JTS java源码通过AST AST自动翻译转换而成并保持了该API，除了对IO相关的部分类进行了选择性的并手动移植使其支持WKT，GeoJSON和OpenLayers 3。
openlayers查询sfs发布服务
心如止水 宠辱不惊
12-15 494
var evconfig={ monitorconfig:{ webservicesNS:"http://www.skylineglobe.com/sfs-schema", webservicesPrefix:"sfs", layertype:"shp", layerrealname:"gtz-daohang", l
Vue + OpenLayers 实时定位（二） 后端服务
大鱼的博客
08-24 839
本系列文章介绍一个简单的实时定位示例，示例的组成主要包括： - 服务后端，使用 Java 语言编写，模拟生成 GeoJSON 数据。 - 前端展示，使用 Vue + OpenLayers ，负责定时向后端服务请求 GeoJSON 数据，并在以标签的形式展现定位数据。 前端实现移步：[Vue + OpenLayers 实时定位（一） 前端展示](https://blog.csdn.net/weixin_39340061/article/details/108196570) 本文主要介绍定位服务后端示例，数据并
Openlayer 5 使用坐标点查询最近的图层feature
weixin_43947681的博客
03-29 1108
Openlayer 5 使用坐标点查询最近的图层feature vector.getClosestFeatureToCoordinate(coordinates); // 返回指定图层距离该坐标最近的faeture 官方API： getClosestFeatureToCoordinate(coordinate, opt_filter){module:ol/Feature~Feature} in...
webGIS实践（geoserver+openlayer+django）2_3_geoserver wms条件过滤与增删改查
吴道简的博客
05-16 1620
WMS既web map service。 WFS既web feature server。 WMTS既web map tile service。 WMS=WFS+WMTS。 WFS是用来跟后台进行数据交互的，对矢量要素进行增删改查。 WMTS是用来看的，大量地图数据在后端渲染成栅格瓦片，传输到前端显示。 一、geoserver条件过滤 数据——Layer Preview，Openlayers打开发布的图层v6_time_pref_pgn_utf_wgs84。 点击按钮，打开toggl.
GeoServer进阶：要素的增删改查
吴道简的博客
06-17 3607
本节主题： 使用geoserver进行属性和几何要素的增删改查，预计学习时间10分钟。 查找：按属性查找、按位置查找； 删除：按fid删除； 新增：新增几何要素； 修改：修改要素属性、修改要素几何。 如何使用GeoServer发布地图，并样例数据下载位置，参见： https://zhuanlan.zhihu.com/p/377826133 视频教程见： 一、查找 记得要先启动geoserver。 先预热一下，打开网址http://localhost:8080...
2022年面试，整理全网初、中、高级常见 Java 面试题
q66562636的博客
07-01 2265
面试题答案见微信小程序 “Java 精选面试题”，3000 + 道面试题。内容持续更新中包含基础、集合、并发、JVM、Spring、Spring MVC、Spring Boot、Spring Cloud、Dubbo、MySQL、Redis、MyBaits、Zookeeper、Linux、数据结构与算法、项目管理工具、消息队列、设计模式、Nginx、常见 BUG 问题、网络编程等。————————————————面向对象编程有哪些特征？一、抽象和封装类和对象体现了抽象和封装抽象就是解释类与对象之间关系的词。类
2021年面试，整理全网初、中、高级常见Java面试题
qq3164069700的博客
02-22 971
面试题答案私信【面试】即可获取，500+道面试题。内容中包含基础、集合、并发、JVM、Spring、Spring MVC、Spring Boot、Spring Cloud、Dubbo、MySQL、Redis、MyBaits、Zookeeper、Linux、数据结构与算法、项目管理工具、消息队列、设计模式、Nginx、常见 BUG 问题、网络编程等。 ———————————————— 面向对象编程有哪些特征？ 一、抽象和封装 类和对象体现了抽象和封装 抽象就是解释类与对象之间关系的词。类与对象之间的
OpenLayers + GeoServer 实现(扩展的)通用查询语言(CQL/ECQL)
优吉斯(YouGIS) - 传播GIS技术, 分享行业知识，欢迎关注！
05-19 6691
    1、CQL/ECQL简述        CQL（Common Query Language，通用查询语言）是OGC为目录web服务规范创建的查询语言，不像基于XML的编码语言，CQL使用我们更熟悉的文本语法编写，具有更好的可读性和适应性。更多关于Geoserver中CQL的使用说明，参考CQL And ECQL。CQL的使用，要求属性在比较运算符的左边，基于此，Geoserver提供了扩展...
openlayers缩放至图层要素
软考鸭
06-27 306
/ 缩放至图层范围。
【学习笔记之Openlayers3】查询分析篇（第五篇）
凌往昔
02-12 4959
这篇主要讲到基于openlayers3实现查询分析功能主要包括：属性查询，几何对象查询，位置关系查询这三类。 开发环境：openlayers3 geoserver postgresql+postgis 1.属性查询 其实属性查询没有什么要讲的，就是对于图层要素的的基础属性进行查询（例如名称，地址等等）这些查询就是简单的利用ajax进行请求后台，然后写SQL查询语句即可。这里就不多赘述了
openlayers------后台返回的写法
一星程序饲养员
09-08 203
Openlayer中的Feature
08-31 9803
引入： import { Feature } from "ol"; import { Point, LineString, Polygon } from "ol/geom"; 创建点要素Point： let feature = new Feature({ geometry: new Point([104, 30]), }); 创建线要素LineString： let feature = new Feature({ geometry: new L
openlayers实现属性查询
qq_44090964的博客
11-26 4288
openlayers+geoserver从发布地图到点击查询安装geoserver打开geoserver跨域权限发布shp要素地图1.创建工作区2.添加数据3.发布图层4.查看图层属性查询点击查询 从发布地图到点击查询 安装geoserver 1.安装geoserver，我这里提供了geoserver2.19.2版本的下载链接 geoserver. 2.下载以后解压，点击bin目录中的startup.bat启动服务。 3.注意8080端口不要被占用，很多vue项目的端口也是8080，注意改为8081。 4
openalyers 好玩的效果之蒙版图层
往事随风的博客
07-04 1686
openalyers 实现蒙版图层
WFS—GetFeature方法
weixin_30752377的博客
10-12 692
前言：WFS服务，可以通过OL进行加载，加载有简单方式也有GetFeature方式，该种方式自由度更大，可以结合一些过滤条件，这样一方面可以提高加载数据的效率，也是业务的一种。来张图效果图： 红色是通过GetFeature加载，轮廓线是简单加载的，北京市的道路也是简单方式加载的。 一、GetFeature方式（核心代码） // ...
layer.open弹窗修改确认之后保留父页面查询条件并刷新
最新发布
09-15
`layer.open` 是一个在Web开发中常用的JavaScript弹窗插件，它能够创建包括警告框、确认框、消息框、加载框、iframe层、表单层在内的多种类型的层叠式界面。如果你想要在弹窗修改确认之后保留父页面的查询条件并进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值