Vue.js与OpenLayers：加载Geoserver瓦片WMS数据并使用getFeatureInfoUrl获取瓦片数据信息

最新推荐文章于 2026-06-22 16:19:09 发布

原创最新推荐文章于 2026-06-22 16:19:09 发布 · 628 阅读

1 GEO检测

收录于

当前文章被以下社区和专栏收录：

js 专栏收录该内容

527 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在Vue.js项目中结合OpenLayers加载Geoserver瓦片WMS数据，并通过getFeatureInfoUrl获取地图瓦片的详细信息，包括创建Vue.js项目、安装OpenLayers、创建地图组件、监听地图点击事件以及发送HTTP请求获取信息。

Vue.js与OpenLayers：加载Geoserver瓦片WMS数据并使用getFeatureInfoUrl获取瓦片数据信息

近些年来，WebGIS应用逐渐成为地理信息系统领域的重要发展方向。其中，Vue.js和OpenLayers是前端开发中常用的技术工具。本文将介绍如何利用Vue.js和OpenLayers实现加载Geoserver瓦片WMS数据，并通过getFeatureInfoUrl获取瓦片数据的详细信息。

在开始之前，我们需要确保已经安装了Vue.js和OpenLayers，并且已经搭建好了Geoserver服务器。接下来，我们将从以下几个方面详细介绍实现过程。

创建Vue.js项目
首先，在命令行中执行以下命令创建一个基于Vue.js的项目：

vue create geoserver-wms-demo

然后，选择合适的配置即可创建项目。

安装OpenLayers
进入项目目录并执行以下命令安装OpenLayers：

cd geoserver-wms-demo
npm install ol

创建地图组件
在Vue.js项目中，我们可以通过创建一个地图组件来管理地图相关的逻辑和操作。在src/components目录下，创建Map.vue文件，并添加以下代码：

标签

#vue.js #flutter #前端 #js

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大笑编程

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

221：vue+openlayers 加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息

大剑师兰特的GIS世界

03-14

1381

第221个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的WMS数据，其核心目标是在地图上显示瓦片，点击瓦片层，可以获取到瓦片上的信息。https://xiaozhuanlan.com/topic/8026571943 这是另外的一种方法。

OpenLayers入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图

GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid

06-20

2047

在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。

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

使用Vue和OpenLayers加载Geoserver数据并使用ImageWMS和ImageLayer呈现图形

laugh666的博客

09-18

568

可以使用Vue CLI来创建一个新的Vue项目，然后使用npm或yarn来安装OpenLayers库。通过以上步骤，你就可以使用Vue和OpenLayers加载Geoserver数据，并使用ImageWMS和ImageLayer来呈现地图图形。安装完成后，可以创建一个新的Vue组件来加载地图数据并显示地图。在Vue组件中，需要引入OpenLayers库并初始化地图。以上代码将在Vue组件加载时自动执行，并在指定的地图容器中显示Geoserver上的地理数据。在Vue组件的模板中，使用一个具有指定ID的。

vue+openlayer6访问geoserver发布的wms栅格影像图，并使用getFeatureInfoUrl()函数点击获取属性

11-11

2301

效果图：实现代码： <template> <div id="map"> <div style="position: absolute; z-index: 9999; color: red; font-size: 30px"> {{ info }} </div> </div> </template> <script> import "ol/ol.css"; import Map

openlayer 右击事件查找要素

josiecici的博客

09-26

540

