自己在实践过程中的一些记录,如果有错误的地方,希望指出交流。
一、数据准备
苏州工业园区建筑地块数据(wgs84),数据中包含地块高度字段。图1-1 苏州园区建筑地块数据
二、geoserver 安装
我在早之前安装过geoserver2.14.2版本和该版本对应的插件,使用该版本发布服务后遇到了pbf格式文件无法预览的问题(geojson格式倒是可以),其实在预览时切片文件夹下根本就没有pbf文件。我不知道问题出在哪里(有知道的,可以告知一下),所有我卸载了该版本的geoserver,从新选择安装2.14.0的版本。
2.1 软件下载GeoServergeoserver.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 geometriesbody {
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
}
});
});