Geoserver发布WMTS服务中的坐标系转换与Mapbox加载

Geoserver发布WMTS服务中的坐标系转换与Mapbox加载
文章目录
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
```
相关阅读:
21天学会C++：Day15----STL简介
 老杨说运维 | 农信行业运维数字化和智能化转型实践分享
 使用REDIS的INCREMENT方法生成自增主键，并发量每秒一万
 黑客（网络安全）技术自学30天
 Python函数绘图与高等代数互融实例(一):正弦函数与余弦函数
 【matplotlib基础】--文本标注
 【毕业设计】基于大数据的抖音短视频数据分析与可视化 - python 大数据可视化
 Neo4j aura 官方网站快速入门新手教精读-从官方教程学习知识图谱
 AE特效解读
 【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
原文地址：https://blog.csdn.net/hequhecong10857/article/details/126208594

文章目录

WMTS服务发布

添加数据源

坐标系转换

切片图层预览

Mapbox加载