geoserver 發佈矢量切片服務，並使用leaflet 加載

1.服務發佈

（1）geoserver 連接mySql數據庫:
下載插件：http://geoserver.org/release/2.14.5/；
現在mySql 支持的插件，以及矢量切片插件

插件解壓放到：geoserver安裝目錄\webapps\geoserver\WEB-INF\lib下；
（2）連接數據庫

（3）數據發佈。連接成功後，選擇 圖層–添加新的資源–選擇數據源–找到數據–發佈

填寫基本參數，name，座標系等，注意：數據需要有geometry（幾何） 字段。
例如：update lane set shape= geomfromtext(‘point(108.9465236664 34.2598766768)’)

勾選矢量切片格式，及座標系

“保存”後，找到矢量切片地址：
單擊geoserver圖標–TMS

2.leaflet 加載矢量切片

leaflet 矢量切片 插件下載

本文以Leaflet.VectorGrid爲例，其他方式讀者自行嘗試
關鍵代碼如下：

function vectorGridLayer(url, options) {
            let layerOptions = options || {};
            let vectorTileLayerStyles = {};
            layerOptions.renderFactory = layerOptions.renderFactory ? layerOptions.renderFactory : L.svg.tile;
            vectorTileLayerStyles[layerOptions.layerName] = options.vectorTileLayerStyles;
            layerOptions.vectorTileLayerStyles = vectorTileLayerStyles;
            let layer = L.vectorGrid.protobuf(url, layerOptions);
            return {
                layer: layer
            };
        };

    function getVectorTileLayer(){
            let url = 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/cite%3Alane_info@3857@pbf/{z}/{x}/{-y}.pbf';
            let localVectorTileOptions = {
                renderFactory: L.canvas.tile,
                layerName: 'lane_info',
                vectorTileLayerStyles: function (feature, zoom) {
                    let weight = 0;
                    let roadclass = feature.nroadclass;
                    //根據地圖等級設置顯示的矢量數據
                    if (zoom <= 13) {
                        if (roadclass == '41000' || roadclass == '42000' || roadclass == '43000') {
                            weight = 1;
                        } else {
                            weight = 0;
                        }
                    } else if (zoom < 17 && zoom > 13) {
                        if (roadclass == '41000' || roadclass == '42000' || roadclass == '43000' || roadclass == '44000') {
                            weight = 2;
                        } else {
                            weight = 0;
                        }
                    } else {
                        weight = 2;
                    }
                    //根據屬性設置顏色
                    let color = feature.color;
                    let lineColor = '';
                    if (color == '1') {
                        lineColor = '#34b000';
                    } else if (color == '2') {
                        lineColor = '#fecb00';
                    } else if (color == '3') {
                        lineColor = '#df0100';
                    } else {
                        lineColor = '#8e0e0b';
                    }
                    return {
                        weight: weight,
                        color: lineColor || '#34b000'
                    };
                }
            };
            let vectorGridLayer = vectorGridLayer(url, localVectorTileOptions);
            return vectorGridLayer;
    }

    let vectorTileLayer=getVectorTileLayer();
    map.addLayer(vectorTileLayer);