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

何去何从2857

已于 2022-08-07 16:35:22 修改

阅读量3.5k

点赞数 3

分类专栏： WebGIS 文章标签： geoserver WebGIS Mapbox

于 2022-08-07 16:35:08 首次发布

本文链接：https://blog.csdn.net/hequhecong10857/article/details/126208594

版权

WebGIS 专栏收录该内容

62 篇文章 49 订阅

订阅专栏

文章目录

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>