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

文章目录

  • WMTS服务发布
    • 添加数据源
    • 坐标系转换
    • 切片图层预览
  • Mapbox加载

WMTS服务发布

添加数据源

Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第1张图片
Geoserver支持的数据源很多,大家可自行对照自己的需求,此处以Geoserver自带的数据源为例,进行讲解。
点击左侧的数据存储以工作区sf下面的数据为例:
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第2张图片
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第3张图片
点击图层,找到Spearfish restricted areas,并点击进去
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第4张图片
在这里插入图片描述
数据任务栏中,
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第5张图片

坐标系转换

Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第6张图片
可看到该图层的坐标系是EPSG:26713,与常规使用的EPSG:4326EPSG:3857不同。
如果需要单独访问当前单个图层的WMS服务,Mapbox只支持EPSG:3857,需要在此处重新定义SRS为EPSG:3857,并选择Reproject native to declared来进行重投影。
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第7张图片
而本例要讲的是图层组的WMTS服务,所以图层组的坐标系可以在后面统一处理。

点击左侧的图层组,找到spearfish
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第8张图片
在这里插入图片描述
点击数据任务栏
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第9张图片
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第10张图片
默认已经添加了多个图层,这几个图层的坐标系应该一致,都是EPSG:26713
点击Tile Caching任务栏
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第11张图片
该任务栏的设置是为切片缓存做准备的。
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第12张图片
以上是Geoserver切片所支持的几种格式,其中以application/json开头的需要单独下载支持mvt的插件,读者可自行搜索,此处不再赘述。
默认选中图片的jpeg和png格式
在这里插入图片描述
网格设置,Geoserver自带了EPSG:4326EPSG:900913,而EPSG:900913EPSG:3857的参数是一致的,都是Web墨卡托投影,网上说的自己添加EPSG:3857,其实没有必要。在发布WMTS服务的时候,分布选择这两个坐标系,会自动转换到对应坐标系的图层,不需要自己额外通过GIS软件进行坐标系转换。

切片图层预览

点击左侧的Tile Layers,找到图层组,
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第13张图片
在这里插入图片描述
点击Seed / Truncate,进入切片环节,
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第14张图片
选择对应层级,点击提交,即可开始切片,
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第15张图片
待显示当前无正在执行的任务时,表示切片裁剪结束。
返回上一级,
在这里插入图片描述
选择EPSG:900913 / png,看是否能够正常预览。

Mapbox加载

WMTS的图层类型属于raster,找到对应的url,即可。
还是刚才的预览页面,打开控制图,进入网络任务栏,缩放地图,可以看到请求链接,
Geoserver发布WMTS服务中的坐标系转换与Mapbox加载_第16张图片
复制出来,将对应的行列号和层级,修改成{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>

你可能感兴趣的:(WebGIS,geoserver,WebGIS,Mapbox)