OL4通过ajax加载geoserver中WMS的GetFeatureInfo实现点击查询（解决跨域问题）

最新推荐文章于 2024-08-29 13:25:22 发布
最新推荐文章于 2024-08-29 13:25:22 发布
阅读量1.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/tuboshu/p/10752267.html
本文介绍了如何通过Ajax加载Geoserver的WMS GetFeatureInfo以获取属性信息，解决跨域问题。利用jsonp格式和特定的format_options参数实现返回json数据，并提供完整demo示例和常见问题解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时候我们不想加载WFS服务来获取要素的属性信息，我们就想加载WMS或者WMTS获取属性信息，geoserver客户端给我提供一种实现是返回html，这种方式受限太大，如果能返回json格式的数据那多好！这样我们就可以自己定义展示的效果了，在这里我首先想到的是通过点击事件配合Ajax 来加载WMS的GetFeatureInfo，但是发现总是提示跨域问题，明明我都已经配置了跨域，怎么还会报这个错呢？后来通过jsonp格式解决，但是又开始报Uncaught ReferenceError: parseResponse is not defined，差个各种资料最后通过format_options参数解决问题，具体东西见下文:

一、WMS的GetFeatureInfo介绍
1、功能
获取点击对象的属性信息，类似于WFS的 GetFeature，但是在输入和输出格式上受限，官方还是推荐WFS
2、主要的参数
在这里插入图片描述
详细见WMS详细介绍
3、关于输出格式（这里我们输出的json格式）
但是要解决跨域的问题需要用到jsonp，那么返回信息的格式不能用application/json而要用text/javascript
在这里插入图片描述
详细参考官网

最低0.47元/天 解锁文章

