MapBox calls vector tile services WMTS and TMS published by GeoServer

When using MapBox to call the vector tile service published by GeoServer, I saw many articles on the Internet, but they were never displayed, which finally solved the problem.

Three questions

  1. GeoServer has many solutions for cross domain access
  2. On the homepage of GeoServer, click 1.0.0 under TMS on the right to view the published TMS service address
  3. When accessing WMTS\TMS slicing service made with EPSG: 4326 gridsets, vector slicing cannot be displayed. Using EPSG: 900913 gridsets is normal

Code

  • Add WMTS service code
       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, different version of GeoServer, maybe different here. Please check in 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",//Layer name, layer, layer group name, corresponding to GeoServer publication
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                //style
                "paint": {
                    "line-color": "#E31A1C",
                    "line-width": 3,
                    "line-opacity": 0.9
                }
            });
        })

     

  • Add TMS map service code

    
    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 service has this line
                    '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
                }
            });
        })

     

Result

Posted on Tue, 03 Dec 2019 13:22:19 -0500 by stylusrose