MapBox调用GeoServer发布的矢量瓦片服务WMTS、TMS

在使用MapBox调用GeoServer发布的矢量瓦片服务时，在网上看到了很多文章，但是始终不显示，最终解决了这个问题。

三个问题

1. 跨域访问问题，GeoServer跨域网上已经有了很多的解决方案
2. 在GeoServer的首页点击右侧TMS下的1.0.0即可查看已发布的TMS服务地址
3. 访问使用EPSG:4326-Gridsets制作的WMTS\TMS切片服务时，矢量切片无法显示，使用EPSG:900913-Gridsets则正常

代码

• 添加WMTS服务代码

     var vectorLayerUrl = "http://localhost:8088/geoserver/gwc/service/wmts?"+
          "REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:town" +
          "&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
          "FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}";
      //application/vnd.mapbox-vector-tile,GEoServer版本不同，这里可能不同，注意在GeoServer里查看
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v10',
          center: [108.438, 34.431],
          zoom: 7
      });
      map.on("load", function () {
          map.addLayer({
              "id":"tms-test",
              "type": "line",
              'source': {
                  'type': 'vector',
                  'tiles': [
                      vectorLayerUrl
                  ]
              },
              "source-layer": "town",//图层名称，图层、图层组名称注意和GeoServer发布的对应
              "layout": {
                  "line-join": "round",
                  "line-cap": "round"
              },
              //样式
              "paint": {
                  "line-color": "#E31A1C",
                  "line-width": 3,
                  "line-opacity": 0.9
              }
          });
      })

   

• 添加TMS地图服务代码

  
  
  var tmsUrl="http://localhost:8088/geoserver/gwc/service/tms/1.0.0/cite%3Atown@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
  
  
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v10',
          center: [108.438, 34.431],
          zoom: 7
      });
      map.on("load", function () {
          map.addLayer({
              "id":"tms-test",
              "type": "line",
              'source': {
                  'scheme':'tms',//TMS服务有此一行
                  'type': 'vector',
                  'tiles': [
                      tmsUrl
                  ]
              },
              "source-layer": "town",
              "layout": {
                  "line-join": "round",
                  "line-cap": "round"
              },
              "paint": {
                  "line-color": "#E31A1C",
                  "line-width": 3,
                  "line-opacity": 0.9
              }
          });
      })

   

结果