mapbox矢量切片标准_矢量切片绘制（mapbox-gl+geoserver）

自己在实践过程中的一些记录，如果有错误的地方，希望指出交流。

一、数据准备

苏州工业园区建筑地块数据(wgs84)，数据中包含地块高度字段。图1-1 苏州园区建筑地块数据

二、geoserver 安装

我在早之前安装过geoserver2.14.2版本和该版本对应的插件，使用该版本发布服务后遇到了pbf格式文件无法预览的问题(geojson格式倒是可以)，其实在预览时切片文件夹下根本就没有pbf文件。我不知道问题出在哪里(有知道的，可以告知一下)，所有我卸载了该版本的geoserver，从新选择安装2.14.0的版本。

2.1 软件下载GeoServer​geoserver.org图2-1 geoserver2.14.0图2-2 矢量切片插件

2.2 软件安装

geoserver的安装需要java环境，安装完成后将矢量切片插件复制到web-info\lib文件夹下，我的文件全路径是【d:\Program Files(x86)\Geoserver 2.14.0\webapps\geoserver\WEB-INF\lib】，然后重启geoserver。

2.2 解决地图跨越问题

在这里下载(密码:ei2p)需要jar包，将cors-filter-2.6.jar和java-property-utils-1.13.jar文件拷贝到WEB-INF\lib目录下，然后修改WEB-INF目录下的Web.xml文件，修改后重启geoserver。

首先在与filter节点平级的位置写入下述代码：

CORS

com.thetransactioncompany.cors.CORSFilter

cors.tagRequests

true

然后在与filter-mapping平级的位置写入下述代码：

CORS

/*

geoserver跨域问题解决方案同时可以产参考这篇博客。

三、服务发布

点击工作区，新建工作区，可以将新建的工作区设置为默认工作区。图3-1新建工作区

添加数据存储，选择矢量数据源，并添加苏州园区的矢量文件。图3-2新建数据源图3-3添加数据源

修改矢量切片服务源信息，在【数据】信息中选择从数据中计算边框信息。同时，在【Tile Caching】中勾选application/x-protobuf;type=mapbox-vector，保存。图3-4修改数据参数(1)图3-4修改数据参数(2)

在 Tile Caching -> Tile Layers 中预览矢量切片服务，如果成功，会在服务文件夹下生成对应的pbf文件。图3-5服务预览图3-6服务文件查看

四、服务调用(mapbox-gl)

获取服务请求地址。图4-1获取服务地址(1)图4-2获取服务地址(2)图4-3服务调用结果

Join local JSON data with vector tile geometries

body {

margin: 0;

padding: 0;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

mapboxgl.accessToken =

'';

var map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/outdoors-v9',

center: [121, 31],

zoom: 10

});

map.on('load', function () {

map.addSource('szbuild', {

'type': 'vector',

'scheme': 'tms',

'tiles': [

'http://localhost:8085/geoserver/gwc/service/tms/1.0.0/' + '\

myTest%3Asz_build@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf'

]

});

map.addLayer({

'id': 'buildinds',

'source': 'szbuild',

'source-layer': 'sz_build',

'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': 1

}

});

});