利用geoserver发布矢量切片服务,进行切图到本地以及使用leaflet加载显示

零、插件准备:进入geoserver官网,根据你的geoserver版本号下载vectortiles-plugin插件,目前发现2.12的版本不好使,2.13和2.11的该插件都可正常使用。下载之后放入geoserver安装目录\webapps\geoserver\WEB-INF\lib下,重启。

一、首先确认你需要的切片服务坐标系,在此以epsg3857坐标系为例:

打开geoserver,创建gridset


填写必要的参数,点击保存:


二、添加数据存储:


在此选择shp:


填写必要的参数,选择数据源路径,注意此时数据要放在geoserver的数据文件夹下,一般为data_dir


如果切片中有中文字符,建议在DBF的字符集中选择GBK。

填写完毕后点击保存,进入以下界面,根据数据范围计算边框,如果是地图界面的范围会大出数据范围不少而你又不想控制台里出现太多404错误,建议选compute from srs bounds,但是这样一来接下来的本地切图会增加很多,如果你只用在线的切片那就无所谓。

接下来进入tile cacheing页面:


需要注意两点:一是选择你要做的插件,在此geojson和pbf都选择了。二是选择gridset,刚才创建的3857在此添加上即可。

完成后点击左上角geoserver图标退回首页,点击右侧的tms:



接下来就会找到基地址:



然后就可以使用leaflet插件加载了,插件地址github:https://github.com/Leaflet/Leaflet.VectorGrid

插件地址:https://unpkg.com/leaflet.vectorgrid@1.2.0

调用示例:


调用过程中出现的跨域坑请参考我的上一篇博文:Geoserver 安装及CORS跨域资源访问配置

如果你只需要在线调用,则看到这里就够了,接下来讲使用geoserver把切片保存到本地:

三、使用geoserver把切片保存到本地

选择如下:


找到你想切的图层,选择seed/truncate


进入切片界面:


注意三个问题:

1.选择你需要的坐标系,在此为3857;

2.选择格式,在此为geojson

3.选择切片级别,最大级别号越大花的时间越长,一般矢量切片的时间普遍很短

点击submit,开始切片


结束之后可在数据存储位置的gwc文件夹下找到,有可以改变默认文件夹的方法,请自行去搜索吧


最上级文件夹后两位是z值,二级文件夹的编号不用在意,最底层的文件,前一个数是x值,后一个是y值


  • 5
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
好的,我了解了你的问题。使用leaflet.wmts插件加载geoserver发布的wmts服务,需要按照以下步骤进行操作: 1. 在 HTML 文件中引入leafletleaflet.wmts插件以及geoserver发布的wmts服务的地址,例如: ``` <!DOCTYPE html> <html> <head> <title>Load WMTS service with Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.wmts@1.0.2/dist/leaflet-wmts.js"></script> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([0, 0], 2); var wmtsLayer = L.tileLayer.wmts('http://localhost:8080/geoserver/gwc/service/wmts', { layer: 'workspace:layername', style: '', tilematrixSet: 'EPSG:3857', format: 'image/png', maxZoom: 20, minZoom: 0, attribution: '© <a href="http://www.opengeospatial.org/standards/wmts">OGC WMTS</a> ' + '| © <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); </script> </body> </html> ``` 2. 在代码中创建一个leaflet地图对象,并设置地图的中心点和缩放级别。 3. 使用leaflet.wmts插件的L.tileLayer.wmts方法创建一个WMTS图层,并指定geoserver发布的wmts服务的地址和参数,其中layer参数为geoserver发布的图层名称,tilematrixSet参数为瓦片矩阵集名称,format参数为瓦片格式,maxZoom和minZoom参数为最大和最小缩放级别,attribution参数为图层的属性信息。 4. 将WMTS图层添加到leaflet地图对象中,即可加载geoserver发布的wmts服务。 需要注意的是,geoserver发布的wmts服务的地址和参数需要根据实际情况进行修改。另外,需要确保geoserver发布的wmts服务的地址可以在浏览器中正常访问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值