項目需要，要用Mapbox渲染較大量的建筑數(shù)據(jù)，考慮到數(shù)據(jù)加載(下載)的效率需要采用瓦片的形式
總體方案為本地有shp或geojson數(shù)據(jù)，用Geoserver切片和發(fā)布服務(wù)，Mapbox調(diào)用

數(shù)據(jù)介紹

處理后的OSM數(shù)據(jù)，曼哈頓街區(qū)范圍，保留高度字段，加個是否顯示的標記用于測試filter功能

GeoServer

Tips：
Publishing a GeoServer Layer for use with Mapbox Styles
本文用GeoServer 2.13.0版本
注意安裝Geoserver需要安裝了JRE
注意制作切片需要切片擴展，將jar包復(fù)制到...\GeoServer 2.13.0\webapps\geoserver\WEB-INF\lib下
安裝成功后，先Start GeoServer，再打開Admin Page
跨域問題：https://blog.csdn.net/longshengguoji/article/details/53352888
(待考證)Mapbox矢量切片目前僅支持EPSG:900913

流程：安裝Geoserver(及JRE、矢量切片擴展)——新建工作區(qū)——添加數(shù)據(jù)/發(fā)布——編輯數(shù)據(jù)Tile Caching——跨域問題——mapbox調(diào)用

GeoServer+切片擴展

切片擴展

需要JRE

start

Admin Page

新建工作區(qū)

添加數(shù)據(jù)

編輯圖層

切片圖層

切片預(yù)覽

跨域問題

Mapbox調(diào)用示例

<!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 =<your token>;
    var map = new mapboxgl.Map({
        container: 'map', 
        style: 'mapbox://styles/mapbox/streets-v9', 
        center: [-73.95, 40.78], 
        zoom: 13
    });
    map.on('load', function() {
        map.addSource('xixi',{
            'type':'vector',
            'scheme':'tms',
            'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3AbigBuildings@EPSG:900913@pbf/{z}/{x}/{y}.pbf']
        });

        map.addLayer({
            'id': '3d-buildings',
            'source': 'xixi',
            'source-layer':'bigBuildings',
            'type': 'fill-extrusion',
            'paint': {
                'fill-extrusion-color': [
                    'interpolate',
                    ['linear'],
                    ['get', 'height'],
                    0, 'rgb(255,255,191)',
                    75, 'rgb(253,174,97)',
                    150, "rgb(215,25,28)",
                ],
                'fill-extrusion-height': ['get', 'height'],
                'fill-extrusion-opacity': .8
            }
        });
    });
</script>

</body>
</html>

非常重要！
注意地址：

        map.addSource('xixi',{
            'type':'vector',
            'scheme':'tms',
            'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3AbigBuildings@EPSG:900913@pbf/{z}/{x}/{y}.pbf']
        });

這個地址可以從主頁tms1.0.0處獲得