Vue中访问Geoserver发布的openlayer中wms地图服务

已于 2023-06-12 10:02:14 修改
阅读量4.3k 收藏 19
点赞数 3
分类专栏： openlayers geoserver 文章标签： 其他
于 2020-08-04 16:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/107790185
版权
本文介绍了如何在Vue项目中利用OpenLayers加载GeoServer发布的WMS地图服务，包括GeoServer的发布步骤、OpenLayers的引入、地图配置及坐标转换。同时，提供了两种查看要素属性的方法，并提及了加载不同数据类型（如矢量地图和栅格地图）的注意事项。

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

一，geoserver发布地图服务

详见：Geoserver下载，安装与发布地图服务_李疆的博客-CSDN博客

二，引入ol

cnpm i ol@5.3.3 -S

三，根据图层预览中的URL，配置以下代码

（注意：如果没有显示出来，按F12查看有没有报错。如果没有报错，那么其原因极有可能是zoom设置小了，把zoom设为15等比较大的数再试试！！）

URL：http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2

最低0.47元/天 解锁文章
OpenLayers入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-20 1723
在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3386
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
使用vue2 + Echarts + geoServer服务发布图层服务显示地图
weixin_62186125的博客
11-29 350
/ dataView 数据视图 restore 还原 saveAsImage 保存为图片。{ name: "椿林镇", value: 70.5 },{ name: "孙镇", value: 70.5 },// 发布geoserver服务，拿到其geojson数据，我这个发布的是两个镇的数据。// b是name名称 c是value值 （）是单位。// item 在地图系列中通常指代地图的一个区域。// 复制上边地址栏的链接，放到这里。
geoserver搭建Docker一键直接安装并上传tif影像预览
最新发布
version_chuxuan的博客
04-07 995
使用docker安装geoserver，发布一个图层是我们本次实验的目的通过docker部署geoserver实践可以实现tif数据的发布，这对于前端leaflets开发有帮助，后续如果有geoserver的一些经验，也会发出来。
vue中使用OpenLayer加载Geoserver的WMS
qq_43741689的博客
01-16 365
思路： 1.初始化vue 2.下载ol库`npm install ol` 3.创建map和source,layer,`注：本文数据是WMS(Web Map Service)的，需要layer是TileLayer，需要source是TileWMS,所以需要引入对应的库` 4.将layer添加到map
vue3+openlayer调用geoserver发布的矢量地图服务并进行显示（清晰封装，简洁明了）
qq_37967853的博客
11-02 1908
vue3+openlayer调用geoserver发布的矢量地图服务并进行显示（清晰封装，简洁明了）
vue调用geoserver详解
pleaseprintf的博客
07-13 2420
当涉及到在Vue.js项目中调用GeoServer时，你需要遵循一些步骤来确保成功集成。GeoServer是一个开源的地理数据服务器，它允许你存储、检索和发布地理数据。在本文中，我将向你展示如何在Vue.js项目中使用GeoServer。恭喜！你已经成功地在Vue.js项目中调用GeoServer并显示地理数据。你可以进一步扩展该应用程序，添加交互功能和其他地理数据图层。希望这篇博客能对你有所帮助！需要系统源码或者BiShe加V。
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
冰雪为融的博客
07-15 2636
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
瓦片地图与geoserver发布
weixin_30451709的博客
10-17 605
本文主要包括以下内容 TileMill生成Tile影像金字塔（.mbtiles压缩文件） Mbutil(https://github.com/mapbox/mbutil)解压缩 Apache HTTP Server(或tomcat) 建立web瓦片服务 客户端调用（ http://www.arcgis.com/home）测试 首先将数据导入postgres数据库中...
28.（leaflet篇）leaflet接入geoserver发布的wms服务.zip
08-06
在本教程中，我们将深入探讨如何使用Leaflet.js库与GeoServer集成，以显示通过WMS（Web Map Service）发布的地图数据。Leaflet是一个轻量级的JavaScript库，专为Web上的交互式地图设计，而GeoServer是一个开源的...
openlayer + geoserver 发布地图服务
lnqkszr的博客
05-27 1011
openlayer + geoserver 发布WMS/WFS 一、软件环境 下载安装webstorm，下载地址 下载安装node.js，安装教程百度一堆不再赘述下载地址 下载安装Tomcat，安装教程百度一堆不再赘述下载地址 下载geoserver，下载地址 二、环境配置 Tomcat启动后如果控制台显示中文乱码，在Tomcat安装根目录，conf文件夹中找到logging.properties文件，编码修改成GBK。 将下载的geoserver，解压出来的war包放入Tomcat中webapps目
3-Openlayers加载GeoServer发布的WMS服务
lovewhoilove
10-08 1231
首先根据1-借助Node搭建OpenLayers开发环境来搭建一个项目。 1 加载图层组 新建一个index.html，代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>Using OpenLayers with Parcel</title> <style> @import "no
Vue中使用Openlayers加载Geoserver发布的ImageWMS
wwf1225的博客
06-09 2042
场景Openlayers下载与加载geoserver的wms服务显示地图：在上面使用Openlayers加载wms服务显示地图的基础上，如果想要在Vue中使用Openlayers加载地图怎么用。在上面使用图层预览后可以直接在网页中显示wms地图相同点：都是加载WMS服务。不同点：TitleWMS会把当前可视窗口根据网格（开发者可以在调用OpenLayers api的时候自定义）切分，一片一片地返回回来，在前端进行整合。而ImageWMS则不会进行切割，每次请求都是只会返回一个当前窗口可见地地图图片。如果WM
geoserver发布TIF格式瓦片地图
09-07 2万+
一，准备tif地图 可以通过全能电子地图下载器获取地图（软件可以去淘宝下载） 二，geoserver发布tif 在geoserver安装文件夹中双击“startup.bat”打开服务（注意：为了防止端口占用，我这里更改了默认的端口为8090，在startup.bat文件的最后一行中可以看到） 然后访问：http://localhost:8090/geoserver 新建工作区，名为test 新建数据存储 发布图层 切片 可以看到当前文件夹中就有切片文件了
geoserver发布瓦片_多源数据加载之离线瓦片地图
weixin_39722375的博客
11-29 1259
其实离线瓦片地图和在线瓦片地图是一样的原理，都是瓦片。只是离线瓦片地图存储在本地，而且它的存取方式，可以由开发者自己来定义，而在线瓦片地图则不一定。在不理解原理的情况下，很多人拥有了离线瓦片，却不知道如何加载，所以这里单独来讲解。 示例的瓦片就只有一张。如果放大或者缩小，就可能看不到地图瓦片了：瓦片：loadOfflineTiledMap.html:<html lang="...
通过geoserver发布地图瓦片数据
热门推荐
moyebaobei1的博客
03-06 2万+
最近项目需要离线部署地图服务，中间找了一个合作的公司。现在项目接近尾声，总体感觉合作的公司不成熟，我们自己之前更是没有接触过这种地理信息服务相关的业务，中间也有各种甩锅的经历，这不是重点就不细说了。 项目始于Cesium, 中间结合了倾斜模型，模型单体化，离线地图服务部署。今天 主要说一下离线地图服务部署的问题。 地图数据来源 离线地图数据来源，这里需要瓦片数据，一般有好多公司提供下载...
geoserver发布地图瓦片影像数据
qq_30665009的博客
01-30 1548
geoserver发布地图瓦片影像数据一、准备影像数据1、选择BIGEMAP地图下载器下载城关镇影像数据。2、基本信息图层：选择分层图，只勾选底图，根据业务需求自行选择。地图背景：选择透明勾选级别：第18级3、复制下载好的数据到geoserver目录：E:\Program Files\geoserver-2.18.0\data_dir\data二、Geoserver 中制作栅格地图当你下载完地图...
geoserver2.18（4）：wms服务——GeoWebCache影像切片缓存
碰碰的博客
12-07 3712
1、配置GeoWebCache缓存路径 打开webapps/geoserver/WEB-INF下的web.xml文件，在display-name节点后面添加一下内容： <context-param> <param-name>GEOWEBCACHE_CACHE_DIR</param-name> <param-value>D:\cache\geo_web_cache_dir</param-value>
vue 页面加载geoserver TileMap
03-12
### 集成 GeoServer TileMap 层至 Vue.js 为了在 Vue.js 项目中集成来自 GeoServer 的 TileMap 图层，可以基于 OpenLayers 库来完成这一功能。下面是一个详细的指南说明如何设置。 #### 创建 Map 组件 在 `src/components` 文件夹下建立一个新的组件文件命名为 `GeoServerMap.vue`[^1]： ```html <template> <div id="geo-server-map" ref="map"></div> </template> <script> import 'ol/ol.css'; import { Map, View } from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import TileWMS from 'ol/source/TileWMS'; export default { name: 'GeoServerMap', mounted() { const geoServerURL = 'http://localhost:8080/geoserver/wms'; // 替换成实际的 GeoServer URL new Map({ target: this.$refs.map, layers: [ // 使用默认底图作为背景 new TileLayer({ source: new OSM(), }), // 添加 GeoServer 提供的地图瓦片图层 new TileLayer({ source: new TileWMS({ url: geoServerURL, params: {'LAYERS': 'workspace_name:layer_name', 'TILED': true}, serverType: 'geoserver' }) }), ], view: new View({ center: [0, 0], // 设置中心坐标 zoom: 2 // 初始缩放级别 }) }); } }; </script> <style scoped> #geo-server-map { width: 100%; height: 500px; } </style> ``` 此代码片段展示了怎样配置一个包含两个图层的地图实例：一个是开放街道地图（OpenStreetMap），另一个是从 GeoServer 获取的 WMS 瓦片图层。注意替换掉示例中的 `geoServerURL`, `workspace_name` 和 `layer_name` 参数以匹配具体的部署环境和发布的地理空间数据集名称[^2]。 #### 安装依赖项 确保安装了必要的 npm 包以便能够正常使用上述代码： ```bash npm install ol --save ``` 这会将 OpenLayers 加入到项目的依赖列表里，从而允许通过 ES6 模块导入的方式使用它。 #### 发布 GIS 数据 为了让前端能顺利访问由 GeoServer 托管的数据，在后端还需要做适当的工作——即下载并配置好 GeoServer 来发布所需的 GIS 资源[^4]。一旦完成了这些准备工作，则可以通过调整前面提到的 JavaScript 代码里的参数轻松地把新发布的图层加入到现有的应用当中去。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值