GeoServer发布矢量切片及其调用方式(mapbox/leaflet)

前言：矢量切片(VectorTile)是当前WebGIS较热技术，高德及百度等在线地图都纷纷使用矢量切片技术(当然数据都是加密的)。矢量切片好处很多，简单几点就是，轻量，客户端渲染，还可加密（栅格切片容易被爬取）。矢量切片格式一般有GeoJSON、TopoJSON和.mvt(MapBox Vector Tile)，还有常用的 .pbf。

pbf 格式是常用的矢量切片数据格式，Mapbox 及 Leaflet（借助插件）都支持。.pbf数据制作有点麻烦，借助 GeoServer，便可以轻松地将我们的矢量数据发布为pbf，以供前端调用。

安装 GeoServer

工欲善其事，必先利其器

安装方式很简单，其中一种简便方式就是从 GeoServer 官网下载war包并放进Tomcat便完成了，win7环境的Tomcat安装方法请点击详情。

本人电脑的 Tomcat 配置的端口是8088（默认是8080），那么打开 GeoServer 的 URL：

http://localhost:8088/geoserver

默认账户/密码：admin/geoserver

安装矢量切片插件

下载跟 GeoServer 对应版本的插件，例如安装了 2.14.1版本，那么就应下载geoserver-2.14.1-vectortiles-plugin.zip。

在此给出官方V2.14.1的下载链接

geoserver-2.14.1-war.zip

geoserver-2.14.1-vectortiles-plugin.zip

将geoserver-2.14.1-vectortiles-plugin.zip解压后的几个 .jar 文件拷贝到 %TOMCAT_PATH%/geoserver/WEB-INF/lib 下

然后重启 Tomcat

发布图层

按正常图层发布流程即可，具体流程参考官网帮助文档。

发布图层时，在Tile Caching选项页面，在Tile Image Formats 位置，勾上
application/x-protobuf;type=mapbox-vector

GeoServer 2.14版本开始，这个选项已经换成：
application/vnd.mapbox-vector-tile

注意：如果没有安装矢量切片插件，则没有该选项

在本例子中，发布了一个道路图层test_road，该图层带有 speed 字段，前端将使用该字段的值来渲染颜色。另外，这个图层所在的工作区是traffic。下面例子会涉及到这三个参数。

构建矢量切片URL

可以通过两种常用服务来构建矢量切片 URL，分别是 WMTS 和 TMS。其中 TMS 加载时需要额外设置一下，例如 mapbox 需要在 source 里面加一个 scheme 选项，即 "scheme": 'tms'。

WMTS:

var vectorLayerUrl = "http://localhost:8088/geoserver/gwc/service/wmts?"+
"REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=traffic:test_road" +
"&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
"FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}";

TMS:

vectorLayerUrl = "http://localhost:8088/geoserver/gwc/service/tms/1.0.0/"+
"traffic:test_road@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";

leaflet 调用

leaflet 需要使用插件 L.vectorGrid.protobuf 。

调用方式：

L.vectorGrid.protobuf(vectorLayerUrl, {
                layerURL: vectorLayerUrl,
                rendererFactory: L.canvas.tile,
                vectorTileLayerStyles: getVectorStyles("test_road", "speed"),
                // tms: true, // 如果使用 TMS，则必须开启
            }).addTo(map);

// 设置道路线的样式
function getVectorStyles(layerName, fieldName) {
    var style = {};
    style[layerName] = function (properties, zoom) {
        var p = properties[fieldName];
        return {
            color: p < 0.001 ? 'transparent' : p < 5 ? '#800026' : p < 15 ? '#E31A1C' : p < 30 ? '#FEB24C' :
                '#00ff00',
            fillOpacity: 0.5,
            //fillOpacity: 1,
            stroke: true,
            fill: true,
            //opacity: 0.2,
            weight: 3,
        }
    };
    return style;
}

注意：如果使用 TMS，则需要设置属性：

tms: true

mapbox 调用

var vectorLayer = {
                "id": 'road-layer',
                "type": "line",
                "source": {
                    // "scheme": 'tms', // 如果使用 TMS，则必须开启
                    "type": 'vector',
                    "tiles": [vectorLayerUrl]
                },
                "source-layer": "test_road",
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": getLineStyle('speed'),
                    "line-width": 3,
                    'line-opacity': 0.9
                },
                'minzoom': 8
            };
map.addLayer(vectorLayer);
// 设置道路线的样式
function getLineStyle(fieldName) {
    return {
        property: fieldName,
        type: "interval",
        stops: [
            [-1.0, 'transparent'],
            [0.0, "#800026"],
            [5.0001, "#E31A1C"],
            [15.0001, "#FEB24C"],
            [30.0001, "#00ff00"]
        ]
    }
}

注意：如果使用 TMS，则需要设置属性：

"scheme": 'tms'

--------------------- end ----------------------

最后附上完整的示例代码