openlayers通过点击地图弹出窗口完成属性查询

最新推荐文章于 2024-03-07 19:22:17 发布

好人就该被人拿枪指着？

最新推荐文章于 2024-03-07 19:22:17 发布

阅读量2.5k

点赞数

文章标签： javascript css3 html arcgis

本文链接：https://blog.youkuaiyun.com/qq765331706/article/details/121997548

版权

一、成果展示

再上一篇文章中，已经完成了在geoserver中发布地图并通过openlayres加载到自己的页面中，这一章我们通过openlayer来实现地图的属性查询。（下一篇文章展示高亮的代码，跟空间定位一起写比较好）
OPENLAYERS属性查询

二、代码

需要注意的地方

js代码中【创建矢量图层对象】注释下的代码里url填自己发布的geoJSON数据地址（上一篇文章提到过，不知道在哪找地址的，可以去上一篇文章看看）
js中【ol地图对象】代码里面可以自己定义地图最开始的定位与缩放大小
js中最后的【设置单机处理弹窗】代码中可以设置弹窗中体现的内容（特别注意的是，本人使用的数据是有name这个属性的，如果没有，可以自己改正）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="static/ol.css" type="texts"><link>
<script type="text/javascript" src="static/ol.js"></script>
<style>
.ol-popup {
     
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6) ;
    box-shadow: 0 1px 4px rgba(0, 0,

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

好人就该被人拿枪指着？

关注关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

openlayers单击弹出对话框

qq_42309685的博客

12-16

1688

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Parcel with OpenLayers</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/...

openlayers实现点击图层弹出相应信息

panzi_only的博客

11-19

2127

openlayers：4.6.5 vue-cli：3.0 openlayers官网：https://openlayers.org/ 天地图官网：https://www.tianditu.gov.cn/ 1.准备lmap.js并初始化地图 let lmap = { map: null, init() { this.map = new ol.Map({ ...

3 条评论您还未登录，请先登录后发表或查看评论

openlayers实现属性查询

qq_44090964的博客

11-26

4504

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

OpenLayers 3+Geoserver+PostGIS实现点击查询

最新发布

10-28

openlayers3要素移动交互并弹出要素信息

03-24

这个功能包括在地图上展示点要素，当鼠标移动到这些要素上时，要素会高亮显示，并且会弹出一个信息窗口来展示该要素的相关详细信息。这个过程涉及到多个关键知识点，下面我们将详细探讨。首先，我们需要了解...

vue集成openlayers加载geojson并实现点击弹窗教程

10-14

在本教程中，我们将探讨如何在Vue项目中集成OpenLayers库来加载GeoJSON数据，并实现点击地图要素时弹出详细信息窗口。OpenLayers是一个强大的开源JavaScript库，用于创建交互式地图应用，而Vue则是一种流行的前端...

openlayers入门开发系列之地图属性查询篇

weixin_34319817的博客

11-06

1505

本篇的重点内容是利用openlayers实现地图属性查询功能，效果图如下：实现思路：模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("click", function () { var keyword = $("#skeyword").val(); if (keyword == "" || keyword == unde...

openlayers5属性空间查询.zip

06-19

openlayers5属性空间查询.zip

openlayers实现地图弹窗

10-14

主要为大家详细介绍了openlayers实现地图弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

五、OpenLayer点击查询

qq_39330397的博客

08-21

769

这种矢量图层属性信息是直接存储在前端的canvas里面的，我们可以直接获取到它，前提是你在添加要素时已经动态给他赋值上（properties属性，上一节图层介绍有注释）或者添加的geojson格式对象的数据，否则点击获取的也是空对象。这种是栅格图层，理解为就是图片，属性信息是没有存储在前端的。比如arcgis server, 超图的iserver，都提供了空间查询的服务接口，需要自行去拼接参数请求获取对应数据。这块其实要分多种类型，因为不同图层和服务获取属性信息的方式和地址也不一样。

openlayers查询sfs发布服务

心如止水宠辱不惊

12-15

538

var evconfig={ monitorconfig:{ webservicesNS:"http://www.skylineglobe.com/sfs-schema", webservicesPrefix:"sfs", layertype:"shp", layerrealname:"gtz-daohang", l

openlayers4 入门开发系列之地图属性查询篇（附源码下载）

Unknowncheats的博客

09-09

185

前言 openlayers4 官网的 api 文档介绍地址openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。 openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章： geoserver 安装部署步骤 geoserver 发布地图服务 WMS geoserver 发布地...

openlayers单击弹出属性对话框

ANNENBERG的博客

07-08

923

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Parcel with OpenLayers</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <link rel="styleshe...

超图 openlayers 图层点击事件多图层时查询图层要素

weixin_60592115的博客

03-07

2303

0.001 : 0.05,//根据缩放程度进行缓冲区大小设置。color: "#3e84cf", //高亮区域的边界线颜色。// 需要查询数据的图层添加事件。// 底图外的其他图层添加事件。// 已显示图层添加事件。

Openlayers的空间查询wfs

ANNENBERG的博客

07-15

4078

Openlayers的空间查询，下面主要包括三种查询，分别是点击地图查询，过滤条件查询，多边形查询等。说明的文字不是很多，直接看代码，最后提供一份完整的代码，直接复制到html中就可以运行。 1.点击查询点击查询主要是使用map的forEachFeatureAtPixel进行查询，首先需要给地图添加一个点击事件，如下所示： //点击查询 map.on('singleclick',function(evt){ var pixel = map.getEventPixel(e

OpenLayers基础教程——实现popup弹出框

HerryDong的博客

08-20

9014

1、前言在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。 2、准备测试数据在SqlServer中新建一张省会数据表——ProvincialCapital，字段如下表所示：字段含义 Id 自增主键 CityName 城市名称 ProvinceCode 省份编码 Pinyin 拼音 Attribution 归属 CityCode 城市编码 PostCode