使用geoserver发布矢量切片的过程可以参考我在csdn上写的这篇文章：
利用geoserver发布矢量切片服务，进行切图到本地以及使用leaflet加载显示：https://blog.csdn.net/jin80506/article/details/79904053
矢量切片相关的科普我就不说了，我之前用leaflet加载过矢量切片，效果并不好，除了明显的卡断之外，样式也是个大问题，可用性有限。
而mapbox在地图自定义样式这方面可以说是走在业界前列，而且.pbf格式本身也是mapbox的数据格式，自家的适配性更好。
发布完成之后得到切片地址，例如：http://localhost:8011/geoserver/gwc/service/tms/1.0.0/vecTile%3AQingdao@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf
然后登陆Mapbox，在“account”中创建一个token。这个有使用次数限制，能浏览五万次地图，个人的话。
代码来了：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Join local JSON data with vector tile geometries</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'>
</div>
<script>
mapboxgl.accessToken ='你的token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [120.373917,36.065276],
zoom: 13
});
map.on('load', function() {
map.addSource('qing',{
'type':'vector',
'scheme':'tms',
'tiles':['http://localhost:8011/geoserver/gwc/service/tms/1.0.0/vecTile%3AQingdao@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']
});
map.addLayer({
'id': '3d-buildings',//随意
'source': 'qing',//和上面那个source保持一致
'source-layer':'Qingdao',//图层名称。就是数据的名称
'type': 'fill-extrusion',
'paint': {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'Height'],//height字段是数据里面的高度字段名，注意改
0, 'rgb(255,255,191)',
10, 'rgb(253,174,97)',
20, "rgb(215,25,28)",//0，10，20是指高度，后面的是这个对应的颜色
],
'fill-extrusion-height': ['get', 'Height'],
'fill-extrusion-opacity': .8//透明度不必解释了
}
});
});
</script>
</body>
</html>
优点是矢量切片加载的很快，样式也好看，扩展性也强，但是底图却不够快，大概因为是国外公司的缘故，挂个vpn还能快点。
贴图及数据稍后放出
网友评论