核心代码，右击事件逻辑： getCoordinateFromPixel右击事件像素换成坐标点-getFeatureInfoUrl查询 closeRightMenu(e) { console.log('这是鼠标右击事件'); console.log('这是e', e); console.log('这是this.$store.state.tagging.taskType', this.$store.state.tagging.taskType); if (t

openlayers

最新发布

a378113472的博客

06-22

274

场景用哪个用户输入的经纬度EPSG:4326（度）地图底图瓦片EPSG:3857（米）传给 View 的 center用转成 3857从地图点击得到的坐标用toLonLat()转成 4326测距/测面积用ol/sphere的方法后端 API 返回的坐标通常是 4326，需要时转projection（投影）就是把地球这个三维球体上的经纬度坐标，"压平"到二维平面地图上的数学方法。你看到的任何一张平面地图（屏幕上的、纸质的），背后都有一个投影。没有投影，你就没法把地球画在平面上。

通过Openlayers中getGetFeatureInfoUrl方法请求WMS服务数据到客户端（Browser）（基于Geoserver服务器）

lw19910913的博客

06-21

9702

本文基于tomcat服务器进行网站开发，geoserver管理GIS数据服务，在tomcat服务器中访问geoserver时出现跨域访问被拒绝的杯具，遂本文要有理有据的阐述一下如何解决这个跨域访问geoserver中的GIS数据并以JSON数据格式返回到前端。首先，说一下文章的目的。本文通过点击地图并以JSON格式返回与地图相关的属性数据，首先通过jquery中的ajax方法进行 jsonp

openlayer6 getFeatureInfoUrl +map.on+map.un使用

josiecici的博客

09-10

1065

代码： import { layers } from "./layersJson" import axios from "axios"; export default { queryFun: {}, // type:"设备图层" openClickAndQueryWithType: function (map, type) { // console.log('这是this', this); let arr = map.getLayers().array_ let

leaflet 使用GetFeatureInfo与WMS交互

qq_37550440的博客

03-06

1643

在使用Leaflet进行地图开发时，GetFeatureInfo请求是一种常用于与WMS（Web Map Service）服务交互的手段，用以获取地图上特定点的详细信息。Leaflet本身是一个轻量级的开源JavaScript库，用于移动友好的交互式地图，它没有直接提供GetFeatureInfo的API，但可以通过调用WMS服务来实现这一功能

OpenLayers：加载GeoServer发布的WMTS、TMS服务

Puzzle的博客

11-17

1万+

# 数据 ## 数据说明：广州天河区路网.shp ## 坐标系：EPSG:3857 ## 坐标系范围：[-20037508.34, -20037508.34, 20037508.34, 20037508.34] ## 数据范围：[12612071.934997188, 2644615.605161872, 12628768.72360215, 2660183.6516002486] ## 数据中心：[12620420.32929967, 2652399.6283810604].....

openlayer加载geoserver发布的wms服务

A_ta_and_run的博客

05-10

1640

CQL_FILTER= 过滤语句（sql）将上面的源添加到图层里，如果项目里图层过多的话可以设置zindex，params: {‘LAYERS’: ‘服务图层名字’,url后面可以跟sql_filter进行条件过滤。1.引入瓦片图层和瓦片wms服务源。3. 将图层添加到map。

openlayers wms/wmts 栅格图层点击点像元值查询

冰雪为融的博客

09-12

1338

通常，WMS 是用于获取特定坐标点的地图特征信息（包括像元值）的服务，而 WMTS 是基于瓦片的服务，通常不提供直接的 GetFeatureInfo 请求支持。：不同的浏览器对于并发请求数的限制可能有所不同，但通常在同一域名下的并发请求数量是有限制的。使用WMS图层叠加：虽然你提到不想使用WMS，但你可以在WMTS地图上叠加一个透明的WMS图层，该图层可以用于获取点击点的像元值。浏览器同时请求的个数是有限制的，这是因为浏览器为了维护性能和网络资源的合理使用，对同时发起的HTTP请求进行了限制。

Openlayers 7.3.0版本，加载Geoserver的WMS服务

2301_78464687的博客

06-01

742

Openlayers 7.3.0版本，加载Geoserver的WMS服务

【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

weixin_41607453的博客

04-08

3107

修改vue项目的端口可以通过项目根目录下package.json文件修改serve：“serve”: “vue-cli-service serve --port 8002”启动vue项目：进入项目的目录下，执行npm run serve 启动。/vue.ps1，因为在此系统上禁止运行脚本，有关详细信息，…在配置好以上环境后，下面就可以正式实现加载wms地图服务的功能。安装完成后，控制台输入node -v，显示版本号即安装成功。安装完成之后控制台输入vue -V，显示版本号则安装成功。

openlayers空间点查询之GetFeatureInfo

wangyingda415的专栏

07-03

9762

在map对象上注册点击方法监听，这里我用的是wms，当然你也可以查询wfs map.events.register('click', map, function (e) { var params = { REQUEST: "GetFeatureInfo",

开源GIS（七）——openlayers中单击获取要素（深度好文）

热门推荐

xcymorningsun的专栏

09-07

1万+

目录一、引言二、前台方法 1、interaction中select方法 2、map中forEachFeatureAtPixel方法三、gis server方法 1、wms中getfeatureinfo 2、wfs中getfeature 四、后台方法五、空间数据库方法六、总结一、引言 ...

openLayers添加geoserver服务wms图层（vue项目）

c6812的博客

04-14

1206

8080的端口被占用 netstat -aon|findstr “8080” 找到pid 打开管理器-服务-找到对应pid结束任务。在使用wms图层的时候碰到了跨域的问题，可能大家也会碰到，给大家提供一下解决思路。我当时找了好半天，这里也给把链接给出来，直接按照他的方法弄就可以了。我是直接使用了火狐的浏览器，安装了插件，可以参考下面这篇。贴代码如果TileWMS出不来可以试试ImageWMS。可以直接使用高德，百度或者天地图，这里有大佬进行了汇总。

Vue.js和OpenLayers实现加载Geoserver数据并使用ImageWMS和ImageLayer呈现图形

TechNovaX的博客

09-02

411

本文将介绍如何利用Vue.js和OpenLayers库，加载Geoserver数据，并使用ImageWMS和ImageLayer来实现地理数据的可视化呈现。通过以上步骤，我们成功地利用Vue.js和OpenLayers实现了加载Geoserver数据，并使用ImageWMS和ImageLayer来呈现地理图形。在Vue.js项目中，我们需要使用OpenLayers库来处理地图和要素显示，还需要使用axios库来进行HTTP请求获取Geoserver数据。此外，还可以根据需求进一步调整地图视图和图层样式等。

Openlayers(三) vue3结合Geoservser加载城市边界

qq_42583549的博客

03-26

1877

创建图层、数据仓库、工作空间，有两个名称中文部分是为了方便我们维护数据时候能够快捷看明白是什么数据，英文名称是为了前端使用openlayer请求的时候能够对应上。数据图层通过geoserver发布后，我们可以获取图片、JSON数据等多种方式图层信息，geoserver内置预览是以wms数据形式加载图层信息。然后点击发布，我们可以在图层预览中看到我们发布的图层信息，geoserver前端使用openlayer加载数据。图层，对点位数据转化为对外提供服务能力，转化为（图片、JSON数据等）

openlayers属性数据mysql_Openlayers+GeoServer+MySql获得JSON、GML数据的兼容性问题

weixin_42422648的博客

01-28

455

问题在使用OpenLayers4获得GeoServer数据时出现的一个问题：if (currentSource.getGetFeatureInfoUrl) {url = currentSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {'INFO_FORMAT': 'application/jso...