019：vue+leaflet 加载Geoserver地图，wms格式数据

已于 2025-03-12 16:27:00 修改
阅读量888 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet教程 leaflet示例 leaflet 大剑师 leaflet自学 leaflet WMS
于 2022-09-16 17:17:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/126894446
本文由大剑师兰特撰写，介绍如何在Vue项目中结合Leaflet显示Geoserver发布的WMS地图。通过简单配置和源代码示例，2分钟即可实现地图展示。

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

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 019个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中添加geoserver发布的地图，wms格式的数据。

直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：

了解本专栏 订阅专栏 解锁全文
使用Leaflet接入发布在Geoserver上的WMS服务
NhnMacos的博客
09-22 412
通过使用Leaflet库，我们可以轻松地将Geoserver上发布的WMS服务集成到我们的网页应用程序中。通过以上步骤，你可以使用Leaflet轻松地将Geoserver上发布的WMS服务集成到你的网页应用程序中。只需引入Leaflet库、创建地图容器、初始化地图、添加WMS图层以及添加其他控件和交互功能，你就可以创建一个具有Geoserver WMS图层的交互式地图应用程序。在上述代码中，我们添加了一个缩放控件，并在地图上注册了一个点击事件，当用户点击地图时，在控制台打印点击位置的经纬度坐标。
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3530
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet加载GeoServer的WMS地图服务.md
shanshanqwertyuiop的博客
09-20 740
leaflet加载GeoServer的WMS地图服务，该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”
openlayers加载geoserver发布的WMTS服务
最新发布
dengkexin123456的博客
06-21 754
本文探索了通过openlayers框架加载wmts服务，主要介绍vue2+openlayers加载wmts服务的过程。
leaflet 加载 geoserver 发布的 wms 服务
heshiyuan1406146854的博客
06-01 4461
1. 安装 geoserver 服务：略2. 启动 geoserver：3. 登录 geoserver 控制台：( 默认账号、密码为 admin、geoserver )4. 新建工作区：5. 添加新的数据存储和Mysql关联：5.1. 在Mysql 中新建一张 tb_area 表： 建表语句： 插入几条数据：按照如下这种格式插入几条数据： ps: sqlyog不支持查看 polygon 类型字段的值，可以使用navicat 查看。 安装geoserver 后默认是不支持添加mysql数据源的，需要从
leaflet加载百度地图
热门推荐
Jack的世界
10-18 1万+
leaflet加载百度地图 由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。 首先需要一些第三方的插件坐标系拓展首先我使用了这个玩意儿。这里需要注意的是，如果你使用的是0.7版
leaflet加载接入百度地图（leaflet篇.2）
地图之家
05-14 7806
完整代码文件在文章末尾处提供 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- L
Leaflet加载百度地图
吴道简的博客
04-13 2276
为了验证一下百度地图的影像、矢量、注记等瓦片数据是否是坐标统一的，写了一个简单的leaflet加载百度影像瓦片、矢量瓦片、注记瓦片的页面，叠加在一起，看了一下，果然坐标系是统一的。 <!DOCTYPE html> <html> <head> <title>加载百度地图</title> <meta charset="utf-8"> <style type="text/css"&...
28.（leaflet篇）leaflet接入geoserver发布的wms服务.zip
08-06
在本教程中，我们将深入探讨如何使用Leaflet.js库与GeoServer集成，以显示通过WMS（Web Map Service）发布的地图数据。Leaflet是一个轻量级的JavaScript库，专为Web上的交互式地图设计，而GeoServer是一个开源的...
099：vue+leaflet 加载WMTS数据显示图形，解决 leaflet.TileLayer.WMTS的bug问题
大剑师兰特的GIS世界
03-01 1089
第099个本示例的目的是介绍演示如何在vue+leaflet中加载WMTS数据，显示地图。在做这个示例的时候，引用了 leaflet.TileLayer.WMTS组件，发现了重大的问题，后来做出修改，才正确显示图形，请参考源代码。
leaflet加载百度地图底图
08-11
融合leaflet和百度地图底图
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
leaflet 加载百度自定义地图
12-01
leaflet 加载百度自定义地图，支持自定义百度地图样式
leaflet加载百度地图(矫正版)
12-20
http://blog.youkuaiyun.com/u012087400/article/details/53744756
leaflet加载百度、高德、谷歌、天地图等在线地图
03-26
leaflet加载百度、高德、谷歌、天地图等在线地图
088：vue+leaflet 实现极地标线地图，加载tileLayer.wms数据
大剑师兰特的GIS世界
02-22 652
第088个本示例的目的是介绍演示如何在vue+leaflet中实现极地标线地图，加载tileLayer.wms数据。
089：vue+leaflet 利用CRS实现椭圆形的全球地图
大剑师兰特的GIS世界
02-23 568
第089个本示例的目的是介绍演示如何在vue+leaflet中利用CRS实现椭圆形的全球地图。
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 6571
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
vue使用geoserver图层
09-02
对于Vue项目中使用GeoServer图层，你可以按照以下步骤进行操作： 1. 在Vue项目中安装axios库，用于发送HTTP请求。 ```shell npm install axios ``` 2. 创建一个Vue组件，用于显示地图和GeoServer图层。你可以使用开源地图库如OpenLayers或Leaflet。 ```vue <template> <div id="map"></div> </template> <script> import axios from 'axios'; import 'ol/ol.css'; // 如果使用OpenLayers作为地图库 // 或 import 'leaflet/dist/leaflet.css'; // 如果使用Leaflet作为地图库 import { Map, View } from 'ol'; // 如果使用OpenLayers作为地图库 // 或 import { Map, TileLayer } from 'leaflet'; // 如果使用Leaflet作为地图库 export default { mounted() { this.loadMap(); }, methods: { loadMap() { // 创建地图 const map = new Map({ target: 'map', view: new View({ center: [0, 0], zoom: 2, }), }); // 添加GeoServer图层 axios.get('http://localhost:8080/geoserver/wms/getCapabilities') .then(response => { // 解析GeoServer能力文档，获取图层信息 const capabilities = response.data; const layers = parseLayers(capabilities); // 添加图层到地图 layers.forEach(layer => { const layerSource = new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/wms', params: { LAYERS: layer.name, }, }); const layerTile = new ol.layer.Tile({ source: layerSource, }); map.addLayer(layerTile); }); }) .catch(error => { console.error('Error loading GeoServer layers:', error); }); }, }, }; </script> ``` 3. 编写解析GeoServer能力文档的辅助函数，用于提取图层信息。 ```javascript function parseLayers(capabilities) { // 解析capabilities对象，提取图层信息 // 这里需要根据GeoServer能力文档的结构自行编写解析逻辑 // 返回一个包含图层信息的数组 } ``` 以上示例是一个简单的Vue组件，通过axios库发送GET请求获取GeoServer的能力文档，并解析其中的图层信息。然后使用OpenLayers或Leaflet库创建地图并添加GeoServer图层。 请注意，示例中的URL和解析逻辑需要根据你自己的GeoServer配置进行调整。同时，还需要根据你使用的地图库进行相应的调整。 希望这些信息对你有所帮助！如果还有其他问题，请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值