1.使用geoserver 發佈矢量切片服務
參考：https://blog.csdn.net/u012123612/article/details/98940602
2.調用服務
全部示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mapbox 矢量切片</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
}
#mapdiv{
height: 100%;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div id="mapdiv">
</div>
</body>
<script>
</script>
<script>
let source1={name:'Traffic',source:{
"type": "vector",
"traffic": true,
"scheme":"tms",//new
"tiles": ["http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/cite%3Aadm_devcoper_bas_rdnet_linkid_info_d60@3857@pbf/{z}/{x}/{y}.pbf"]
}}
let layer1={
"id": "trafficlines",
"type": "line",
"source": "Traffic",
"source-layer": "adm_devcoper_bas_rdnet_linkid_info_d60",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": {
"type": "categorical",
"property": "color",
"stops": [
['1', '#66cc00'],
['2', '#66cc00'],
['3', '#ff9900'],
['4', '#cc0000'],
['5', '#9d0404']
]
},
}
}
mapboxgl.accessToken ='pk.eyJ1IjoibGJ5MDEwMiIsImEiOiJjanYyMjEwNDcyMGJoNDRwZmxyZDQ3ZjdmIn0.qXtiRarbRFMUbzuwlbmKiA';
var map = new mapboxgl.Map({
container: 'mapdiv',
style: {
"version": 8,
"name": "Mapbox Streets",
"sprite": "mapbox://sprites/mapbox/streets-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {},
"layers": []
},
center: [121.54291,29.8687],
zoom: 10
});
map.on("load", function () {
//添加路況圖層
map.addSource("Traffic",source1.source);
map.addLayer(layer1);
});
</script>
</html>