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

已于 2023-06-12 10:02:14 修改
阅读量3.9k 收藏 18
点赞数 3
分类专栏： openlayers geoserver 文章标签： 其他
于 2020-08-04 16:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/107790185
版权

一，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%3Amyc

最低0.47元/天 解锁文章
疆~
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用vue2 + Echarts + geoServer服务发布图层服务显示地图
weixin_62186125的博客
11-29 220
/ dataView 数据视图 restore 还原 saveAsImage 保存为图片。{ name: "椿林镇", value: 70.5 },{ name: "孙镇", value: 70.5 },// 发布geoserver服务，拿到其geojson数据，我这个发布的是两个镇的数据。// b是name名称 c是value值 （）是单位。// item 在地图系列中通常指代地图的一个区域。// 复制上边地址栏的链接，放到这里。
vue调用geoserver详解
pleaseprintf的博客
07-13 1627
当涉及到在Vue.js项目中调用GeoServer时，你需要遵循一些步骤来确保成功集成。GeoServer是一个开源的地理数据服务器，它允许你存储、检索和发布地理数据。在本文中，我将向你展示如何在Vue.js项目中使用GeoServer。恭喜！你已经成功地在Vue.js项目中调用GeoServer并显示地理数据。你可以进一步扩展该应用程序，添加交互功能和其他地理数据图层。希望这篇博客能对你有所帮助！需要系统源码或者BiShe加V。
geoserver发布tif wms服务
最新发布
weixin_45346457的博客
05-21 202
点击发布 - 编辑图层，一、准备一份tif数据。网上有很多，自己选的是。
geoserver发布TIF格式瓦片地图
热门推荐
09-07 1万+
一，准备tif地图 可以通过全能电子地图下载器获取地图（软件可以去淘宝下载） 二，geoserver发布tif 在geoserver安装文件夹中双击“startup.bat”打开服务（注意：为了防止端口占用，我这里更改了默认的端口为8090，在startup.bat文件的最后一行中可以看到） 然后访问：http://localhost:8090/geoserver 新建工作区，名为test 新建数据存储 发布图层 切片 可以看到当前文件夹中就有切片文件了
openLayers添加geoserver服务wms图层（vue项目）
c6812的博客
04-14 791
8080的端口被占用 netstat -aon|findstr “8080” 找到pid 打开管理器-服务-找到对应pid结束任务。在使用wms图层的时候碰到了跨域的问题，可能大家也会碰到，给大家提供一下解决思路。我当时找了好半天，这里也给把链接给出来，直接按照他的方法弄就可以了。我是直接使用了火狐的浏览器，安装了插件，可以参考下面这篇。贴代码 如果TileWMS出不来可以试试ImageWMS。可以直接使用高德，百度或者天地图，这里有大佬进行了汇总。
vue3+openlayer调用geoserver发布的矢量地图服务并进行显示（清晰封装，简洁明了）
qq_37967853的博客
11-02 1556
vue3+openlayer调用geoserver发布的矢量地图服务并进行显示（清晰封装，简洁明了）
geoserver发布瓦片数据_GeoServer之kml
weixin_39757739的博客
11-30 869
2020年新年初三，“纹丝不动”。今天来说说GeoServer发布kml数据。GeoServer作为一款优秀的地图服务器，其功能之强大自不必多说。但当它遇到三维GIS时却显地那么无力，也许GeoServer本身并不在意自己是否支持三维，也没有考虑过要向三维靠拢，只是作为GeoServer爱好者的我们非要自作多情，非要把GeoServer和三维GIS结合起来。思来想去，也许只有kml/kmz可以作为...
vue 项目 openlayer 加载 WMS 图层
大家好，我是 ed.
06-21 1230
上面的就是 geoserve 发不出来的 WMS 图层连接。具体我不知道为啥这样写哈，但是我这样设置是可以加载出来的啊！ 然后就可以了。
28.（leaflet篇）leaflet接入geoserver发布的wms服务.zip
08-06
在本教程中，我们将深入探讨如何使用Leaflet.js库与GeoServer集成，以显示通过WMS（Web Map Service）发布的地图数据。Leaflet是一个轻量级的JavaScript库，专为Web上的交互式地图设计，而GeoServer是一个开源的...
openlayer地图示例代码
10-16
**OpenLayer地图示例代码详解** 在Web开发中，OpenLayers是一个流行的开源JavaScript库，用于构建交互式的地图应用。结合Vue3，一个现代化的前端框架，可以创建出高性能且易于维护的地图界面。以下是对给定的"open...
vue项目中使用百度地图的方法
08-27
Vue 项目中使用百度地图的方法 Vue 项目中使用百度地图的方法主要介绍了在 Vue 项目中使用百度地图的方法。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。 一、在百度...
geoServer+openLayers简单小例子
07-14
使用openLayers调用geoServer发布的地图数据，并实现放大、缩小、移动、测距、测面积、弹出信息等功能； 需要修改geoServer路径，我的是安装在本地的； 还有部分功能未完成；
前端-tomcat-geosever-postgis部署文档
07-20
系统前端与后端的部署过程，详细
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
它支持多种地图服务，包括天地图。在本教程中，我们将探讨如何使用OpenLayers接入天地图，并处理经纬度投影的问题。 首先，我们需要了解地理坐标系统。常见的有WGS84，这是一个全球通用的地球坐标系统，使用经纬度...
详解vue在项目中使用百度地图
10-17
主要介绍了vue在项目中使用百度地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
瓦片地图与geoserver发布
weixin_30451709的博客
10-17 537
本文主要包括以下内容 TileMill生成Tile影像金字塔（.mbtiles压缩文件） Mbutil(https://github.com/mapbox/mbutil)解压缩 Apache HTTP Server(或tomcat) 建立web瓦片服务 客户端调用（ http://www.arcgis.com/home）测试 首先将数据导入postgres数据库中...
Vue+OpenLayers 访问geoserver加载地图
qq_53273102的博客
11-30 2133
Vue+OpenLayers 访问geoserver加载地图
vue3结合openlayers，geoserver实现GIS一张图(WebGIS)
weixin_73810008的博客
02-09 2773
WebGIS小小白在除夕这天倾情演绎
213：vue+openlayers 通过WFS服务加载geoserver发布的geojson矢量数据
大剑师兰特的GIS世界
03-10 517
第213个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的矢量数据，这里是加载geojson数据方法，具体的加载方式参考源代码。
vue中openLayer请求离线地图总是有个前缀
07-14
您好！对于Vue中OpenLayers请求离线地图总是有前缀的问题，您可以尝试以下方法进行处理。 1. 在Vue项目的public文件夹中创建一个文件夹，例如"static"，将离线地图文件（如瓦片地图）放入其中。 2. 在Vue组件中引入OpenLayers库，并在初始化地图时指定离线地图的URL。 ```javascript import * as ol from 'openlayers'; export default { mounted() { const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: '/static/your-map-folder/{z}/{x}/{y}.png', // 替换为实际的地图文件路径 // 其他配置项... }), }), ], // 其他配置项... }); // 其他操作... }, // 其他方法... } ``` 在上述代码中，'/static/your-map-folder/' 是您在public文件夹下创建的存放离线地图文件的文件夹路径，'{z}/{x}/{y}.png' 是瓦片地图文件的命名规则。 3. 在Vue组件的模板中添加一个具有唯一ID的div元素，作为地图容器。 ```html <template> <div id="map"></div> </template> ``` 这里的'id="map"'应与初始化地图时指定的target属性值相对应。 通过以上步骤，您应该能够在Vue中成功加载离线地图，并且不再有前缀问题。请根据实际情况进行相应的路径和文件名调整。希望对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值