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
            }
        });
    })

结果