WMTS服务发布
添加数据源
Geoserver支持的数据源很多,大家可自行对照自己的需求,此处以Geoserver自带的数据源为例,进行讲解。
点击左侧的数据存储
以工作区sf
下面的数据为例:
点击图层
,找到Spearfish restricted areas
,并点击进去
在数据
任务栏中,
坐标系转换
可看到该图层的坐标系是EPSG:26713
,与常规使用的EPSG:4326
和EPSG:3857
不同。
如果需要单独访问当前单个图层的WMS服务
,Mapbox只支持EPSG:3857
,需要在此处重新定义SRS为EPSG:3857
,并选择Reproject native to declared
来进行重投影。
而本例要讲的是图层组的WMTS服务,所以图层组的坐标系可以在后面统一处理。
点击左侧的图层组
,找到spearfish
点击数据
任务栏
默认已经添加了多个图层,这几个图层的坐标系应该一致,都是EPSG:26713
。
点击Tile Caching
任务栏
该任务栏的设置是为切片缓存做准备的。
以上是Geoserver切片所支持的几种格式,其中以application/json
开头的需要单独下载支持mvt的插件,读者可自行搜索,此处不再赘述。
默认选中图片的jpeg和png格式
网格设置,Geoserver自带了EPSG:4326
和EPSG:900913
,而EPSG:900913
与EPSG:3857
的参数是一致的,都是Web墨卡托投影,网上说的自己添加EPSG:3857
,其实没有必要。在发布WMTS服务的时候,分布选择这两个坐标系,会自动转换到对应坐标系的图层,不需要自己额外通过GIS软件进行坐标系转换。
切片图层预览
点击左侧的Tile Layers
,找到图层组,
点击Seed / Truncate
,进入切片环节,
选择对应层级,点击提交
,即可开始切片,
待显示当前无正在执行的任务时,表示切片裁剪结束。
返回上一级,
选择EPSG:900913 / png
,看是否能够正常预览。
Mapbox加载
WMTS的图层类型属于raster
,找到对应的url,即可。
还是刚才的预览页面,打开控制图,进入网络
任务栏,缩放地图,可以看到请求链接,
复制出来,将对应的行列号和层级,修改成{x}{y}{z}
,API会自行匹配。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Geoserver WMTS服务加载</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'your access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 11,
center: [-103.750934, 44.440212]
});
map.on('load', function () {
map.addSource('wmts-source', {
'type': 'raster',
'tiles': [
'http://localhost:8080/geoserver/gwc/service/wmts?layer=spearfish&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}'
],
'tileSize': 256
});
map.addLayer({
'id': 'wmts-layer',
'type': 'raster',
'source': 'wmts-source',
'paint': {
'raster-opacity': 0.8
}
});
});
</script>
</body>
</html>