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.
- GeoServer has many solutions for cross domain access
- On the homepage of GeoServer, click 1.0.0 under TMS on the right to view the published TMS service address
- When accessing WMTS\TMS slicing service made with EPSG: 4326 gridsets, vector slicing cannot be displayed. Using EPSG: 900913 gridsets is normal
- 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:&TILEMATRIXSET=EPSG:900913&" + "FORMAT=application/vnd.mapbox-vector-tile&TILECOL=&TILEROW="; //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///.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 } }); })
