????使用geoserver發(fā)布矢量切片的過程可以參考我在csdn上寫的這篇文章：
利用geoserver發(fā)布矢量切片服務(wù)，進行切圖到本地以及使用leaflet加載顯示：https://blog.csdn.net/jin80506/article/details/79904053
????矢量切片相關(guān)的科普我就不說了，我之前用leaflet加載過矢量切片，效果并不好，除了明顯的卡斷之外，樣式也是個大問題，可用性有限。
????而mapbox在地圖自定義樣式這方面可以說是走在業(yè)界前列，而且.pbf格式本身也是mapbox的數(shù)據(jù)格式，自家的適配性更好。
? ? 發(fā)布完成之后得到切片地址，例如：http://localhost:8011/geoserver/gwc/service/tms/1.0.0/vecTile%3AQingdao@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf
? ? 然后登陸Mapbox，在“account”中創(chuàng)建一個token。這個有使用次數(shù)限制，能瀏覽五萬次地圖，個人的話。
? ? 代碼來了：
<!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 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',//圖層名稱。就是數(shù)據(jù)的名稱
? ? ? ? ? ? 'type': 'fill-extrusion',
? ? ? ? ? ? 'paint': {
? ? ? ? ? ? ? ? 'fill-extrusion-color': [
? ? ? ? ? ? ? ? ? ? 'interpolate',
? ? ? ? ? ? ? ? ? ? ['linear'],
? ? ? ? ? ? ? ? ? ? ['get', 'Height'],//height字段是數(shù)據(jù)里面的高度字段名，注意改
? ? ? ? ? ? ? ? ? ? 0, 'rgb(255,255,191)',
? ? ? ? ? ? ? ? ? ? 10, 'rgb(253,174,97)',
? ? ? ? ? ? ? ? ? ? 20, "rgb(215,25,28)",//0，10，20是指高度，后面的是這個對應(yīng)的顏色
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? 'fill-extrusion-height': ['get', 'Height'],
? ? ? ? ? ? ? ? 'fill-extrusion-opacity': .8//透明度不必解釋了
? ? ? ? ? ? }
? ? ? ? });
? ? });
</script>
</body>
</html>
優(yōu)點是矢量切片加載的很快，樣式也好看，擴展性也強，但是底圖卻不夠快，大概因為是國外公司的緣故，掛個vpn還能快點。
貼圖及數(shù)據(jù)稍后放出
貼圖：