200万优质内容无限畅学
221：vue+openlayers 加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息
大剑师兰特的GIS世界
03-14 1049
第221个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的WMS数据，其核心目标是在地图上显示瓦片，点击瓦片层，可以获取到瓦片上的信息。https://xiaozhuanlan.com/topic/8026571943 这是另外的一种方法。
Openlayers与GeoServer：跨域配置与WMS服务加载
席木木的博客
05-08 2111
跨域配置与WMS服务加载下载与安装访问GeoSever主页发布WMS网络地图服务DataV下载GeoJSON边界数据QGIS制作Shapefile数据源和Style样式文件GeoServer发布WMSGeoServer添加样式到工作区GeoServer发布WMS地图服务到工作区GeoServer：WMS地图服务预览Openlayers加载WMS服务GeoServer图层预览页面详解WMS服务接口GetMap接口GetFeatureInfo接口DescribeLayer接口GetLegendGraphic接口
WMS GetFeatureInfo (Image Layer)——WMS获取要素信息（图像图层）
SmileCoffin的博客
07-04 6323
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent
wms GetFeatureInfo查询参数详解（maptalks为例）
七月❤的博客
10-11 1040
地图的宽高，在maptalks是，：像素坐标，在maptalks里是。：图层名称，多图层英文逗号隔开 ,)，event是点击时间获取的值。：范围，在maptalks是。
怎样使GeoServer在WMS的GetFeatureInfo请求返回JSON格式数据
zy332719794的专栏
06-30 9759
主要思路是使用自定义模版来实现。 1、定位到路径： GEOSERVER_DATA_DIR/workspaces/{workspace}/{datastore}/{featuretype}/ 2、在上一步的目录下创建三个空的文本文件，并将文件名称修改为: header.ftl、content.ftl、footer.ftl 3、用记事本打开content.ftl文件，将下面的文本内
ol7示例2-WMS GetFeatureInfo (Image Layer)
FJGISer的博客
09-07 570
【代码】ol7示例2-WMS GetFeatureInfo (Image Layer)
geoserver Openlayers4 关于wms，jsonp、地图服务、GetFeatureInfo查询服务跨域请求的各种问题
平凡人的博客
10-13 1723
1、直接上代码不多bb 错误1： （我的geoserver是挂载在tomcat上的，有些网上设置的跨域是不行的，是因为有的用的geoserver是直接在jett上的，要注意搜索关键字，要说明自己geoserver是通过什么方式访问的。） 地图加载无问题，但是请求json就会出错，配置见下图。 <!DOCTYPE html> <html xmlns:th="http...
如何实现高德地图集成Geoserver WMS服务的流程，并配置跨域和样式？
最新发布
11-11
首先，从shp文件的导入开始，然后在Geoserver中发布图层并配置样式，接着处理跨域问题，并确保Tomcat服务器配置正确，最后在高德地图中加载WMS服务并使用GetFeatureInfo进行查询。 参考资源链接：[高德地图加载WMS...
如何在高德地图中通过Geoserver加载并展示WMS服务？请详细介绍从SHP文件到高德地图的整个流程。
11-11
要实现在高德地图中加载并展示通过Geoserver发布的WMS服务，需要经历一系列的配置和开发步骤。《高德地图加载WMS全程指南：从shp到geoserver》是指导这一过程的实用资源，它涵盖了从处理地理数据文件到最终在地图上...
mapbox 添加geoserver发布的wms服务及wms服务属性查询
qq_34870529的博客
05-14 2413
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>mapbox 添加 geoserver发布的wms服务及wms服务属性查询</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <.
Geoserver+WMS实现属性查询
Dani05的博客
06-27 4560
Geoserver发布服务以及加载WMS影像图层参考GeoServer发布服务+跨域问题+Cesium调用WMS/WFS服务WMS服务GetMap请求API文档中
（十二）Cesium加载Geoserver的WMS、WFS服务，点击查询属性
a974313302的博客
05-14 2428
目前基于需求，加载InSar滑坡数据，点击显示信息。
Vue.js与OpenLayers：加载Geoserver瓦片WMS数据并使用getFeatureInfoUrl获取瓦片数据信息
laugh666的博客
08-16 542
本文介绍了如何利用Vue.js和OpenLayers实现加载Geoserver瓦片WMS数据，并通过点击地图获取瓦片数据的详细信息。当然，除了本文提到的功能，OpenLayers还有许多其他功能和扩展，你可以参考官方文档深入学习。本文将介绍如何利用Vue.js和OpenLayers实现加载Geoserver瓦片WMS数据，并通过getFeatureInfoUrl获取瓦片数据的详细信息。获取瓦片数据信息的过程。方法根据给定的坐标和分辨率生成了一个URL，该URL将用于获取瓦片数据的详细信息。
openlayers+geoserver+wms实现空间查询，属性查询
aodao8891的博客
08-09 699
openlayers+geoserver+wfs实现空间查询，属性查询 查询方法 点击查看原文 转载于:https://www.cnblogs.com/dqygiser/p/10464019.html
Geoserver 条件查询
huifer
02-16 4094
Geoserver 条件查询 发布数据 选择数据储存 选择数据类型 选择文件 将数据放到 geoserver-2.14.1\data_dir 目录下任意位置 发布 点击发布自行确认配置 ​ 主要配置内容 查看数据 在geoserver 中找到 LayerPreview 打开后获取 url http://localhost:8999/geoserver/wang...
cesuim 点击获取图层信息并高亮（点查询）
weixin_45578673的博客
03-01 1761
cesuim 点击获取图层信息并高亮（点查询）
geoserver 知识小计
aisheng3237的博客
09-09 159
http://localhost:8888/geoserver/wms?service=WMS&request=GetCapabilities 这个地址用于获取发布的WMS服务的属性，用于获取该wms服务中发布的图层等信息 GetCapabilities WMS里面定义的一个方法 Web地图服务（WMS）利用具有地理空间位置信息的数据制作地图。其中...
Geoserver的 rest、wfs、wms、wps接口请求指南
Yuanben_wuxin的博客
08-29 2708
时光如白驹过隙，不知不觉间已经干了7年的GIS开发了，一路走来跌跌撞撞的，跟随着时代的洪流行尸走肉般的生存着（此处省略n个字，全是感慨）
网络地图服务（WMS）详解
人生海海 山山而川
01-14 4675
根据具体实例详细论述了GIS中网络地图服务（WMS）的内容。
Geoserver跨域问题快速解决指南
Geoserver是开源的地理空间...综合上述知识点，开发者在实施Geoserver跨域问题解决方案时，应确保充分理解跨域资源共享的工作原理，以及Geoserver的具体配置方法，从而在保证安全的前提下，有效地解决跨域请求问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值