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%[email protected]@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);