使用GeoServer+QGIS发布WMTS服务 | Publishing WMTS Service Using GeoServer+QGIS

Web GIS系列:
1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
2.使用GeoServer+QGIS发布WMTS服务
3.使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 .
4.Leaflet入门:添加点线面并导入GeoJSON数据

使用GeoServer发布服务

请参见笔者博客:搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
下载GeoServer服务器并在本地安装好。本篇文章同样采用里面的shp文件数据进行WMTS服务的发布。

发布WMS服务

在GeoServer中,我们可以直接将shp文件发布为服务。
方法如下:
选择左侧Data->Store,添加新的Store,选择Shapefile文件。

分别输入Workspaces,数据源名称,并通过点击shapefile文件位置,将shp文件上传。最后保存。

之后即可在图层中预览所发布的WMS服务。如图:

发布样式

可以看到图中使用的是默认的样式。如何将图修改为我们所需要的样式,从而配上相应的颜色呢?
在这里使用了QGIS软件。QGIS是一个开源的GIS软件。可以前往其官网下载:QGIS
安装完成后,打开QGIS Desktop.在左侧选择添加矢量图层,导入shp数据。

导入后的结果如下:

在这里,我们希望根据GDP的总量对中国各个省份进行分级设色。双击左下角的图层,即可跳出属性框,在这其中可以对图层的样式、颜色、线形等进行设置。选择分层设色依据的字段,设置颜色即可。

效果如图:

调整效果后,将样式保存为sld文件:

再回到GeoServer中,选择左侧Styles,发布一个新的Style,输入相应的样式名称、工作区,选择文件的类型(点、线、面等),最后将生成的sld文件上传即可。

再返回图层,选择刚才发布的WMS服务并点击进入,在style里选择刚才发布的样式。或在下面添加可选样式。

再次浏览图层,发现已经上色了。

发布WMTS服务

点击GeoServer左侧Tile Caching中Gridsets,可以看到里面已经预设了一些切片形式。我们也可以新建一个切片策略。在其中选择合适的投影,设置范围,并添加切片的层级。

之后点击Tile Layers,选择Tile Caching,设置样式,并在最下面添加刚才新建的切片策略。

返回Tile Layers,找到图层,在最后选择切片策略,预览结果。例如选择EPSG:4326 / jpeg效果如下:

放大缩小可以感觉出矢量瓦片地图渲染的方式。
再点击Seed / Truncate,即可生成切片。输入相应的参数,即可生成切片。

观看输出窗口,可以看到切片在不断生成。生成的切片文件将保存在本地\geowebcache文件夹下。

若要应用WMTS服务,可以直接调用其网址,格式如下:
http://localhost:8080/geoserver/gwc/service/wmtslayer=[workspace]:CHINA_2014GDP&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/jpeg&TileMatrix=EPSG:4326:[x]&TileCol=[y]&TileRow=[z]
其中x为切片层级,y和z则分别代表该层级下,相应行列处的切片。具体的调用方法请参见下一篇文章。

Web GIS系列:
1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
2.使用GeoServer+QGIS发布WMTS服务
3.使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 .
4.Leaflet入门:添加点线面并导入GeoJSON数据

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解了你的问题。使用leaflet.wmts插件加载geoserver发布wmts服务,需要按照以下步骤进行操作: 1. 在 HTML 文件中引入leaflet、leaflet.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服务的地址可以在浏览器中正常访问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值