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

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

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

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

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

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

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

最低0.47元/天 解锁文章
AI学渣
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Openlayers-OpenLayers中基于Filter的WFS查询
12-24 2401
打算实现的功能：基于OpenLayers实现对地图中城市POI模糊查询，并且能提 供基于位置的查询（GIS中就是基于圆的查询，通俗的说就是当确定用户位置后，可以查询用户周边一定范围内的POI）和基于多边形的查询（用户自己画出多 边形，实现在多边形范围内的POI查询），设定的界面如下图所示 1.      界面实现 页面的body主体实现如下：     body onload="in
openlayers------后台返回的写法
一星程序饲养员
09-08 190
openlayers 选中浮空效果 阴影 filter 遮罩
最新发布
qq_36287830的博客
05-17 387
openlayers 选中浮空效果 阴影 遮罩
Openlayer中的Feature
~~
08-31 9334
引入： 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 3971
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 1560
openalyers 实现蒙版图层
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
10-16
在本文中，我们将深入探讨如何使用layUI框架的layer.open方法在content中打开一个数据表格，并获取选定值以便进行后续处理。layUI是一款基于 layui 的前端 UI 框架，它提供了丰富的组件和便捷的API，包括弹层、表单...
openlayer在线标绘，并实现增删改查
09-16
在这个"openlayer在线标绘，并实现增删改查"的主题中，我们将深入探讨如何利用OpenLayers加载离线地图，进行在线标绘，以及如何实现标绘要素的增删改查功能，同时还会涉及地图图层切换和定位功能。 1. **加载离线...
解决在layer.open中使用时间控件laydate失败的问题
10-16
然后使用layer.open来打开这个弹窗，并在success回调中初始化laydate： ```javascript layer.open({ content: $("#layopen").html(), success: function() { laydate({ "elem": "#time" }); } }); ``` 然而...
layer.open 获取不到表单信息的解决方法
10-16
今天小编大家分享一篇layer.open 获取不到表单信息的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈bootstrap layer.open中end的使用方法
10-16
在 Bootstrap 中，虽然本身并不直接包含 Layer.js 的功能，但开发者经常将两者结合使用，以增强网页的交互体验。Layer.js 可以方便地与 Bootstrap 的其他组件配合，提供更丰富的弹出层效果。 在 Layer.js 中，`...
WFS—GetFeature方法
weixin_30752377的博客
10-12 661
前言：WFS服务，可以通过OL进行加载，加载有简单方式也有GetFeature方式，该种方式自由度更大，可以结合一些过滤条件，这样一方面可以提高加载数据的效率，也是业务的一种。来张图效果图： 红色是通过GetFeature加载，轮廓线是简单加载的，北京市的道路也是简单方式加载的。 一、GetFeature方式（核心代码） // ...
openlayers的geometry范围过滤
qingzhizhenhun的博客
01-21 2718
最近一直在做基于openlayers的地图开发,遇到了一些filter过滤的问题,特此记录 根据官方文档中filter的描述,它有以下几个方法: 网上的代码都是openlayers的老版本的,很多都已经失效了,我写的代码都是根据最新的官方文档来的,基于openlayers4; 我常用的有equalTo,like,or这几个: //like,两边是通配符 var valFilter = ol.fo...
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查询sfs发布服务
心如止水 宠辱不惊
12-15 489
var evconfig={ monitorconfig:{ webservicesNS:"http://www.skylineglobe.com/sfs-schema", webservicesPrefix:"sfs", layertype:"shp", layerrealname:"gtz-daohang", l
Openlayers通过feature获取Layer以及通过点获取线feature
热门推荐
feishusang的博客
03-12 2万+
Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer），需要另外写一个方法。 OL选择线元素有一个BUG，一般选择到的是线上的点元素，而不是线元素，因此需要写一个方法通过这个点元素去获取线元素。下面主要是我使
vue+openlayer实现地图框选、多选
~~
08-25 3850
<template> <div id="map"> <el-button @click="addLayer()">添加图层</el-button> <el-button @click="removeLayer()">移除图层</el-button> <el-button @click="addInteraction()">添加交互</el-button> <el-but.
143: vue+openlayers 做蒙版过滤处理，实现剪切、遮罩效果
大剑师兰特的GIS世界
10-17 589
本示例的目的是介绍演示如何在vue+openlayers项目使用地图的filter过滤功能，可以剪切和遮罩地图，突出挂载的feature部分信息。点击查看本专栏内容目录列表。
openlayer 使用线对面要素分割
08-19
在OpenLayers中，你可以通过使用Turf.js库来实现线对面要素的分割。Turf.js是一个流行的JavaScript库，专门用于地理空间分析。 首先，确保你已经在项目中引入了Turf.js库。然后，你可以按照以下步骤进行线对面要素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值